Lazyrow因为’IndexOutOfBoundsException’在Android Compose中崩溃。

huangapple
go评论80阅读模式
英文:

Lazyrow crashes because of 'IndexOutOfBoundsException' android compsoe

问题

I used a lazycolumn to display a list of photos. Photos are displayed with their paths. Problem occurred when I tried to delete an image. I have a button on each image, and when clicked, its path is removed from the photoList. But when I click the delete button, the photoList is modified, but the UI didn't change. And if I scroll the row at this time, the app will crash and show an error message as 'IndexOutOfBoundsException.' I think that was due to the row not being recomposed. What is the reason? How do I fix?

  1. Composable which calls photoList
  3. val photoList: MutableList
  5. onDeleteClick = { path ->
  6.     photoList.remove(path)
  7. }
  1. Photo row composable
  2. LazyRow(
  3.     modifier = Modifier
  4.         .padding(vertical = 16.dp)
  5.         .wrapContentHeight()
  6.         .fillMaxWidth(),
  7.     horizontalArrangement = Arrangement.spacedBy(16.dp),
  8.     state = rememberLazyListState(),
  9.     contentPadding = PaddingValues(horizontal = 16.dp)
  10. ) {
  11.     items(photoList) { path ->
  12.         ImageCard(path) {
  13.             onDeleteClick(path)
  14.         }
  15.     }
  16. }
  1. ImageCard
  2. IconButton(
  3.     onClick = { onDeleteClick(path) },
  4.     modifier = Modifier.align(Alignment.TopEnd)
  5. ) {
  6.     Icon(
  7.         imageVector = Icons.Default.Delete,
  8.         contentDescription = "Delete",
  9.         tint = Color.White
  10.     )
  11. }
英文:

I used a lazycolumn to dispaly a list of photos. Photos are displayed with its path. Problem occured when I try to delete an image. I have a button on each image and when click it, its path is removed from the photoList. But when I click the delete button, the photoList is modiifed but the UI didn't change. And if I scroll the row at this time, the app will crash and show error message as 'IndexOutOfBoundsException'. I think that was due to the row is not recomposed. What is the reason. How do I fix?

  1. Composable which call photoList
  3. val photoList MutableList
  5. onDeleteClick = { path ->
  6.                 photoList.remove(path)
  8.             }
  1. Photo row compsoable
  2. LazyRow(
  3.     modifier = Modifier
  4.         .padding(vertical = 16.dp)
  5.         .wrapContentHeight()
  6.         .fillMaxWidth(),
  7.     horizontalArrangement = Arrangement.spacedBy(16.dp),
  8.     state = rememberLazyListState(),
  9.     contentPadding = PaddingValues(horizontal = 16.dp)
  10.     ) {
  11.         items(photoList) { path ->
  12.         ImageCard(path) {
  13.         onDeleteClick(path)
  14.     }
  1. ImageCard
  2. IconButton(
  3.             onClick = { onDeleteClick(path) },
  4.             modifier = Modifier.align(Alignment.TopEnd)
  5.         ) {
  6.             Icon(
  7.                 imageVector = Icons.Default.Delete,
  8.                 contentDescription = "Delete",
  9.                 tint = Color.White
  10.             )
  11.         }

答案1

得分: 2

The problem is probably that your photoList is not wrapped in a state which would trigger Compose recomposition on change Lazyrow因为’IndexOutOfBoundsException’在Android Compose中崩溃。

Below is a sample code where I wrapped the photoList in a remember construct. It is not exactly the same code as you have not really provided the whole code, so I had to improvise but hopefully, you will get the point Lazyrow因为’IndexOutOfBoundsException’在Android Compose中崩溃。

  1. val photoList = remember {
  2.     // Wrap your photo list data in a state so it can trigger recomposition
  3.     mutableStateOf(List(20) { index -> "Index $index" })
  4. }
  6. LazyRow(
  7.     modifier = Modifier.fillMaxWidth(),
  8.     horizontalArrangement = Arrangement.spacedBy(16.dp),
  9.     contentPadding = PaddingValues(horizontal = 16.dp)
  10. ) {
  11.     items(photoList.value) { text ->
  12.         Text(
  13.             text = text,
  14.             modifier = Modifier
  15.                 .clickable {
  16.                     // Modify the state value, this will trigger recomposition
  17.                     photoList.value = photoList.value.minus(text)
  18.                 }
  19.         )
  20.     }
  21. }
英文:

The problem is probably that your photoList is not wrapped in a state which would trigger Compose recomponsition on change Lazyrow因为’IndexOutOfBoundsException’在Android Compose中崩溃。

Below is a sample code where I wrapped the photoList in a remember construct. It is not exactly the same code as you have not really provided the whole code, so I had to improvise but hopefully, you will get the point Lazyrow因为’IndexOutOfBoundsException’在Android Compose中崩溃。

  1. val photoList = remember {
  2.     // Wrap your photo list data in a state so it can trigger recomposition
  3.     mutableStateOf(List(20) { index -> "Index $index" })
  4. }
  6. LazyRow(
  7.     modifier = Modifier.fillMaxWidth(),
  8.     horizontalArrangement = Arrangement.spacedBy(16.dp),
  9.     contentPadding = PaddingValues(horizontal = 16.dp)
  10. ) {
  11.     items(photoList.value) { text ->
  12.         Text(
  13.             text = text,
  14.             modifier = Modifier
  15.                 .clickable {
  16.                     // Modify the state value, this will trigger recomposition
  17.                     photoList.value = photoList.value.minus(text)
  18.                 }
  19.         )
  20.     }
  21. }

答案2

得分: 2

在LazyColumn/LazyRow中，您必须根据唯一键在项目中添加唯一键，只有基于唯一键的项目才会得到更新。

  1. LazyRow(
  2.     modifier = Modifier
  3.         .padding(vertical = 16.dp)
  4.         .wrapContentHeight()
  5.         .fillMaxWidth(),
  6.     horizontalArrangement = Arrangement.spacedBy(16.dp),
  7.     state = rememberLazyListState(),
  8.     contentPadding = PaddingValues(horizontal = 16.dp)
  9. ) {
  10.     items(photoList, key = { it.yourUniqueId }) { path ->
  11.         ImageCard(path) {
  12.             onDeleteClick(path)
  13.         }
  14.     }
  15. }
英文:

In LazyColumn/LazyRow you have to add Unique key in items, based on the unique key only particular item got update.

  1. LazyRow(
  2. modifier = Modifier
  3.     .padding(vertical = 16.dp)
  4.     .wrapContentHeight()
  5.     .fillMaxWidth(),
  6. horizontalArrangement = Arrangement.spacedBy(16.dp),
  7. state = rememberLazyListState(),
  8. contentPadding = PaddingValues(horizontal = 16.dp)
  9. ) {
  10.     items(photoList,key = { it -> it.yourUniqueId ) { path ->
  11.     ImageCard(path) {
  12.     onDeleteClick(path)
  13. }

huangapple
  • 本文由 发表于 2023年5月15日 08:18:11
  • 转载请务必保留本文链接：https://go.coder-hub.com/76250195.html
  • android
  • android-jetpack-compose
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定