使用Jetpack Compose从图库中选择图片

添加依赖

Jetpack Compose是一种用于构建Android应用界面的现代工具包。它提供了一种声明性的方式来创建用户界面，使开发者能够更轻松地构建交互式和可定制化的应用程序。本文将介绍如何使用Jetpack Compose从图库中选择图片，并显示在应用程序界面上。

首先，我们需要添加一个名为Coil的依赖项，用于在应用程序中显示图片。我们可以通过在build.gradle.kts文件中的dependencies块中添加以下代码来完成这一步骤：

https://coil-kt.github.io/coil/compose/

dependencies {
    implementation("io.coil-kt:coil-compose:2.4.0")
}

选择一张图片

首先，我们需要创建一个变量来存储照片的URI（统一资源标识符）。

var imageUri by remember {
    mutableStateOf<Uri?>(null)
}

现在要打开图库，我们需要使用rememberLauncherForActivityResult，它具有GetContent合同。

val galleryLauncher = rememberLauncherForActivityResult(
    contract = ActivityResultContracts.GetContent(),
    onResult = { uri ->
        uri?.let {
            imageUri = it
        }
    }
)

让我们添加一个Image和TextButton。仅当imageUri不为空时，Image才会显示出来。要打开图库，我们只需要向图库启动器提供内容类型即可。

Column {
    imageUri?.let {
        Image(
            painter = rememberAsyncImagePainter(model = imageUri),
            contentDescription = null,
            modifier = Modifier
                .clip(CircleShape)
                .size(36.dp)
        )
    }
    
    TextButton(
        onClick = {
            galleryLauncher.launch("image/*")
        }
    ) {
        Text(
            text = "Pick image"
        )
    }
}

选择多个图像

首先，我们需要创建一个变量来存储URI（统一资源标识符）列表。

var imageUriList = remember {
    mutableStateOf<List<Uri>>(emptyList())
}

现在要打开图库，我们需要使用rememberLauncherForActivityResult，它具有GetMultipleContents合同。

val galleryLauncher = rememberLauncherForActivityResult(
    contract = ActivityResultContracts.GetMultipleContents（），
    onResult = { uriList ->
        imageUriList.value = uriList
    }
)

通过以上步骤，我们就能够实现使用Jetpack Compose选择多个图库图片的功能。

结论

本文介绍了如何使用Jetpack Compose从图库中选择单个或多个图片，并在应用程序界面中显示它们。通过使用rememberLauncherForActivityResult方法和相应的合同，以及添加适当的依赖项，我们能够轻松地集成图库选择功能到Jetpack Compose应用程序中。希望本文能够帮助您在开发过程中更好地利用Jetpack Compose的强大功能。

转自：使用Jetpack Compose从图库中选择图片