Jetpack Compose：实现Row中首个Text最大占屏50%且自适应换行

需求说明 #

在Column中嵌套Row，包含两个Text组件，需满足：

• 第二个Text紧邻第一个Text右侧对齐
• 第一个Text内容过长时，最大宽度限制为屏幕的50%并自动换行
• 第二个Text同样设置最大宽度，避免超出屏幕边界

当前代码的问题 #

1. 未添加.weight(1f)时：第一个Text会优先占据自身所需宽度，若内容过长会挤压第二个Text，导致布局错乱
2. 添加.weight(1f)后：widthIn(max)设置失效，第一个Text会强制填充Row的剩余空间，超出屏幕50%的限制

修复后的代码 #

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun RowTest(firstText: String, secondText: String) {
    // 获取屏幕宽度，计算第一个Text的最大宽度为屏幕50%
    val screenWidth = LocalConfiguration.current.screenWidthDp.dp
    val firstTextMaxWidth = screenWidth * 0.5f
    // 计算第二个Text的最大宽度：屏幕剩余宽度减去第一个Text的最大宽度和间距
    val secondTextMaxWidth = screenWidth - firstTextMaxWidth - 6.dp

    Column(Modifier.fillMaxWidth()) {
        Row(Modifier.fillMaxWidth()) {
            // 第一个Text：限制最大宽度为屏幕50%，内容过长自动换行
            Text(
                text = firstText,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier
                    // weight(1f, fill=false)：让组件参与空间分配但不强制填充，保证widthIn生效
                    .weight(1f, fill = false)
                    .padding(end = 6.dp)
                    .widthIn(max = firstTextMaxWidth)
                    .background(Color.Yellow)
            )

            // 第二个Text：紧邻第一个Text右侧，限制最大宽度
            Text(
                text = secondText,
                style = MaterialTheme.typography.bodyMedium,
                color = Color.Cyan,
                modifier = Modifier
                    .align(Alignment.CenterVertically)
                    .widthIn(min = 100.dp, max = secondTextMaxWidth)
                    .background(Color.DarkGray)
            )
        }
    }
}

@Preview
@Composable
fun RowTestPreView() {
    RowTest(
        "firstText: ertergegergergerg erwewewe ===  eee 888 String",
        "secondText:  wewef w er we r we reee e eee 888 String"
    )
}

关键修改点说明 #

• 动态计算宽度：通过LocalConfiguration获取屏幕宽度，根据比例计算两个Text的最大宽度，适配不同设备
• weight参数调整：给第一个Text设置.weight(1f, fill = false)，fill=false是核心逻辑——它让组件仅在自身内容需要时占据分配的空间，不会强制填充，从而保证widthIn(max)的限制生效
• 第二个Text宽度约束：基于屏幕剩余宽度设置最大宽度，确保两个Text总宽度不会超出屏幕范围

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