如何使LazyColumn内所有Row的LinearProgressIndicator宽度统一？

问题背景 #

我用LazyColumn实现了一个可滚动列表，每个列表项是包含LinearProgressIndicator和右对齐Text的Row组件。现在需要满足：

• 所有进度条宽度保持一致，且等于包含最长文本（"Text 2 with lot more content"）的列表项中进度条的宽度
• 进度条要尽可能占用最大宽度
• 不能硬编码进度条或文本的宽度，且已获取所有列表数据（无分页）

解决方案思路 #

因为数据已全量获取，我们可以提前计算所有文本的最大宽度，然后给每个列表项的Text组件设置固定宽度，这样进度条就能占据剩余的相同宽度，实现统一。具体步骤：

1. 用rememberTextMeasurer()测量所有文本的宽度，找出最大值
2. 给每个Text组件设置固定的最大宽度，确保文本区域宽度一致
3. 进度条通过weight(1F)占据Row的剩余空间，保证所有进度条宽度相同

修改后的完整代码 #

@Composable
fun LazyColumnProgress() {
    val data = listOf(
        Pair("Text 1", 0.30F),
        Pair("Text 1 with more", 0.25F),
        Pair("Text 2 with lot more content", 0.20F),
        Pair("Text 3", 0.14F),
        Pair("Text 4", 0.5F),
        Pair("Text 5", 0.3F),
        Pair("Text 6", 0.1F),
        Pair("Text 7", 0.1F),
        Pair("Text 8", 0.09F),
        Pair("Text 9", 0.01F),
    )

    val textMeasurer = rememberTextMeasurer()
    val textStyle = TextStyle(textAlign = TextAlign.End)
    
    // 计算所有文本的最大宽度，数据变化时重新计算
    val maxTextWidth = remember(data) {
        data.maxOf { item ->
            textMeasurer.measure(
                text = item.first,
                style = textStyle,
                constraints = Constraints(maxWidth = Int.MAX_VALUE)
            ).size.width.toDp()
        }
    }

    LazyColumn(modifier = Modifier.fillMaxWidth()) {
        items(data) { item ->
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .padding(8.dp)
                    .fillMaxWidth(),
            ) {
                LinearProgressIndicator(
                    progress = item.second,
                    strokeCap = StrokeCap.Round,
                    modifier = Modifier
                        .weight(1F)
                        .fillMaxWidth(),
                )
                Text(
                    text = item.first,
                    style = textStyle,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    modifier = Modifier
                        .padding(start = 8.dp)
                        .width(maxTextWidth)
                        .wrapContentWidth(align = Alignment.End),
                )
            }
        }
    }
}

关键代码说明 #

• 文本宽度预计算：通过rememberTextMeasurer()提前测量所有文本的宽度，避免绘制时动态测量的性能损耗和布局抖动
• 固定文本宽度：给每个Text设置width(maxTextWidth)，确保所有列表项的文本区域宽度一致，这样进度条的可用空间就完全相同
• 进度条自适应：进度条使用weight(1F)占据Row的剩余空间，保证在文本宽度固定的情况下，进度条宽度统一且最大化

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