英文:
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<Int>() }
LazyVerticalGrid(columns = GridCells.Fixed(3)) {
// you can either save the index or the object's ID if there's one
itemsIndexed(photos) { index, item ->
val isSelected = selectedItems.contains(index)
Photo(photo = item, navController = navController, isSelected = isSelected, onSelected = { selectedItems.add(index) })
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论