使用 Jetpack Compose 实现多选功能的图片网格
在 Jetpack Compose 中实现一个支持多选功能的图片网格,可以通过组合使用 LazyVerticalGrid
或自定义网格布局,以及管理选中状态的 MutableState
集合来实现。以下是一个示例代码,演示如何创建一个简单的多选图片网格。
首先,确保你已经添加了相关的依赖项,并导入了必要的库:
// build.gradle (app level)
dependencies {
implementation "androidx.compose.ui:ui:<compose_version>"
implementation "androidx.compose.material:material:<compose_version>"
implementation "androidx.compose.ui:ui-tooling-preview:<compose_version>"
implementation "androidx.compose.foundation:foundation:<compose_version>"
implementation "androidx.compose.runtime:runtime-livedata:<compose_version>"
}
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApp {
ImageGridExample()
}
}
}
}
@Composable
fun MyApp(content: @Composable () -> Unit) {
MaterialTheme {
Surface {
content()
}
}
}
@Composable
fun ImageGridExample() {
val images = listOf(
R.drawable.image1,
R.drawable.image2,
R.drawable.image3,
// Add more image resources or URLs
)
val selectedItems = remember { mutableStateOf(setOf<Int>()) }
LazyVerticalGrid(
columns = GridCells.Fixed(3),
modifier = Modifier.padding(16.dp)
) {
items(images.indices) { index ->
val isSelected = selectedItems.value.contains(index)
Box(
modifier = Modifier
.size(100.dp)
.padding(8.dp)
.clickable {
val newSelectedItems = selectedItems.value.toMutableSet()
if (isSelected) {
newSelectedItems.remove(index)
} else {
newSelectedItems.add(index)
}
selectedItems.value = newSelectedItems
}
.border(
width = 2.dp,
color = if (isSelected) Color.Green else Color.Transparent,
shape = CircleShape
)
) {
Image(
painter = painterResource(id = images[index]),
contentDescription = "Image $index",
contentScale = ContentScale.Crop,
modifier = Modifier
.clip(CircleShape)
.matchParentSize()
)
}
}
}
}
关键点解释:
LazyVerticalGrid
:用于创建网格布局,其中GridCells.Fixed(3)
指定每行有三列。- 状态管理:
selectedItems
是一个MutableState
,用于存储选中的图片索引。当用户点击时,根据当前选中的状态更新集合。 - 点击交互:通过
Modifier.clickable
处理图片的点击事件,切换每个项目的选中状态。 - 边框指示:使用
Modifier.border
显示选中状态,选中的图片会有绿色边框。
确保在实际项目中使用合适的图像资源和处理图像加载(可能使用类似 Coil
的库来加载网络图像)。试着根据自己的项目调整实现细节。