kotlin jetpack compose从文本字段列表中删除元素

omvjsjqw  于 2022-11-16  发布在  Kotlin
关注(0)|答案(2)|浏览(184)



我希望我的代码能正确地从文本字段列表中删除元素。每个元素都有一个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)
        )
    }
}
a2mppw5e

a2mppw5e1#

问题就在这里。

var text by remember { mutableStateOf(word) }

如果不向Input'sremember提供key,则每次删除Input时,compose将无法在Main'sre-composition期间刷新/更新剩余的Input's状态。
对于rememberre-calculate的每个合成通道(即,当您在TextField中添加/删除或键入值时),您可以将word参数用作key,并且您的代码可能会按预期工作。

var text by remember(word) { mutableStateOf(word) }
a1o7rhls

a1o7rhls2#

您是否尝试过执行以下操作?

listOfWords.forEachIndexed { index, word ->
    ... // rest of code
    {
        listOfWords.removeAt(index)
    }

相关问题