android jetpack compose 图片选择器

Android Jetpack Compose 图片选择器

Android Jetpack Compose 是一种用于构建 UI 的现代工具包，它使开发者能够更轻松地构建漂亮的原生应用。在实际开发中，经常会涉及到图片选择器的功能，让用户从手机中选择图片。本文将介绍如何在 Jetpack Compose 中实现一个简单的图片选择器。

准备工作

在使用 Jetpack Compose 构建图片选择器之前，我们需要添加相关依赖。

implementation "androidx.compose.ui:ui:$compose_version"
implementation "androidx.activity:activity-compose:$activity_compose_version"
implementation "androidx.compose.ui:ui-tooling:$compose_version"
implementation 'com.github.skydoves:transformationlayout:1.0.1'

创建图片选择器

首先，我们需要创建一个 Composable 函数，用于显示图片选择器的界面，并处理用户选择的图片。

@Composable
fun ImageSelector(onImageSelected: (Uri) -> Unit) {
    var selectedImageUri by remember { mutableStateOf<Uri?>(null) }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = {
            // 打开系统图片选择器
            val intent = Intent(Intent.ACTION_GET_CONTENT)
            intent.type = "image/*"
            intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, false)
            intent.addCategory(Intent.CATEGORY_OPENABLE)
            val activity = LocalContext.current as Activity
            activity.startActivityForResult(intent) {
                if (it.resultCode == Activity.RESULT_OK) {
                    val uri = it.data?.data
                    selectedImageUri = uri
                    onImageSelected(uri!!)
                }
            }
        }) {
            Text("选择图片")
        }

        selectedImageUri?.let { uri ->
            Image(
                painter = rememberImagePainter(uri),
                contentDescription = "Selected Image",
                modifier = Modifier
                    .size(200.dp)
                    .padding(16.dp)
            )
        }
    }
}

在上面的代码中，我们创建了一个 ImageSelector 函数，接受一个回调函数 onImageSelected，当用户选择了图片时调用该函数。内部使用 MutableState 来存储选中的图片 Uri。

使用图片选择器

在使用图片选择器时，我们只需要在组合函数中调用 ImageSelector 函数，并实现 onImageSelected 回调即可。

@Composable
fun MyScreen() {
    var selectedImageUri by remember { mutableStateOf<Uri?>(null) }

    ImageSelector { uri ->
        selectedImageUri = uri
    }
}

在上面的代码中，我们通过调用 ImageSelector 函数并实现 onImageSelected 回调来使用图片选择器。

状态图

下面是一个简单的状态图，展示了图片选择器的工作流程。

stateDiagram
    ImageSelector -- 点击按钮 --> 打开系统图片选择器
    ImageSelector -- 选择图片 --> 显示选中的图片

通过上面的介绍，我们学习了如何在 Jetpack Compose 中实现一个简单的图片选择器。希望这对你有所帮助，让你更加熟悉 Jetpack Compose 的使用方法。如果有任何问题或建议，欢迎留言讨论。