Jetpack Compose中父Row包含的子Row无法显示问题排查

为啥会出这问题 #

1. 文本区域占满了整个屏幕：装文本的内层Column没限制高度，长文本直接撑满剩余空间，带weight(1f)的Spacer直接把底部的指示器Row挤出了可视范围
2. 指示器的padding加错地方了：每个底部指示器Row都加了padding(top=26.dp)，这会把指示器的背景条推到Row的底部，直接超出屏幕看不见

怎么改 #

1. 给文本区域的Column加weight(1f)，让它只占顶部padding和底部指示器之外的空间，再加上verticalScroll让长文本能滚动，避免撑爆布局
2. 把指示器的padding(top=26.dp)从每个子Row移到父Row上，统一控制指示器和上面文本的间距
3. 别用空Row当指示器，换成Spacer更规范（可选，但更符合Compose的用法）

修改后的完整代码 #

package com.example.speechrecognition.speechscreens

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectTransformGestures
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.verticalScroll
import androidx.compose.foundation.rememberScrollState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.navigation.NavController
import com.example.speechrecognition.Destinations
import kotlin.math.absoluteValue

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

    Column(modifier = Modifier
        .fillMaxSize()
        .padding(top = 69.dp)) {

        // 文本区域：加weight和滚动，避免占满屏幕
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f) // 只占剩余空间，不挤走底部指示器
                .verticalScroll(rememberScrollState()) // 长文本能滚动
                .padding(start = 21.dp, top = 13.dp, end = 25.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)
                ),
                modifier = Modifier
                    .height(28.dp)
                    .fillMaxWidth()
            )
            Text(
                text = "One morning Dorothy crossed the hall of the palace and knocked on the door of another girl named Trot. When told to enter, Dorothy found that Trot had company, an old sailor-man with a wooden leg who was sitting by the open window puffing smoke from a pipe.",
                style = TextStyle(
                    fontSize = 32.sp,
                    lineHeight = 40.sp,
                    fontFamily = FontFamily.SansSerif,
                    fontWeight = FontWeight(300),
                    color = Color(0xFF080808)
                ),
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(top = 9.dp, end = 25.dp)
            )
        }

        // 底部指示器区域：统一加padding，不用给每个子元素加
        Row(modifier = Modifier
            .fillMaxWidth()
            .padding(start = 21.dp, end = 6.dp, top = 26.dp, bottom = 20.dp)
        ) {
            // 用Spacer替代空Row，更合理
            Spacer(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFF686868))
            )
            Spacer(modifier = Modifier.width(5.dp))
            Spacer(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
            )
            Spacer(modifier = Modifier.width(5.dp))
            Spacer(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
            )
            Spacer(modifier = Modifier.width(5.dp))
            Spacer(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
            )
        }
    }
}

额外提一句 #

原代码里detectTransformGestures的lambda表达式末尾有个小语法错误（_ -应该是_ ->），已经一起修好了。

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