Jetpack Compose中垂直滚动内按钮首次点击无效问题求助

当HorizontalPager仅包含1个页面时，它仍会持续监听水平滑动手势。在你滚动垂直列表后，触摸事件会被HorizontalPager的手势检测器优先拦截，导致按钮的点击事件无法正常传递，需要多次点击才能突破拦截触发响应。

方案1：移除不必要的HorizontalPager（推荐） #

既然只有1个页面，完全不需要使用HorizontalPager，直接保留垂直滚动的Column即可，从根源避免手势冲突：

@OptIn(ExperimentalPagerApi::class)
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        val scrollState = rememberScrollState()

        Column(
            modifier = Modifier
                .verticalScroll(scrollState)
                .fillMaxSize()
        ) {
            Box(
                modifier = Modifier
                    .fillMaxSize()
                    .height(1000.dp), 
                contentAlignment = Alignment.Center
            ) {
                Text(text = "Box")
            }

            Button(
                modifier = Modifier.fillMaxWidth(),
                onClick = { showToastMsg("Hello") }) {
                Text(text = "Button")
            }
        }
    }
}

方案2：保留HorizontalPager并禁用手势拦截 #

如果后续需要扩展多页面，必须保留HorizontalPager，可以通过自定义手势处理禁用其水平滑动检测，避免拦截点击事件：

@OptIn(ExperimentalPagerApi::class)
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    setContent {
        val pagerState = rememberPagerState(pageCount = 1)
        val scrollState = rememberScrollState()

        HorizontalPager(
            state = pagerState,
            modifier = Modifier.pointerInput(Unit) {
                // 拦截所有水平手势，只让垂直滚动和点击事件通过
                awaitPointerEventScope {
                    while (true) {
                        val event = awaitPointerEvent()
                        if (event.type == PointerEventType.Press || event.type == PointerEventType.Move) {
                            val positionChange = event.changes.first().positionChange()
                            // 只处理垂直方向的手势，忽略水平方向
                            if (abs(positionChange.x) > abs(positionChange.y)) {
                                event.changes.forEach { it.consume() }
                            }
                        }
                    }
                }
            }
        ) { page ->
            Column(
                modifier = Modifier
                    .verticalScroll(scrollState)
                    .fillMaxSize()
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .height(1000.dp), 
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "Box")
                }

                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { showToastMsg("Hello") }) {
                    Text(text = "Button")
                }
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者Rizwan Rasheed