Jetpack Compose实现固定行列头的二维可滚动表格方案咨询

要实现你需要的效果，核心是让绿框（列头）和黑框（内容区）共享水平滚动状态，红框（行头）和黑框共享垂直滚动状态，同时通过层叠布局固定黄框和各自的行列头位置。以下是调整后的完整代码：

@Composable
fun MyScrollBox() {
    MaterialTheme {
        Surface(color = Color.White) {
            // 定义共享的滚动状态，用于同步滚动
            val horizontalScrollState = rememberScrollState()
            val verticalScrollState = rememberScrollState()

            Box(modifier = Modifier.fillMaxSize()) {
                // 左上角黄框：始终固定可见
                Box(
                    modifier = Modifier
                        .size(50.dp)
                        .background(Color.Yellow)
                ) {
                    Text(text = "YELLOW BOX")
                }

                // 顶部绿框（列头）：仅水平滚动，与黑框同步
                Row(
                    modifier = Modifier
                        .padding(start = 50.dp) // 避开黄框
                        .horizontalScroll(horizontalScrollState)
                ) {
                    Box(
                        modifier = Modifier
                            .height(50.dp)
                            .width(800.dp)
                            .background(Color.Green)
                    ) {
                        Text(text = "GREEN BOX")
                    }
                }

                // 左侧红框（行头）：仅垂直滚动，与黑框同步
                Column(
                    modifier = Modifier
                        .padding(top = 50.dp) // 避开黄框
                        .verticalScroll(verticalScrollState)
                ) {
                    Box(
                        modifier = Modifier
                            .width(50.dp)
                            .height(800.dp)
                            .background(Color.Red)
                    ) {
                        Text(text = "RED BOX")
                    }
                }

                // 黑框（内容区）：同时支持水平/垂直滚动，分别与绿框、红框同步
                Box(
                    modifier = Modifier
                        .padding(start = 50.dp, top = 50.dp) // 避开黄框、行列头
                        .horizontalScroll(horizontalScrollState)
                        .verticalScroll(verticalScrollState)
                ) {
                    Box(
                        modifier = Modifier
                            .size(800.dp)
                            .background(Color.Black)
                    ) {
                        Text(text = "BLACK BOX", color = Color.White)
                    }
                }
            }
        }
    }
}

关键调整说明 #

• 滚动状态共享：通过rememberScrollState()创建两个全局滚动状态，分别绑定到绿框+黑框的水平滚动、红框+黑框的垂直滚动，实现同步效果。
• 层叠布局：使用Box作为根容器，将四个元素分层放置，确保行列头和内容区可以独立控制滚动行为，同时固定黄框位置。
• 位置偏移：通过padding让绿框、红框、黑框避开黄框的区域，避免重叠。

内容的提问来源于stack exchange，提问作者Thomas San