如何在LazyColumn中 Select 多个项,并最终将选定的项添加到单独的列表中.

               GettingTags(tagsContent ={ productTags ->

                val flattenList = productTags.flatMap {
                    it.tags_list
                }
                Log.i(TAG,"Getting the flattenList $flattenList")

                LazyColumn{
                    items(flattenList){
                        ListItem(text = {Text(it) })
                        if(selectedTagItem) {
                            Icon(
                                imageVector = Icons.Default.Check,
                                contentDescription = "Selected",
                                tint = Color.Green,
                                modifier = Modifier.size(20.dp)
                            )
                        }
                    }
                }

            })

可变变量状态

var selectedTagItem by remember{
    mutableStateOf(false)
}

推荐答案

首先使用要切换的选定变量创建一个类

@Immutable
data class MyItem(val text: String, val isSelected: Boolean = false)

然后通过muableStateListOf创建一个SnapshotStateList,它包含所有项,并且可以在我们使用新实例更新任何项时触发重组,还可以添加或删除项.我使用了一个视图模型,但这不是强制的.我们可以使用索引来切换项目,或者通过过滤isSelected标志来获得所选项目

class MyViewModel : ViewModel() {

    val myItems = mutableStateListOf<MyItem>()
        .apply {
            repeat(15) {
                add(MyItem(text = "Item$it"))
            }
        }

    fun getSelectedItems() = myItems.filter { it.isSelected }

    fun toggleSelection(index: Int) {

        val item = myItems[index]
        val isSelected = item.isSelected

        if (isSelected) {
            myItems[index] = item.copy(isSelected = false)
        } else {
            myItems[index] = item.copy(isSelected = true)
        }
    }
}

Create LazyColumn with Key,Key确保仅重新组合更新的项,如performance document中所示

@Composable
private fun SelectableLazyListSample(myViewModel: MyViewModel) {

    val selectedItems = myViewModel.getSelectedItems().map { it.text }
    Text(text = "Selected items: $selectedItems")
    LazyColumn(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        contentPadding = PaddingValues(8.dp)
    ) {
        itemsIndexed(
            myViewModel.myItems,
            key = { _, item: MyItem ->
                item.hashCode()
            }
        ) { index, item ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Color.Red, RoundedCornerShape(8.dp))
                    .clickable {
                        myViewModel.toggleSelection(index)
                    }
                    .padding(8.dp)
            ) {
                Text("Item $index", color = Color.White, fontSize = 20.sp)
                if (item.isSelected) {
                    Icon(
                        modifier = Modifier
                            .align(Alignment.CenterEnd)
                            .background(Color.White, CircleShape),
                        imageVector = Icons.Default.Check,
                        contentDescription = "Selected",
                        tint = Color.Green,
                    )
                }
            }
        }
    }
}

结果

enter image description here

Android相关问答推荐

在Android上使用XSLT文件转换XML文件

使用Kotlin/Compose与Java/XML指南的比较

如何更新Kotlin中的显示?

登录方法显示为空列表,即使它显示的是Firebase身份验证控制台

不能在LazyGrid-Jetpack Compose中使用填充最大宽度或填充父项最大宽度

Android-LVL库始终返回NOT_SUBLISTED

LaunchedEffect没有延迟时应用程序崩溃

使用 Jetpack Compose 在 Android TV 上启用系统声音

Android 不在后台更新位置

如何在jetpack compose中使可组合的屏幕zoom 到不同的手机(屏幕)尺寸?

Android WebView 不会在滚动端加载新内容

Android:ActivityCompat.requestPermissions 不显示弹窗(Android 13,targetSdkVersion=33)

viewModel 的可变值状态不起作用

我不能在 jetpack Compose 中使用 TextField()(material 3)

如何在 Jetpack compose 中将 Canvas 中的文本居中?

在 android list 中添加 IsMonitoringTool 元数据标志的位置

如何使用 recyclerview 实现这样的布局?

MVVM - 这个逻辑的最佳层是什么?

Сan 无法从 Firestore 获取数据,没有错误

使用协程访问数据库