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