Jetpack Compose - 文本字段省略号

Question

我正在尝试在 Jetpack Compose 中创建单行文本输入。

由于此输入的固定宽度应为 200.dp 并且只有一行，因此较长的文本将被截断。有时，被剪切的文本看起来甚至不存在，因为剪切是在两个字母之间进行的。为了向用户显示已经输入了“更多”文本，我更喜欢省略号（例如，这是一个示例输入...）效果。

我尝试使用默认的 TextField 和 BasicTextField 可组合项，但似乎没有简单的解决方案。

有没有办法在 Jetpack Compose 中创建这种省略号效果？

Answer 1

尽管 Brian Ngure 提供的解决方案不起作用，因为错误的偏移会触发崩溃。我用他的想法创建了一个可行的（至少对我来说：D）。

VisualTransformation { text ->
TransformedText(buildAnnotatedString {
    if (maxSymbols < 3) {
        append(text)
    } else {
        append(text.take(maxSymbols - 3))
        append("...")
    }

}, object : OffsetMapping {
    override fun originalToTransformed(offset: Int): Int {
        return if (maxSymbols < 3) text.length else maxSymbols
    }

    override fun transformedToOriginal(offset: Int): Int {
        return text.length
    }
})

其中 3 == "...".length

为了使其工作，您必须获得可以在屏幕上绘制的 ma​​xSymbols 。
您可以在 TextField 的 onTextLayout 回调中执行此操作
有现成的变量 didOverflowWidth、didOverflowHeight、hasVisualOverflow

        onTextLayout = { result ->
        isTextOverflow = result.didOverflowWidth
    },

如果这不起作用，您可以获取有关当前文本字段宽度 result.size.width 的信息，并将其与 LocalContext 中的屏幕宽度进行比较.current.resources.displayMetrics.widthPixels 你可以了解何时出现溢出。由于某种原因，专用变量对我不起作用。

当发生溢出时，只需使用另一个变量来记住 maxSymbols

并将此转换应用于 TextField 和装饰框（如果您使用的话）。

var isTextOverflow by remember { mutableStateOf(false) }
var maxSymbols: Int = remember(isTextOverflow) { if (isTextOverflow) text.text.length else 0 }

此外，您可能需要重新创建转换，因为不同的符号具有不同的宽度，并且不同的文本宽度可能不同，但过于频繁地重新创建转换可能会降低性能。

更新：
您可能还会发现有用的 TextMeasurer 对象，如果您的文本字段不是屏幕宽，它允许您将文本字段宽度与文本宽度进行比较

    val textMeasurer = rememberTextMeasurer()
    val measuredTextWidth = textMeasurer.measure(
    text = text,
    style = textStyle
)

Answer 2

我意识到这已经很老了，但我也面临着同样的困境。这是我的解决方案。

@Composable
fun ellipsisVisualTransformation() = VisualTransformation { text ->
    val ellipsis = "..."
    val maxLength = 20 // Set your desired max length

    if (text.length <= maxLength) {
        TransformedText(text = text, offsetMapping = OffsetMapping.Identity)
    } else {
        TransformedText(
            AnnotatedString.Builder().apply {
                append(text.take(maxLength - ellipsis.length))
                append(ellipsis)
            }.toAnnotatedString(),
            OffsetMapping.Identity
        )
    }
}

在我的 OutlinedTextField 中，我添加了以下内容：

visualTransformation = ellipsisVisualTransformation()