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

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

With M3从1.1.0-alpha06你可以使用suffix属性：

    TextField(
        value = text,
        onValueChange = { text = it },
        suffix = { Text ("€") }
    )

Before M3 1.1.0-alpha06或与M2或者你可以使用visualTransformation属性。

就像是：

TextField(
    value = text,
    onValueChange = { text = it },
    singleLine = true,
    visualTransformation = SuffixTransformation(" €"),
)

class SuffixTransformation(val suffix: String) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {

        val result = text + AnnotatedString(suffix)

        val textWithSuffixMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                return offset
            }

            override fun transformedToOriginal(offset: Int): Int {
                if (text.isEmpty()) return 0
                if (offset >=  text.length) return text.length                    return offset
            }
        }

        return TransformedText(result, textWithSuffixMapping )
    }
}

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

就像是：

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