Jetpack Compose中如何实现特定条件下的面板滚动联动？

要实现你描述的左面板固定、右面板滚到底后同步滚动并显示底部内容的交互，核心是分阶段控制不同滚动区域的启用状态，通过监听滚动状态切换交互逻辑。以下是具体实现方案：

核心逻辑拆解 #

1. 初始阶段：仅右面板可独立滚动，左面板保持固定；包含左右面板和底部内容的整体容器禁止滚动。
2. 触发阶段：当右面板滚动至底部后，禁用右面板的独立滚动，启用整体容器的滚动；此时左右面板随整体同步滚动，底部内容逐步显示。

代码实现 #

@Composable
fun DialogScreen() {
    // 右面板单独滚动状态
    val rightPanelScrollState = rememberScrollState()
    // 整体滚动状态（覆盖左右面板+底部内容）
    val overallScrollState = rememberScrollState()

    // 监听右面板是否滚动至底部，用derivedStateOf减少不必要重组
    val isRightPanelAtBottom = remember {
        derivedStateOf {
            rightPanelScrollState.value == rightPanelScrollState.maxValue
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .verticalScroll(
                    state = overallScrollState,
                    // 仅右面板滚到底后，才允许整体滚动
                    enabled = isRightPanelAtBottom.value
                )
        ) {
            Row(modifier = Modifier.fillMaxWidth()) {
                // 右面板：初始可滚动，滚到底后禁用
                RightPanel(
                    modifier = Modifier
                        .weight(1f)
                        .verticalScroll(
                            state = rightPanelScrollState,
                            enabled = !isRightPanelAtBottom.value
                        )
                )

                // 左面板：初始固定，整体滚动启用后随Row同步滚动
                LeftPanel(modifier = Modifier.weight(1f))
            }

            // 底部内容：整体滚动时逐步显示
            BottomContent(modifier = Modifier.fillMaxWidth())
        }
    }
}

// 示例右面板组件
@Composable
private fun RightPanel(modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(16.dp)) {
        repeat(20) {
            Text(text = "右面板条目 $it", modifier = Modifier.padding(vertical = 8.dp))
        }
    }
}

// 示例左面板组件
@Composable
private fun LeftPanel(modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(16.dp)) {
        repeat(20) {
            Text(text = "左面板条目 $it", modifier = Modifier.padding(vertical = 8.dp))
        }
    }
}

// 示例底部内容组件
@Composable
private fun BottomContent(modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(16.dp)) {
        Text(text = "底部内容区域", fontSize = 18.sp, fontWeight = FontWeight.Bold)
        repeat(5) {
            Text(text = "底部条目 $it", modifier = Modifier.padding(vertical = 8.dp))
        }
    }
}

关键细节说明 #

• 滚动状态监听：通过derivedStateOf实时判断右面板是否到达滚动底部，确保状态变化仅在必要时触发重组。
• 滚动权限切换：右面板和整体容器的滚动启用状态互斥，避免滚动冲突；右面板滚到底后，用户的滚动操作会自动切换到整体容器。
• 同步滚动实现：左面板无需单独设置滚动，当整体容器滚动启用后，它作为Row的子元素会自动跟随整体滚动，实现与右面板的同步效果。

内容的提问来源于stack exchange，提问作者Denis Popkov