Jetpack Compose中如何实现占满整高的分隔线？

在动态数据表格中添加分隔线时，若表格项包含长文本，分隔线无法占满行的完整高度。当前实现代码如下：

Row {
    for (columnNumber in columnInfo.indices) {
        Column(
            modifier = Modifier
                .wrapContentHeight()
                .background(Color.White),
            verticalArrangement = Arrangement.Center,
        ) {
            Row(
                Modifier
                    .height(IntrinsicSize.Min)
                    .wrapContentWidth()
                    .background(Color.White),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = cellViewModel(columnNumber, rowNumber).formattedDisplayText,
                    modifier = Modifier
                        .width(columnInfo[columnNumber].width)
                        .padding(top = 2.dp, bottom = 1.dp, start = 10.dp),
                    fontFamily = fonts,
                    textAlign = TextAlign.Start,
                    color = Color.Black
                )

                Divider(
                    color = Color.Red,
                    modifier = Modifier
                        .fillMaxHeight()
                        .width(1.dp)
                )
            }
        }
    }
}

实际效果中分隔线无法占满整行高度，请问如何解决？

解决方法 #

问题根源在于嵌套布局的约束限制了分隔线的高度，调整以下几点即可修复：

1. 移除内层Row的verticalAlignment = Alignment.CenterVertically
   该属性会让Row内的Text和Divider垂直居中，当Text因长文本换行后，Divider只会匹配居中后的文本高度，无法撑满整个行高。

2. 调整内层Row的高度规则
   将height(IntrinsicSize.Min)替换为height(IntrinsicSize.Max)，确保Row的高度能适配文本换行后的最大高度；或者直接用fillMaxHeight()让Row填充外层Column的高度。

3. 避免最后一列添加分隔线
   循环中判断当前列是否为最后一列，否则再添加分隔线，避免表格右侧多出不必要的线条。

修改后的代码示例：

Row {
    for (columnNumber in columnInfo.indices) {
        Column(
            modifier = Modifier
                .wrapContentHeight()
                .background(Color.White),
        ) {
            Row(
                Modifier
                    .height(IntrinsicSize.Max)
                    .wrapContentWidth()
                    .background(Color.White),
            ) {
                Text(
                    text = cellViewModel(columnNumber, rowNumber).formattedDisplayText,
                    modifier = Modifier
                        .width(columnInfo[columnNumber].width)
                        .padding(top = 2.dp, bottom = 1.dp, start = 10.dp),
                    fontFamily = fonts,
                    textAlign = TextAlign.Start,
                    color = Color.Black
                )

                // 仅给非最后一列添加分隔线
                if (columnNumber != columnInfo.lastIndex) {
                    Divider(
                        color = Color.Red,
                        modifier = Modifier
                            .fillMaxHeight()
                            .width(1.dp)
                    )
                }
            }
        }
    }
}

如果希望分隔线独立于文本行布局，也可以将Divider移到外层Column中，作为Row的同级元素，这样它能直接获取Column的完整高度：

Row {
    for (columnNumber in columnInfo.indices) {
        Column(
            modifier = Modifier
                .wrapContentHeight()
                .background(Color.White),
        ) {
            Row(
                Modifier
                    .wrapContentWidth()
                    .background(Color.White),
            ) {
                Text(
                    text = cellViewModel(columnNumber, rowNumber).formattedDisplayText,
                    modifier = Modifier
                        .width(columnInfo[columnNumber].width)
                        .padding(top = 2.dp, bottom = 1.dp, start = 10.dp),
                    fontFamily = fonts,
                    textAlign = TextAlign.Start,
                    color = Color.Black
                )
            }
            // 分隔线作为Column的子元素，撑满整列高度
            if (columnNumber != columnInfo.lastIndex) {
                Divider(
                    color = Color.Red,
                    modifier = Modifier
                        .fillMaxHeight()
                        .width(1.dp)
                        .align(Alignment.CenterStart)
                )
            }
        }
    }
}

核心逻辑是让分隔线所在的布局能获取到行的完整高度，同时取消垂直居中对分隔线的高度限制，这样就能让分隔线占满整行高度。

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