Jetpack Compose：修复TextField列表随机删除元素失效问题

我需要实现Jetpack Compose中文本框（TextField）列表元素的正确删除功能，每个文本框右侧配有删除按钮。从底部开始删除元素可正常工作，但随机删除元素时功能失效，且要求使用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)
        )
    }
}

问题原因 #

用forEachIndexed渲染列表时，Compose无法正确跟踪每个列表项的身份——删除中间元素后，后续元素的索引会发生变化，但Compose会复用原有组件，导致删除按钮绑定的索引还是旧值，触发错误的删除操作。另外，Input组件里的text状态用remember初始化，列表项被复用后文本内容不会同步更新，引发显示异常。

解决方法 #

1. 给每个列表项添加唯一标识，用key函数帮助Compose识别组件身份，避免复用错误；
2. 修改Input组件的文本状态初始化逻辑，确保内容随数据源同步更新。

修改后的代码：

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 ->
            // 添加key标识每个列表项，避免组件复用错误
            key(index) {
                Input(word, 30, "Word", 1,
                    { newWord ->
                        listOfWords[index] = newWord
                        Log.d("text ", newWord)
                    },
                    {
                        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
) {
    // 用rememberUpdatedState跟踪最新的word值
    val currentWord = rememberUpdatedState(word)
    var text by remember { mutableStateOf(currentWord.value) }

    // 当数据源的word变化时，同步更新内部text状态
    LaunchedEffect(currentWord) {
        text = currentWord.value
    }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp, 0.dp, 8.dp, 0.dp)
    ) {
        OutlinedTextField(
            value = text,
            onValueChange = {
                if (it.length <= maxChar) {
                    text = it
                    onEdit(it)
                }
            },
            modifier = Modifier.fillMaxWidth(),
            label = { Text(label) },
            leadingIcon = {
                Icon(Icons.Default.Edit, contentDescription = "Edit")
            },
            trailingIcon = {
                IconButton(onClick = onRemove) {
                    Icon(
                        imageVector = Icons.Default.Clear,
                        contentDescription = "Remove"
                    )
                }
            },
            maxLines = maxLines
        )

        Text(
            text = "${text.length} / $maxChar",
            textAlign = TextAlign.End,
            style = MaterialTheme.typography.caption,
            modifier = Modifier
                .fillMaxWidth()
                .padding(end = 16.dp)
        )
    }
}

额外说明 #

如果列表元素有业务唯一ID（比如每个word对应的UUID），建议用该ID作为key，比索引更可靠，避免因列表顺序变化导致的组件复用问题。

内容的提问来源于stack exchange，提问作者AdamPI