如何在 Jetpack Compose 中双向滚动

Question

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

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

我正在使用 Compose 1.0.2 和 Accompanist 0.18 pager 和 inset 库。

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

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(/*...*/)
}