如何在Jetpack Compose中使用TextField前缀国家代码

Question

我希望我的文本框以国家代码(+91)为前缀，且用户无法更改它。如何实现这一功能？

- Sparsh Dutta

---

两个并排的文本框，其中第一个不可编辑。 - Nikola Despotoski

如果您正在使用Android Material输入布局，则可以找到内置的前缀和后缀属性。 - unownsp

有关不可编辑的后缀，请参见此帖子。 - Mahozad

Answer 1

使用 M3 TextField ，从 1.1.0-alpha06 开始，你可以使用 prefix 属性：

    //androidx.compose.material3
    TextField( 
        value = text,
        onValueChange = { text = it },
        prefix = { Text ("+91") }
    )

在 M3 1.1.0-alpha06 之前或者使用 M2 版本，你可以使用 visualTransformation 属性进行如下操作:

例如：

TextField(
    value = text,
    onValueChange = { text = it},
    visualTransformation = PrefixTransformation("(+91)")
)

with:

class PrefixTransformation(val prefix: String) : VisualTransformation {    
    override fun filter(text: AnnotatedString): TransformedText {
        return PrefixFilter(text, prefix)
    }
}

fun PrefixFilter(number: AnnotatedString, prefix: String): TransformedText {

    var out = prefix + number.text
    val prefixOffset = prefix.length

    val numberOffsetTranslator = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            return offset + prefixOffset
        }

        override fun transformedToOriginal(offset: Int): Int {
            if (offset < prefixOffset) return 0
            return offset - prefixOffset
        }
    }

    return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}

- Gabriele Mariotti

---

如何使代码在用户点击文本框后才可见（带有淡入动画）？ - Sparsh Dutta

Answer 2

您可以在textField的leadingIcon参数中简单添加Text()。

OutlinedTextField(
    value = text,
    onValueChange = onTextChange,
    maxLines = 1,
    leadingIcon =
    {
        Text(
            text = prefixText,
            style = textStyle,
            color = Color.Black,
            modifier = Modifier.padding(start = 24.dp, end = 8.dp)
        )
    }
)

- Amr

---

如果没有动态更改leadingIcon内容的需要，这是一个非常好的解决方案。动态更改会由于leading icon的对齐而改变值和leadingIcon之间的空格。在这种情况下，它看起来很笨重。 - kotoMJ

Answer 3

除了Gabriele的答案，您还可以使用TextField的leadingIcon属性作为另一种选择。

TextField(
    value = text,
    onValueChange = { text = it},
    leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_pound_symbol),
                    contentDescription = null,
                    tint = colorResourceFromAttr(id = R.attr.colorOnSurface)
                )
            }
)

这将给你：

- MichaelStoddart