我正在尝试创建一个电话验证屏幕,用户必须在自己的文本字段中输入5个数字,如下所示:
![Verification text field](https://istack.dev59.com/uBkEX.webp)
我有两个问题:
- 是否有办法将TextField限制为1个字符。我可以设置单行和最大行数,但是不见得有限制字符长度的方法,就像从视图系统中的“Ms”一样。 我可以轻松地通过忽略第一个字符后面的字符来限制字符长度,但是即使只有1个字符,仍然可以让用户‘向左’和‘向右’滚动。
- 是否有办法将宽度包裹到1个字符?目前,我找到的唯一限制宽度的方法是具体设置宽度,但如果系统文本大小更改,则可能会出现问题。
这里是一些代码,希望有所帮助,这是一些非常混乱的解决方案,如果有错误请多包涵:
@Composable
fun CodeTextFields(
modifier: Modifier = Modifier,
length: Int = 5,
onFilled: (code: String) -> Unit
) {
var code: List<Char> by remember {
mutableStateOf(listOf())
}
val focusRequesters: List<FocusRequester> = remember {
val temp = mutableListOf<FocusRequester>()
repeat(length) {
temp.add(FocusRequester())
}
temp
}
Row(modifier = modifier) {
(0 until length).forEach { index ->
OutlinedTextField(
modifier = Modifier
.weight(1f)
.padding(vertical = 2.dp)
.focusRequester(focusRequesters[index]),
textStyle = MaterialTheme.typography.h4.copy(textAlign = TextAlign.Center),
singleLine = true,
value = code.getOrNull(index)?.takeIf { it.isDigit() }?.toString() ?: "",
onValueChange = { value: String ->
if (focusRequesters[index].freeFocus()) { //For some reason this fixes the issue of focusrequestor causing on value changed to call twice
val temp = code.toMutableList()
if (value == "") {
if (temp.size > index) {
temp.removeAt(index)
code = temp
focusRequesters.getOrNull(index - 1)?.requestFocus()
}
} else {
if (code.size > index) {
temp[index] = value.getOrNull(0) ?: ' '
} else if (value.getOrNull(0)?.isDigit() == true) {
temp.add(value.getOrNull(0) ?: ' ')
code = temp
focusRequesters.getOrNull(index + 1)?.requestFocus() ?: onFilled(
code.joinToString(separator = "")
)
}
}
}
},
keyboardOptions = KeyboardOptions.Default.copy(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Next
),
)
Spacer(modifier = Modifier.width(16.dp))
}
}
}