如何使用 Jetpack Compose 在文本字段中添加国家代码前缀答案

【问题标题】：How to prefix country code in Textfield using Jetpack Compose如何使用 Jetpack Compose 在文本字段中添加国家代码前缀
【发布时间】：2021-05-28 08:11:58
【问题描述】：

我希望我的文本字段以国家/地区代码 (+91) 为前缀，用户无法更改该代码。我如何做到这一点？

【问题讨论】：

两个并排的文本字段，其中第一个不可编辑。
如果您使用的是android材质输入布局，那么您可以找到内置的前缀和后缀属性

标签： android textfield android-jetpack-compose

【解决方案1】：

您可以使用 visualTransformation 属性：

类似：

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

与：

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-1) return prefixOffset
            return offset - prefixOffset
        }
    }

    return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}

【讨论】：

如何让代码只有在用户点击文本框后才可见（带有淡入淡出动画）？

【解决方案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)
        )
    }
)

【讨论】：

【解决方案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)
                )
            }
)

这给了你这个：

【讨论】：