如何在 Jetpack Compose 中向 TextField 添加不可编辑的后缀（后缀）？

Question

如何添加后缀TextField以随用户输入文本流动（移动）？

Answer 1

从M3开始，1.1.0-alpha06您可以使用该suffix属性：

\n

    TextField(\n        value = text,\n        onValueChange = { text = it },\n        suffix = { Text ("\xe2\x82\xac") }\n    )\n

\n

\n

在M3 之前1.1.0-alpha06或与M2一起使用或者可以使用该visualTransformation属性。

\n

就像是：

\n

TextField(\n    value = text,\n    onValueChange = { text = it },\n    singleLine = true,\n    visualTransformation = SuffixTransformation(" \xe2\x82\xac"),\n)\n\nclass SuffixTransformation(val suffix: String) : VisualTransformation {\n    override fun filter(text: AnnotatedString): TransformedText {\n\n        val result = text + AnnotatedString(suffix)\n\n        val textWithSuffixMapping = object : OffsetMapping {\n            override fun originalToTransformed(offset: Int): Int {\n                return offset\n            }\n\n            override fun transformedToOriginal(offset: Int): Int {\n                if (text.isEmpty()) return 0\n                if (offset >=  text.length) return text.length                    return offset\n            }\n        }\n\n        return TransformedText(result, textWithSuffixMapping )\n    }\n}\n

\n

\n

如果您有占位符，则可以在属性中添加条件visualTransformation。

\n

就像是：

\n

TextField(\n    value = text,\n    onValueChange = { text = it },\n    singleLine = true,\n    visualTransformation = if (text.isEmpty())\n        VisualTransformation.None\n    else\n        SuffixTransformation(" \xe2\x82\xac"),\n    placeholder = { Text("Placeholder") }\n)\n

\n