Jetpack Compose：如何测量列表中金额文本的最大宽度并应用？

有两种常用的方式可以实现这个需求，下面分别说明：

方法一：用TextMeasurer预计算最大宽度 #

借助Compose提供的TextMeasurer，可以提前计算所有amount文本的宽度，然后把最大宽度应用到每个对应的Text组件上。这种方式简单直接，适合已知所有数据的场景：

@Composable
fun MyColumn(items: List<Item>) {
    // 获取当前上下文的TextMeasurer
    val textMeasurer = rememberTextMeasurer()
    // 定义与实际Text一致的文本样式（如果有自定义样式，这里要同步）
    val textStyle = LocalTextStyle.current
    // 计算所有amount文本的最大宽度
    val maxAmountWidth = remember(items) {
        items.maxOfOrNull { item ->
            textMeasurer.measure(
                text = item.amount,
                style = textStyle
            ).size.width
        } ?: 0
    }
    // 转成Dp单位
    val maxWidthDp = with(LocalDensity.current) { maxAmountWidth.toDp() }

    LazyColumn {
        items(items) {
            Row(modifier = Modifier.fillMaxWidth()) {
                Text(text = it.title, modifier = Modifier.weight(1f))
                Text(
                    text = it.amount,
                    modifier = Modifier.background(Color.Red).width(maxWidthDp),
                    style = textStyle // 确保样式和测量时一致
                )
            }
        }
    }
}

class Item(val title: String, val amount: String)

方法二：通过自定义Layout统一测量 #

如果需要更灵活的布局控制，或者担心预计算的样式不一致，可以用自定义Layout组件来统一测量所有amount文本的宽度，再应用到每个行项中：

@Composable
fun MyColumn(items: List<Item>) {
    val textStyle = LocalTextStyle.current
    // 用自定义Layout先测量所有amount的宽度
    Layout(
        content = {
            items.forEach {
                Text(text = it.amount, style = textStyle)
            }
        }
    ) { measurables, constraints ->
        // 测量所有amount文本，获取最大宽度
        val placeables = measurables.map { it.measure(constraints) }
        val maxAmountWidth = placeables.maxOfOrNull { it.width } ?: 0
        val maxWidthDp = with(LocalDensity.current) { maxAmountWidth.toDp() }

        // 自定义Layout不需要绘制，只是用来测量，所以设置尺寸为0
        layout(0, 0) {}

        // 用CompositionLocal传递最大宽度给子组件
        CompositionLocalProvider(LocalMaxAmountWidth provides maxWidthDp) {
            LazyColumn {
                items(items) {
                    Row(modifier = Modifier.fillMaxWidth()) {
                        Text(text = it.title, modifier = Modifier.weight(1f))
                        Text(
                            text = it.amount,
                            modifier = Modifier.background(Color.Red).width(LocalMaxAmountWidth.current),
                            style = textStyle
                        )
                    }
                }
            }
        }
    }
}

// 定义CompositionLocal来传递最大宽度
val LocalMaxAmountWidth = staticCompositionLocalOf { 0.dp }

class Item(val title: String, val amount: String)

注意事项 #

• 必须保证测量时的文本样式和实际显示的样式完全一致，包括字体、字号、字重、行高等，否则计算出的宽度会不准确。
• 如果items列表是动态变化的，要确保remember的key包含items，这样数据更新时会重新计算最大宽度。

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