获取可组合项的宽度而不渲染它

Question

我想要一个显示星期几的文本可组合项，即星期一、星期二、星期三等...，其宽度固定为一周中最长的某一天的相同可组合项的宽度。

在英语中，它是“星期三”，因此所有可组合项的宽度应与“星期三”的可组合项的宽度相同。但我的应用程序支持本地化，所以我不能将宽度硬编码为星期三。

到目前为止我的代码：

@Composable
fun DayOfWeekText(date: LocalDate) {
    val longestDayOfWeek =
        DayOfWeek.entries.toTypedArray()
            .map { it.getDisplayName(TextStyle.FULL, Locale.getDefault()) }
            .maxBy { it.length }
    val density = LocalDensity.current
    var width by remember { mutableStateOf(0.dp) }
    Text(// I dont want this to be rendered
        modifier = Modifier.onGloballyPositioned { width = with(density) { it.size.width.toDp() } },
        text = longestDayOfWeek,
    )
    Text(
        modifier = Modifier.width(width),
        text = date.dayOfWeek.getDisplayName(TextStyle.FULL, Locale.getDefault()),
    )
}

上述解决方案有效，除了渲染我需要测量的文本

Answer 1

按照@onur-d的建议，我们可以使用 TextMeasurer() 来测量最长的一周中的一天文本而不渲染，然后使用其宽度作为文本可组合项。

val DayOfWeek.text
    get() = getDisplayName(TextStyle.FULL, Locale.getDefault())


@Composable
private fun DayOfWeekText(date: LocalDate) {
    val longestDayOfWeekText =
        DayOfWeek.entries
            .toTypedArray()
            .maxBy { it.text.length }
            .text
    val density = LocalDensity.current
    val textMeasurer = rememberTextMeasurer()
    val textStyle = MaterialTheme.typography.bodySmall.copy(
        color = MaterialTheme.colorScheme.onSurfaceVariant,
        textAlign = TextAlign.Center
    )
    val longestDayOfWeekTextWidth = remember(textMeasurer, textStyle, longestDayOfWeekText) {
        with(density) {
            textMeasurer.measure(
                text = longestDayOfWeekText,
                style = textStyle
            ).size.width.toDp()
        }
    }
    Text(
        modifier = Modifier.width(longestDayOfWeekTextWidth),
        text = date.dayOfWeek.text,
        style = textStyle
    )
}