英文:
Jetpack compose otp Textfeild decorationbox last cell becomes smaller
问题
我面临一个问题，就是在某些设备上，最后一个单元格会变小，就像在图片中一样。由于空间不足，最后一个单元格的宽度变小
以下是Jetpack Compose的代码：
Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
BasicTextField(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
value = TextFieldValue(otpText, selection = TextRange(otpText.length)),
onValueChange = {
onOtpTextChange(it.text)
},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
decorationBox = { innerTextField ->
Row(horizontalArrangement = Arrangement.Center) {
repeat(otpCount) { index ->
CharView(
index = index,
text = otpText,
isError = isError,
)
Spacer(modifier = Modifier.width(8.dp))
}
}
},
)
}
@Composable
private fun CharView(
index: Int,
text: String,
isError: Boolean
) {
val isFocused = text.length == index
val char = when {
index >= text.length -> ""
else -> text[index].toString()
}
Text(
modifier = Modifier
.width(50.dp)
.height(60.dp)
.clip(MaterialTheme.shapes.large)
.border(
1.dp, when {
isFocused -> Orange
else -> Gray
}, RoundedCornerShape(4.dp)
)
.padding(top = 10.dp),
text = char,
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 28.sp,
letterSpacing = 0.sp,
color = Color.Black
),
color = Color.Black,
textAlign = TextAlign.Center
)
}
<details>
<summary>英文:</summary>
I am facing an issue where the last cell becomes small in certain devices like in the image.The last cell becomes smaller in width cause of lack of space
[![enter image description here][1]][1]
The jetpack compose code below
Column(modifier = modifier, horizontalAlignment = Alignment.CenterHorizontally) {
BasicTextField(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(),
value = TextFieldValue(otpText, selection = TextRange(otpText.length)),
onValueChange = {
onOtpTextChange(it.text)
},
keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.NumberPassword),
decorationBox = { innerTextField ->
Row(horizontalArrangement = Arrangement.Center) {
repeat(otpCount) { index ->
CharView(
index = index,
text = otpText,
isError = isError,
)
Spacer(modifier = Modifier.width(8.dp))
}
}
},
)
@Composable
private fun CharView(
index: Int,
text: String,
isError: Boolean
) {
val isFocused = text.length == index
val char = when {
index >= text.length -> ""
else -> text[index].toString()
}
Text(
modifier = Modifier
.width(50.dp)
.height(60.dp)
.clip(MaterialTheme.shapes.large)
.border(
1.dp, when {
isFocused -> Orange
else -> Gray
}, RoundedCornerShape(4.dp)
)
.padding(top = 10.dp),
text = char,
style = TextStyle(
fontWeight = FontWeight.Bold,
fontSize = 28.sp,
letterSpacing = 0.sp,
color = Color.Black
),
color = Color.Black,
textAlign = TextAlign.Center
)
}
[1]: https://i.stack.imgur.com/GL24W.png
</details>
# 答案1
**得分**: 1
**主要功能**
```kotlin
@Composable
fun OTPTextField(
value: String,
length: Int,
modifier: Modifier = Modifier,
boxWidth: Dp = 50.dp,
boxHeight: Dp = 50.dp,
enabled: Boolean = true,
keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
keyboardActions: KeyboardActions = KeyboardActions(),
onValueChange: (String) -> Unit,
) {
val spaceBetweenBoxes = 8.dp
BasicTextField(modifier = modifier
.fillMaxWidth(),
value = value,
singleLine = true,
onValueChange = {
if (it.length <= length) {
onValueChange(it)
}
},
enabled = enabled,
keyboardOptions = keyboardOptions,
keyboardActions = keyboardActions,
decorationBox = {
Row(
Modifier
.size(width = (boxWidth + spaceBetweenBoxes) * length, height = boxHeight),
horizontalArrangement = Arrangement.SpaceEvenly,
) {
repeat(length) { index ->
val colorr =
if (index == value.length) LocalCustomColorsPalette.current.OtpBorderSelectedColorColor else LocalCustomColorsPalette.current.OtpBorderUnSelectedColorColor
Box(
modifier = Modifier
.size(boxWidth, boxHeight)
.border(
1.dp,
color = colorr,
shape = RoundedCornerShape(12.dp)
),
contentAlignment = Alignment.Center
) {
Text(
text = value.getOrNull(index)?.toString() ?: "",
textAlign = TextAlign.Center,
style = MaterialTheme.typography.h6,
color = LocalCustomColorsPalette.current.textColor
)
}
}
}
})
}
调用函数
var text by remember {
mutableStateOf("")
}
OTPTextField(
text,
4,
modifier = Modifier
.fillMaxWidth()
.align(CenterHorizontally)
) {
text = it
if (text.length == 4) {
focusManager.clearFocus()
}
}
尝试这个方法来解决你的错误。
英文:
Main Function
@Composable
fun OTPTextField(
value: String,
length: Int,
modifier: Modifier = Modifier,
boxWidth: Dp = 50.dp,
boxHeight: Dp = 50.dp,
enabled: Boolean = true,
keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
keyboardActions: KeyboardActions = KeyboardActions(),
onValueChange: (String) -> Unit,
) {
val spaceBetweenBoxes = 8.dp
BasicTextField(modifier = modifier
.fillMaxWidth(),
value = value,
singleLine = true,
onValueChange = {
if (it.length <= length) {
onValueChange(it)
}
},
enabled = enabled,
keyboardOptions = keyboardOptions,
keyboardActions = keyboardActions,
decorationBox = {
Row(
Modifier
.size(width = (boxWidth + spaceBetweenBoxes) * length, height = boxHeight),
horizontalArrangement = Arrangement.SpaceEvenly,
) {
repeat(length) { index ->
val colorr =
if (index == value.length) LocalCustomColorsPalette.current.OtpBorderSelectedColorColor else LocalCustomColorsPalette.current.OtpBorderUnSelectedColorColor
Box(
modifier = Modifier
.size(boxWidth, boxHeight)
.border(
1.dp,
color = colorr,
shape = RoundedCornerShape(12.dp)
),
contentAlignment = Alignment.Center
) {
Text(
text = value.getOrNull(index)?.toString() ?: "",
textAlign = TextAlign.Center,
style = MaterialTheme.typography.h6,
color = LocalCustomColorsPalette.current.textColor
)
}
}
}
})
}
Function Calling
var text by remember {
mutableStateOf("")
}
OTPTextField(
text,
4,
modifier = Modifier
.fillMaxWidth()
.align(CenterHorizontally)
) {
text = it
if (text.length == 4) {
focusManager.clearFocus()
}
}
Try this one help to resolve your error.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论