Android Compose：LazyRow因IndexOutOfBoundsException崩溃问题求助

问题原因 #

• 你使用的MutableList是普通可变集合，Jetpack Compose无法自动监听它的元素变更，所以删除路径后Compose不会触发UI重组，导致列表界面没有更新。
• 滚动LazyRow时，它内部会基于缓存的原列表长度去加载对应位置的item，但此时实际列表已经缩短，访问超出当前列表范围的索引就会抛出IndexOutOfBoundsException异常。

修复步骤 #

1. 替换普通集合为可观察状态集合
   把普通的MutableList换成Compose提供的mutableStateListOf()，这个容器会自动通知Compose状态变化，触发UI重组。

   修改调用处的代码：

   // 替换原有的val photoList: MutableList<String>
   val photoList = remember { mutableStateListOf<String>() }
   onDeleteClick = { path ->
       photoList.remove(path)
   }
   

   如果你的列表是从外部传入的，也可以用mutableStateOf包装列表，更新时替换整个列表：

   var photoList by remember { mutableStateOf<List<String>>(emptyList()) }
   onDeleteClick = { path ->
       photoList = photoList.filterNot { it == path }
   }
   

2. （可选但推荐）给LazyRow的items设置唯一key
   为避免LazyRow在列表变化时错误复用item组件，给每个item指定唯一key（确保路径唯一的话，直接用图片路径即可）：

   LazyRow(
       modifier = Modifier
           .padding(vertical = 16.dp)
           .wrapContentHeight()
           .fillMaxWidth(),
       horizontalArrangement = Arrangement.spacedBy(16.dp),
       state = rememberLazyListState(),
       contentPadding = PaddingValues(horizontal = 16.dp)
   ) {
       items(photoList, key = { it }) { path ->
           ImageCard(path) {
               onDeleteClick(path)
           }
       }
   }
   

修改完成后，删除元素时Compose会感知到列表变化并自动重组LazyRow更新UI，滚动时也不会出现索引越界的崩溃问题。

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