如何解决Jetpack 撰写单个数字文本字段
我正在尝试创建一个电话验证屏幕,其中用户必须在自己的文本字段中分别输入 5 个数字,如下所示。
我有两个问题:
- 有没有办法将 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))
}
}
}
解决方法
要限制为 1 个数字,您可以使用以下内容:
@Composable
fun Field (modifier: Modifier = Modifier,onValueChange: (String,String) -> String = { _,new -> new }){
val state = rememberSaveable { mutableStateOf("") }
OutlinedTextField(
modifier = modifier.requiredWidth(75.dp),singleLine = true,value = state.value,onValueChange = {
val value = onValueChange(state.value,it)
state.value = value
},keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,imeAction = ImeAction.Next),)
}
然后使用:
Field(onValueChange = { old,new ->
if (new.length > 1 || new.any { !it.isDigit() }) old else new
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。