Jetpack 撰寫分頁列表 UI 更新項目 Click

Question

如何使用 jetpack compose 在分頁列表中進行 UI 更改。

用例

我有一個分頁列表，其中包含數據名稱（字符串）和喜歡（布爾值）。 如果我單擊列表中的特定項目，我需要在 UI 中放置一個贊按鈕。 但是圖像不會根據條件在 UI 中更新。

片段

userList -> LazyPagingItems<AllDoctorsResponse.Data.Doctor>

//視圖模型

userList.itemSnapshotList.find { it?.id == user.id }?.liked = true

// 可組合

items(userList.itemCount){ index ->
 userList[index]?.let {
       if (it.liked == true) {
           UserCardWithLike(it, onClick = { userId ->
             onUserCardClicked(userId)
             }, onLikeChange = { isLiked, user ->
             onLikeChange(isLiked, user)
          })
       } else {
           UserCard(it, onClick = { userId ->
             onUserCardClicked(userId)
             }, onLikeChange = { isLiked, user ->
             onLikeChange(isLiked, user)
          })
          }
      }
    }

Answer 1

我不再使用 paging3，所以我沒有測試這段代碼，但我認為它會起作用：

items(userList.itemCount){ index ->
    userList[index]?.let {
        var liked by rememberSaveable { mutableStateOf(it.liked) }
        if (liked == true) {
            UserCardWithLike(
                it,
                onClick = { userId -> onUserCardClicked(userId) },
                onLikeChange = { isLiked, user -> liked = false }
            )
        } else {
            UserCard(
                it,
                onClick = { userId -> onUserCardClicked(userId) },
                onLikeChange = { isLiked, user -> liked = true }
            )
        }
    }
}

如果你想要 notifyItemChange 之類的東西，在 Paging3 中是不可能的。 在這種情況下，我建議嘗試重寫分頁庫，這非常容易。 https://gist.github.com/FishHawk/6e4706646401bea20242bdfad5d86a9e