Jetpack Compose中Row组显示在Column上方的问题排查

你的进度条显示在文本上方，核心原因有两个：

• 你用Box作为父容器，Box是叠层布局，且进度条Row的padding(top=27.dp)让它处于屏幕顶部区域，而文本所在Column的padding(top=100.dp)在更靠下的位置，视觉上自然呈现进度条在上、文本在下的效果。
• 你要实现的是垂直顺序排列（文本在上，进度条在下），用Column的垂直线性布局才是合理选择，而非Box的叠层布局逻辑。

修复方案（推荐） #

把进度条Row移到文本所在的Column内部，作为Column的第三个子元素，利用Column的垂直排列特性自动让进度条处于文本下方：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SpeechScreen1(navController: NavController) {
    var offsetX by remember { mutableStateOf(0f) }
    val swipeThreshold = 200 // 按需调整滑动阈值

    Box(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight()
                .padding(21.dp, top = 100.dp)
                .pointerInput(Unit) {
                    detectTransformGestures { _, offset, _, _ ->
                        offsetX += offset.x
                        if (offsetX.absoluteValue >= swipeThreshold) {
                            if (offsetX > 0) {
                                navController.navigate(Destinations.speechscreen2)
                            }
                            offsetX = 0f
                        }
                    }
                }
        ) {
            Text(
                text = "请阅读以下文本：",
                style = TextStyle(
                    fontSize = 20.sp,
                    lineHeight = 28.sp,
                    fontFamily = FontFamily.Serif,
                    fontWeight = FontWeight(400),
                    color = Color(0xFF000000)
                )
            )
            Text(
                text = "一天早晨，多萝西穿过宫殿的大厅，敲了敲另一个名叫特洛特的女孩的门。当被告知可以进去时，多萝西发现特洛特有客人——一个装着木腿的老水手，他正坐在敞开的窗边，抽着烟斗吐烟圈。",
                style = TextStyle(
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    fontFamily = FontFamily.SansSerif,
                    fontWeight = FontWeight(300),
                    color = Color(0xFF080808)
                ),
                modifier = Modifier
                    .width(334.dp)
                    .wrapContentHeight()
                    .padding(top = 9.dp)
            )
            // 进度条Row移至此处，作为Column的子元素
            Row(
                modifier = Modifier
                    .padding(top = 30.dp) // 按需调整与上方文本的间距
                    .padding(start = 0.dp, end = 6.dp)
                    .fillMaxWidth()
            ) {
                Row(
                    modifier = Modifier
                        .width(77.dp)
                        .height(7.dp)
                        .background(color = Color(0xFF686868))
                ) {}
                Spacer(modifier = Modifier.width(5.dp))
                Row(
                    modifier = Modifier
                        .width(77.dp)
                        .height(7.dp)
                        .background(color = Color(0xFFD9D9D9))
                ) {}
                Spacer(modifier = Modifier.width(5.dp))
                Row(
                    modifier = Modifier
                        .width(77.dp)
                        .height(7.dp)
                        .background(color = Color(0xFFD9D9D9))
                ) {}
                Spacer(modifier = Modifier.width(5.dp))
                Row(
                    modifier = Modifier
                        .width(77.dp)
                        .height(7.dp)
                        .background(color = Color(0xFFD9D9D9))
                ) {}
            }
        }
    }
}

关键改动说明 #

1. 将进度条Row从Box的直接子元素移至Column内部，利用Column的垂直布局逻辑自动实现文本在上、进度条在下的顺序。
2. 移除了进度条内部每个小Row的padding(top=26.dp)，避免进度条自身偏移导致显示异常。
3. 调整进度条Row的padding参数，让它与上方文本保持合理间距。

备选方案（若需保留Box布局） #

如果必须用Box，可以通过对齐修饰符和手动调整padding让进度条定位到文本下方：

Row(modifier = Modifier
    .align(Alignment.TopStart)
    .padding(top = 400.dp) // 手动设置top padding到文本下方位置，需按需调整
    .padding(start = 21.dp, end = 6.dp)
    .fillMaxWidth()) {
    // 进度条内部元素不变
}

这种方式需要手动计算间距，灵活性和可靠性不如方案一。

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