如何在 Jetpack Compose 中双向滚动

Question

我在 Jetpack compose 中创建了一个相当经典的折叠图像布局，其中屏幕顶部有一个图像，该图像视差滚动消失，并且在某个时刻我将工具栏背景从透明更改为primarySurface。这一切都运行得很好。

我现在希望在顶部有一个图像寻呼机，而不是单个图像，但垂直滚动消耗了屏幕顶部的所有触摸。我尝试添加 NestedScrollConnection 但我似乎仍然只在一个轴上获得 preScroll 增量。显然，我什至无法在该区域中添加图标来进行手动寻呼机滚动而不消耗点击。一旦我删除verticalScroll从我的列中删除 ，我就能够获取寻呼机的水平滚动事件。

我正在使用 Compose 1.0.2 和 Accompanist 0.18 寻呼机和插图库。

这是我想要添加寻呼机的现有代码的要点。如何让寻呼机和垂直滚动同时工作？

val scrollState = rememberScrollState()
Box {
    val imageHeight =
        if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) 180.dp else 300.dp
    Box {
        // I want to insert a horizontal pager here
        HeaderImage(
            scrollPosition = scrollState.value,
            info = item.heroImages.first(),
            imageHeight = imageHeight
        )
    }
    val appBarHeight = with(LocalDensity.current) { 56.dp.toPx() }
    val scrollHeight = with(LocalDensity.current) { imageHeight.toPx() - appBarHeight }

    Column(
        Modifier
            .verticalScroll(scrollState)
            .padding(top = imageHeight)
            .fillMaxSize()
    ) { ... }
    TopAppBar( ... )

这是一个 github 存储库，我试图在其中展示该问题的一个简单示例。我要么最终得到一个无法垂直滚动的水平寻呼机，要么主滚动布局也消耗了寻呼机工作所需的水平滚动。

https://github.com/barry-irvine/scroll_issue

Answer 1

将水平滚动视图放置在垂直滚动视图内没有问题：滚动将毫无问题，并且手势的当前滚动方向将根据第一个拖动像素的方向来选择。

Column(
    Modifier
        .verticalScroll(scrollState)
) {
    HorizontalPager(/*...*/)
    OtherScrollableContent(/*...*/)
}