Jetpack compose 中 HorizontalPager 内的垂直滚动不起作用

Question

我正在尝试在 Jetpack Compose 的 HorizontalPager 中添加垂直滚动。

这是我正在使用的代码

 HorizontalPager(
            count = showPagerEntries,
            state = pagerState,
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp))
        ) { pageIndex ->

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .scrollable(
                        state = scrollState,
                        orientation = Orientation.Vertical
                    )
                    .height(506.dp)
                    .background(colorResource(id = R.color.white))
            ) {
              // other Jet pack compose elements like texts, images
            }
        }

页面的水平滑动有效，但垂直滚动无效。 知道如何解决这个问题吗？

Answer 1

尝试在 Box 内添加内容并为 Box 提供垂直滚动。然后就可以与水平寻呼机一起正常工作了。

Box(
    modifier = Modifier
        .verticalScroll(rememberScrollState())
) {
    //Content here
}

您的完整代码将类似于：

HorizontalPager(
            count = showPagerEntries,
            state = pagerState,
            modifier = Modifier
                .fillMaxWidth()
                .clip(RoundedCornerShape(topStart = 12.dp, topEnd = 12.dp))
        ) { pageIndex ->

            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .scrollable(
                        state = scrollState,
                        orientation = Orientation.Vertical
                    )
                    .height(506.dp)
                    .background(colorResource(id = R.color.white))
            ) {
            Box(modifier = Modifier
               .verticalScroll(rememberScrollState())
) {
    //Content here like Text, Image etc
 }

} }