android-studio - jetpack compose 从文本字段列表中删除元素

Question

.

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

Answer 1

问题就在这里

var text by remember { mutableStateOf(word) }

如果不向Input's提供key remember，compose 将无法刷新/更新您剩余的Input's每次 Input 被移除时，Main 的 re-composition 期间的状态。

您可以使用 word 参数作为 key remember 来重新计算 每次组合传递(即当您在 TextField 中添加/删除或键入一个值时)，您的代码应该可以按预期工作。

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