如何让一个Text组件的宽度与另一个隐式测量的Text宽度相等

实现方案 #

你可以通过获取总页数Text的实际渲染宽度，动态赋值给当前页数Text，无需硬编码固定宽度，适配所有场景下的总页数长度、字号、字体配置：

Row(
    modifier = Modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    // 存储总页数Text的实际像素宽度
    var totalPageWidthPx by remember { mutableIntStateOf(0) }
    // 转换为dp单位用于设置宽度
    val totalPageWidthDp = with(LocalDensity.current) { totalPageWidthPx.toDp() }

    // 总页数Text
    Text(
        text = "1000", // 可替换为动态总页数变量
        textAlign = TextAlign.Center,
        onTextLayout = { layoutResult ->
            // 渲染完成后拿到实际宽度
            totalPageWidthPx = layoutResult.size.width
        },
        modifier = Modifier.padding(horizontal = 8.dp)
    )

    // 滑块组件，weight属性让它占满中间剩余空间
    Slider(
        modifier = Modifier.weight(1f),
        value = 1f,
        onValueChange = { /* 你的滑动逻辑 */ }
    )

    // 当前页数Text，直接复用总页数的宽度
    Text(
        text = "1", // 可替换为动态当前页变量
        textAlign = TextAlign.Center,
        modifier = Modifier
            .width(totalPageWidthDp)
            .padding(horizontal = 8.dp)
    )
}

方案优势 #

• 不需要硬编码固定宽度值，总页数变化时会自动适配新的宽度
• 自动适配不同字号、字体、系统字体放大设置的场景，不会出现文字裁切问题
• 两个Text都设置textAlign = TextAlign.Center可保证数字始终居中对齐，视觉效果统一

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