Jetpack Compose中Row高度过高：为何Text上下出现留白？

你的问题出在Row的高度计算逻辑和Text默认的内间距上：当前Row用IntrinsicSize.Min虽能让Box高度一致，但Text本身的默认行高、字体样式自带的上下间距，再加上多余padding，导致Row整体被撑高。以下是优化后的代码：

Row(
    horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.dimen_2dp)),
    modifier = Modifier
        .padding(dimensionResource(id = R.dimen.dimen_2dp))
        .fillMaxWidth()
        .wrapContentHeight() // 让Row高度自适应内容
) {
    // 提取公共样式减少重复代码
    val boxModifier = Modifier
        .background(MaterialTheme.colorScheme.tertiaryContainer)
        .wrapContentHeight() // Box高度由内部Text决定
        .align(Alignment.CenterVertically) // 确保三个Box垂直对齐

    Box(
        modifier = boxModifier
            .padding(end = dimensionResource(id = R.dimen.dimen_2dp))
            .fillMaxWidth(0.2f)
    ) {
        Text(
            text = "aaa / bbb / ccc",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .padding(horizontal = dimensionResource(id = R.dimen.dimen_2dp)) // 只保留水平padding
                .align(Alignment.Center),
            style = MaterialTheme.typography.titleLarge.copy(
                lineHeight = TextStyle.Default.lineHeight // 取消titleLarge默认的超大行高
            ),
            color = MaterialTheme.colorScheme.tertiary
        )
    }

    Box(
        modifier = boxModifier
            .padding(end = dimensionResource(id = R.dimen.dimen_2dp))
            .fillMaxWidth(0.5f)
    ) {
        Text(
            text = "aaa",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .padding(horizontal = dimensionResource(id = R.dimen.dimen_2dp))
                .align(Alignment.Center),
            style = MaterialTheme.typography.titleLarge.copy(
                lineHeight = TextStyle.Default.lineHeight
            ),
            color = MaterialTheme.colorScheme.tertiary
        )
    }

    Box(
        modifier = boxModifier
            .fillMaxWidth()
    ) {
        Text(
            text = "bbb",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .padding(horizontal = dimensionResource(id = R.dimen.dimen_2dp))
                .align(Alignment.Center),
            style = MaterialTheme.typography.titleLarge.copy(
                lineHeight = TextStyle.Default.lineHeight
            ),
            color = MaterialTheme.colorScheme.tertiary
        )
    }
}

关键修改点说明： #

• 移除Row的.height(IntrinsicSize.Min)，改用.wrapContentHeight()，让Row高度完全由内部内容决定，避免强制拉伸。
• Box改用.wrapContentHeight()，并通过.align(Alignment.CenterVertically)保证三个Box垂直对齐，高度匹配最高的Text。
• 调整Text的padding为仅水平方向，移除不必要的垂直padding；同时修改titleLarge的lineHeight，取消Material Design默认的超大行高，减少Text上下空白。

如果需要严格保证Box高度完全一致（即使Text高度有差异），可以保留Row的.height(IntrinsicSize.Min)，同时Box用.fillMaxHeight()，但必须调整Text的lineHeight和padding：

Row(
    horizontalArrangement = Arrangement.spacedBy(dimensionResource(id = R.dimen.dimen_2dp)),
    modifier = Modifier
        .height(IntrinsicSize.Min) // 保留这个让Box高度一致
        .padding(dimensionResource(id = R.dimen.dimen_2dp))
        .fillMaxWidth()
) {
    Box(
        modifier = Modifier
            .padding(end = dimensionResource(id = R.dimen.dimen_2dp))
            .background(MaterialTheme.colorScheme.tertiaryContainer)
            .fillMaxWidth(0.2f)
            .fillMaxHeight()
    ) {
        Text(
            text = "aaa / bbb / ccc",
            textAlign = TextAlign.Center,
            modifier = Modifier
                .padding(horizontal = dimensionResource(id = R.dimen.dimen_2dp))
                .align(Alignment.Center),
            style = MaterialTheme.typography.titleLarge.copy(
                lineHeight = TextUnit.Unspecified, // 自动匹配字体高度
                padding = PaddingValues(vertical = 0.dp)
            ),
            color = MaterialTheme.colorScheme.tertiary
        )
    }
    // 其余两个Box同理修改Text的style
}

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