如何在 Compose 中长按选择项目?

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

How to select items in Compose on long click?

问题

I have a LazyVerticalGrid with pictures, and I want to select items in it on long click. How to do it?

我有一个带有图片的LazyVerticalGrid,我想在长按时选择其中的项目。如何做?

And I have a main screen. How to make items in LazyVerticalGrid selectable? I need to select several photos and delete them. And I need a checkbox to be able to select all the items and delete them.

我有一个主屏幕。如何使LazyVerticalGrid中的项目可选择?我需要选择多张照片并删除它们。而且我需要一个复选框来选择所有项目并删除它们。

英文:

I have LazyVerticalGrid with pictures and I want to select items in it on long click. How to do it?

I have Photo function for photo item:

@Composable
    fun Photo(
        photo: Photo,
        navController: NavController,
    ) {
        val painter = rememberAsyncImagePainter(model = photo.uri)
        Box(
            modifier = Modifier
                .width(150.dp)
                .height(150.dp)
                .clickable(
                    onClick = {
                        val args = URLEncoder.encode(photo.uri, StandardCharsets.UTF_8.toString())
                        navController.navigate(Destinations.DetailScreen.withArgs(args))
                    }
                )
        ) {
            Image(
                painter = painter,
                contentDescription = null,
                contentScale = ContentScale.Fit,
            )
        }
    }

And I have main screen. How to make items in LazyVerticalGrid selectable? I need to select several photos and delete them. And I need checkbox to be able to select all the items and delete them.

@Composable
    fun MainScreen(navController: NavController) {

        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(Color(android.graphics.Color.parseColor("#50E1E6")))
        ) {
            LaunchedEffect(Unit) {
                lifecycleScope.launch {
                    lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
                        viewModel.allPhotos.collect {
                            photoList = it
                        }
                    }
                }
            }
            if (photoList.isEmpty()) {
                TextContent()
            } else {
                LazyVerticalGrid(
                    columns = GridCells.Fixed(3),
                    contentPadding = PaddingValues(5.dp)
                ) {
                    items(photoList) { photo ->
                        Column {
                            Photo(
                                photo = photo,
                                navController = navController,
                            )
                            Divider(color = Color.Transparent, thickness = 5.dp)
                        }
                    }
                }
            }

            Button(
                onClick = {
                    navController.navigate(Destinations.CameraScreen.routes)
                    startCamera()
                },
                modifier = Modifier.align(Alignment.BottomEnd)
            ) {
                Text(text = "Add a picture")
            }
            DeleteDialog()
        }
    }

答案1

得分: 1

代替可点击的修饰符,您需要使用 combinedClickable

.combinedClickable (
      onLongClick = {},
      onClick = {},
)

应该将 onLongClicked 函数从 LazyVerticalGrid 传递给您的 Photo 组合:

val selectedItems = remember { mutableListOf<Int>() }

LazyVerticalGrid(columns = GridCells.Fixed(3)) {
    // 您可以保存索引或者如果有的话对象的 ID
    itemsIndexed(photos) { index, item ->
        val isSelected = selectedItems.contains(index)
        Photo(photo = item, navController = navController, isSelected = isSelected, onSelected = { selectedItems.add(index) })
    }
}
英文:

Instead of the clickable modifier you need to use the combinedClickable:

.combinedClickable (
      onLongClick = {},
      onClick = {},
)

The onLongClicked function should be passed down to your Photo composable from the LazyVerticalGrid:

val selectedItems = remember { mutableListOf&lt;Int&gt;() }

LazyVerticalGrid(columns = GridCells.Fixed(3)) {
    // you can either save the index or the object&#39;s ID if there&#39;s one
    itemsIndexed(photos) { index, item -&gt;
        val isSelected = selectedItems.contains(index)
        Photo(photo = item, navController = navController, isSelected = isSelected, onSelected = { selectedItems.add(index) })
    }
}

huangapple
  • 本文由 发表于 2023年7月3日 02:14:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76600222.html
匿名

发表评论

匿名网友

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

确定