动态缩短文本以避免 Jetpack Compose 中的省略号

Question

我希望在 Jetpack Compose 中实现一个类似日历的应用程序，包括一个日期详细信息屏幕。此屏幕有一个 TopAppBar，我想在其中显示日期 Friday, March 12th 2022

但是，我定位的某些屏幕尺寸无法完全显示，因此我想在必要时逐渐缩短文本：

Friday, March 12th 2022
Fr. March 12th 2022
Fr. March 12th '22
Fr. March 12th
March 12th

我怎样才能做到这一点？我已经知道文本 onTextLayout: (TextLayoutResult) → Unit，但是我似乎无法从那里更改文本？

请注意：

目前，该应用程序只有德语，我试图“翻译”这个问题的日期格式，所以如果我使用了不常见的格式，请原谅。
使用传统的 xml-views 有一些类似的问题，但我正在寻找一个组合解决方案

Answer 1

当您需要根据其他内容大小显示不同的内容时，可以使用SubcomposeLayout：它允许测量内容而无需等待显示和绘制视图。

这是一个基本示例，说明它如何解决您的问题：

@Composable
fun Component(modifier: Modifier) {
    val items = listOf(
        "Friday, March 12th 2022",
        "Fr. March 12th 2022",
        "Fr. March 12th '22",
        "Fr. March 12th",
        "March 12th",
    )
    SubcomposeLayout(modifier) { constraints ->
        val noWidthLimitConstraints = constraints.copy(maxWidth = Int.MAX_VALUE)
        var i = 0
        var placeable: Placeable
        do {
            placeable = subcompose(i) {
                Text(items[i])
            }[0].measure(
                if (i < items.indices.last) {
                    noWidthLimitConstraints
                } else {
                    constraints
                }
            )
        } while (placeable.width > constraints.maxWidth && items.indices.contains(++i))
        layout(placeable.width, placeable.height) {
            placeable.place(0, 0)
        }
    }
}

要测试的代码：

var width by remember { mutableStateOf(1f) }
Component(Modifier.padding(100.dp).fillMaxWidth(width))
Slider(width, { width = it })

动态缩短文本以避免 Jetpack Compose 中的省略号

Dynamically shorten text to avoid ellipsizes in jetpack compose

android

text

android-jetpack-compose