。
我希望我的代码能正确地从文本字段列表中删除元素。每个元素都有一个X按钮来删除它的文本字段。如果我从底部开始删除元素,它会工作,但它不工作,以删除随机元素****我想使用forEachIndexed显示列表请帮助我解决这个问题。我已经尝试这样做了一段时间,但每次尝试都不成功。
这是我写的一段代码,但是删除元素不能正常工作
val listOfWords = mutableStateListOf<String>()
@Composable
fun Main() {
Column(
modifier = Modifier
.fillMaxSize()
.verticalScroll(rememberScrollState()),
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(
text = "Words",
modifier = Modifier.padding(0.dp, 0.dp, 0.dp, 4.dp),
style = MaterialTheme.typography.h6
)
listOfWords.forEachIndexed { index, word ->
Input(word, 30, "Word", 1,
{newWord ->
listOfWords[index] = newWord
Log.d("text ",word)
},
{
listOfWords.removeAt(index)
}
)
}
IconButton(
onClick = {
listOfWords.add("")
}
) {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Add"
)
}
}
}
@Composable
fun Input(
word: String,
maxChar: Int,
label: String,
maxLines: Int,
onEdit: (word: String) -> (Unit),
onRemove: () -> (Unit)
) {
var text by remember { mutableStateOf(word) }
Column(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp, 0.dp, 8.dp, 0.dp)
) {
OutlinedTextField(
value = text,
onValueChange = {
if (it.length <= maxChar) text = it
onEdit(text)
},
modifier = Modifier.fillMaxWidth(),
label = { Text(label) },
leadingIcon = {
Icon(Icons.Default.Edit, null)
},
trailingIcon = {
IconButton(onClick = {
onRemove()
}) {
Icon(
imageVector = Icons.Default.Clear,
contentDescription = "Back"
)
}
},
maxLines = maxLines
)
Text(
text = "${text.length} / $maxChar",
textAlign = TextAlign.End,
style = MaterialTheme.typography.caption,
modifier = Modifier
.fillMaxWidth()
.padding(end = 16.dp)
)
}
}
2条答案
按热度按时间a2mppw5e1#
问题就在这里。
如果不向
Input's
remember
提供key
,则每次删除Input
时,compose将无法在Main's
re-composition
期间刷新/更新剩余的Input's
状态。对于
remember
到re-calculate
的每个合成通道(即,当您在TextField中添加/删除或键入值时),您可以将word
参数用作key
,并且您的代码可能会按预期工作。a1o7rhls2#
您是否尝试过执行以下操作?