Jetpack Compose中如何让父Row在不同屏幕保持固定位置

问题核心是当前布局中文本区域高度随内容动态变化，导致下方的进度条Row位置被挤压偏移。要让Row位置固定，关键是让文本区域占据固定的可用空间，不再影响底部Row的布局位置。

修改方案 #

1. 让文本区域填充屏幕除底部Row外的剩余空间，通过weight(1f)实现
2. 给文本区域添加垂直滚动，避免长文本超出屏幕范围
3. 移除导致文本区域高度动态变化的修饰符

修改后的代码示例 #

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.material.ExperimentalMaterialApi
import androidx.compose.material.Text
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
import androidx.compose.foundation.rememberScrollState

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

    Column(modifier = Modifier.fillMaxSize().padding(top = 69.dp)) {
        // 文本区域：用weight(1f)填充剩余空间，添加滚动支持
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f) // 关键改动：让文本区域占据底部Row之外的所有空间
                .verticalScroll(scrollState) // 长文本时允许滚动
                .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 = "Please read the following 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)
            )
        }
  
        // 底部Row：位置不再受文本高度影响
        Row(modifier = Modifier
            .padding(top = 27.dp, start = 21.dp, end = 6.dp)
            .fillMaxWidth()) {
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFF686868))
                    .padding(top = 26.dp)
            ) {}
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {}
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {}
            Spacer(modifier = Modifier.width(5.dp))
            Row(
                modifier = Modifier
                    .width(77.dp)
                    .height(7.dp)
                    .background(color = Color(0xFFD9D9D9))
                    .padding(top = 26.dp)
            ) {}
        }
    }
}

关键改动说明 #

• weight(1f)：强制文本区域Column占据外层Column中除底部Row外的全部可用空间，无论文本长短，底部Row都会固定在文本区域下方，位置保持统一。
• verticalScroll(scrollState)：解决长文本超出屏幕的问题，允许用户滚动查看完整内容。
• 移除wrapContentHeight()：weight(1f)已经让文本区域填充指定空间，不需要再自适应内容高度。

将同样的修改应用到另外两个屏幕的代码中，即可保证三个屏幕的底部Row位置完全一致。

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