Jetpack Compose 表格：如何根据最高单元格实现行高动态调整？

嘿，这个需求我太熟了！在Jetpack Compose里让表格行高自动适配行内最高的单元格，其实核心就是利用Compose自带的布局特性，不用复杂的自定义布局就能搞定。

核心思路 #

Compose的Row组件默认会以子项中高度最大的那个来确定自身的高度，所以我们只需要保证行内的每个单元格都能填充整个行的高度，就能实现所有单元格和最高单元格对齐，行高自动跟随最高内容调整。

基础示例代码 #

比如我们做一个三列的表格行，其中一列是长文本会换行，其他列是短内容：

@Composable
fun AutoHeightTableRow() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .border(1.dp, Color.Gray), // 给行加个边框方便看效果
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        // 短文本单元格
        Text(
            text = "基础信息",
            modifier = Modifier
                .weight(1f) // 均分列宽
                .padding(8.dp)
                .fillMaxHeight(), // 填充行的高度
            textAlign = TextAlign.Center
        )

        // 长文本单元格（会自动换行）
        Text(
            text = "这是一段超长的测试文本，当内容长度超过列宽时会自动换行成多行，我们需要让整个行的高度跟着这个单元格一起变大",
            modifier = Modifier
                .weight(2f) // 占比更大的列宽
                .padding(8.dp)
                .fillMaxHeight(),
            textAlign = TextAlign.Center
        )

        // 中等长度文本单元格
        Text(
            text = "操作",
            modifier = Modifier
                .weight(1f)
                .padding(8.dp)
                .fillMaxHeight(),
            textAlign = TextAlign.Center
        )
    }
}

复杂内容适配 #

如果单元格里是更复杂的内容（比如图片+文字的组合），同样的逻辑也适用，只要不给子项设置固定高度就行：

@Composable
fun ComplexCellTableRow() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .border(1.dp, Color.Gray),
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        // 带图片的复杂单元格
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(8.dp)
                .fillMaxHeight(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Image(
                painter = painterResource(id = R.drawable.ic_profile),
                contentDescription = "用户头像",
                modifier = Modifier.size(48.dp)
            )
            Spacer(modifier = Modifier.height(4.dp))
            Text(text = "用户头像")
        }

        // 长文本单元格
        Text(
            text = "这里是用户的详细介绍内容，可能包含多行文字，用来测试行高是否会自动适配最高的单元格",
            modifier = Modifier
                .weight(2f)
                .padding(8.dp)
                .fillMaxHeight(),
            textAlign = TextAlign.Center
        )

        // 按钮单元格
        Button(
            onClick = {},
            modifier = Modifier
                .weight(1f)
                .padding(8.dp)
                .fillMaxHeight(),
            contentPadding = PaddingValues(vertical = 4.dp)
        ) {
            Text(text = "查看详情")
        }
    }
}

注意事项 #

• 千万别给Row或者单元格设置固定的height或sizeIn(minHeight = ..., maxHeight = ...)这类限制，否则会打断自动高度计算。
• 如果要给单元格加背景色，把background()修饰符放在fillMaxHeight()之后，这样背景会填充整个单元格的高度。
• 如果是多行表格，用LazyColumn包裹所有Row，滚动时性能更好，每个Row依然会独立计算自身的行高。

备注：内容来源于stack exchange，提问作者Anshul Tyagi