如何避免LazyColumn项交换后出现索引重复问题

在LazyColumn中实现列表项交换机制时，使用itemsIndexed出现索引重复问题：交换第一项和第二项后，两者的索引都会变为0，推测是LazyColumn的组件复用特性导致的。

原实现代码 #

@Composable
fun Screen(modifier:Modifier = Modifier) {
    val itemList = remember { mutableStateListOf("Item 1", "Item 2", "Item 3", "Item 4") }
    val context = LocalContext.current

    LazyColumn(modifier = modifier) {
        itemsIndexed(itemList, key = { _, text -> text }) { index, text ->
            Card(
                modifier = Modifier
                    .pointerInput(Unit) {
                        detectTapGestures(
                            onTap = {
                                Toast.makeText(context, "" + index, Toast.LENGTH_SHORT).show()
                            },
                            onDoubleTap = {
                                Collections.swap(itemList, index, index + 1)
                            }
                        )
                    }
                    .padding(8.dp)
                    .fillMaxWidth()
                    .animateItem()
            ) {
                Row(
                    modifier =  Modifier.padding(16.dp).fillMaxSize()
                ) {
                    Text("$index. $text")
                }
            }
        }
    }
}

测试情况 #

• 初始状态：点击第一项，Toast显示0；点击第二项，Toast显示1
• 交换后：双击第一项/第二项完成交换，再次点击这两项，Toast均显示0，但Text组件显示的索引是正确的

尝试的低效方案 #

曾尝试在itemsIndexed内部声明状态变量保存索引，但会引发多次重组，效率低下：

@Composable
fun Screen(modifier:Modifier = Modifier) {
    ...
    LazyColumn(modifier = modifier) {
        itemsIndexed(...) { i/*index改为i*/, text ->
            // 新的索引声明
            var index by remember { mutableIntStateOf(i) }

            Card(...) {
                Row(
                    modifier =  Modifier.padding(16.dp).fillMaxSize()
                ) {
                    index = i // 在此重新赋值
                    Text("$index. $text")
                }
            }
        }
    }
}

有效解决方法 #

问题根源在于pointerInput以Unit为键，不会在索引变化时重新创建手势检测器，导致内部捕获的始终是重组前的旧index值。

方案1：将index作为pointerInput的键 #

修改pointerInput的参数为index，索引变化时会重新创建手势检测器，捕获最新的索引值：

.pointerInput(index) { // 将Unit替换为index
    detectTapGestures(
        onTap = {
            Toast.makeText(context, "" + index, Toast.LENGTH_SHORT).show()
        },
        onDoubleTap = {
            if (index < itemList.size - 1) {
                Collections.swap(itemList, index, index + 1)
            }
        }
    )
}

方案2：通过列表获取真实索引（无重复项场景） #

如果列表项无重复文本，可直接通过itemList.indexOf(text)获取当前项的真实索引，避免依赖lambda参数的index：

onTap = {
    val realIndex = itemList.indexOf(text)
    Toast.makeText(context, "" + realIndex, Toast.LENGTH_SHORT).show()
},
onDoubleTap = {
    val realIndex = itemList.indexOf(text)
    if (realIndex < itemList.size - 1) {
        Collections.swap(itemList, realIndex, realIndex + 1)
    }
}

方案3：使用带唯一ID的数据类（通用健壮方案） #

如果列表中存在重复文本，建议给每个项定义带唯一ID的数据类，同时用ID作为itemsIndexed的键和pointerInput的键：

data class ListItem(val id: Int, val text: String)

@Composable
fun Screen(modifier: Modifier = Modifier) {
    val itemList = remember { 
        mutableStateListOf(
            ListItem(1, "Item 1"),
            ListItem(2, "Item 2"),
            ListItem(3, "Item 3"),
            ListItem(4, "Item 4")
        )
    }
    val context = LocalContext.current

    LazyColumn(modifier = modifier) {
        itemsIndexed(itemList, key = { _, item -> item.id }) { index, item ->
            Card(
                modifier = Modifier
                    .pointerInput(item.id) { // 使用唯一ID作为键
                        detectTapGestures(
                            onTap = {
                                Toast.makeText(context, "" + index, Toast.LENGTH_SHORT).show()
                            },
                            onDoubleTap = {
                                if (index < itemList.size - 1) {
                                    Collections.swap(itemList, index, index + 1)
                                }
                            }
                        )
                    }
                    .padding(8.dp)
                    .fillMaxWidth()
                    .animateItem()
            ) {
                Row(
                    modifier = Modifier.padding(16.dp).fillMaxSize()
                ) {
                    Text("$index. ${item.text}")
                }
            }
        }
    }
}

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