Android Jetpack Compose中使用Android-Image-Cropper无裁剪按钮求助

使用implementation("com.vanniktech:android-image-cropper:4.6.0")在Jetpack Compose中实现图片裁剪功能时，裁剪界面可正常打开、调整裁剪框，但未显示裁剪按钮，尝试配置CropImageOptions多个参数仍无效。

现有代码 #

val cropImageLauncher =
    rememberLauncherForActivityResult(CropImageContract()) { cropResult ->
        if (cropResult.isSuccessful) {
            val croppedImageUri = cropResult.uriContent
            if (croppedImageUri != null) {
                viewModel.setCroppedImageUri(croppedImageUri)
            } else {
                Toast.makeText(context, "Cropped image URI is null", Toast.LENGTH_SHORT).show()
            }
        } else {
            val exception = cropResult.error
            Toast.makeText(context, exception.toString(), Toast.LENGTH_SHORT).show()
        }
    }

val galleryLauncher =
    rememberLauncherForActivityResult(ActivityResultContracts.GetContent()) { uriGallery: Uri? ->
        uriGallery?.let {
            capturedImageUri = it
            Log.d("Snap", "Image selected from gallery: $it")
            val encodedUri = Uri.encode(it.toString())
            cropImageLauncher.launch(
                CropImageContractOptions(
                    uri = uriGallery,
                    cropImageOptions = CropImageOptions(
                        activityTitle = "Crop Your Image",
                        guidelines = CropImageView.Guidelines.ON,
                        outputCompressFormat = Bitmap.CompressFormat.JPEG,
                        showIntentChooser = true,
                        showCropLabel = true,
                        cropperLabelText = "Crop",
                        cropMenuCropButtonIcon = R.drawable.compass,
                        toolbarColor = R.color.black,
                        toolbarTintColor = R.color.black,
                        toolbarTitleColor = R.color.black,
                        toolbarBackButtonColor = R.color.black,
                        cropMenuCropButtonTitle = "Crop",
                        activityMenuTextColor = R.color.black
                    )
                )
            )
        }
    }

问题原因及解决方法 #

1. 颜色冲突导致按钮不可见
   你设置了toolbarColor = R.color.black和toolbarTintColor = R.color.black，裁剪按钮的图标颜色继承自toolbarTintColor，和黑色工具栏背景重叠，完全看不见。

修改方案：将工具栏背景改为浅色，图标/文字改为深色，比如：

toolbarColor = R.color.white,
toolbarTintColor = R.color.black,
toolbarTitleColor = R.color.black,
toolbarBackButtonColor = R.color.black,
activityMenuTextColor = R.color.black

2. 主题兼容性问题
   该库的裁剪界面依赖Material主题，如果你的App使用Material3主题，可能会出现UI元素显示异常。可以在CropImageOptions中指定兼容的主题：

cropImageOptions = CropImageOptions(
    // 其他参数...
    theme = R.style.CropImage.CropImageViewTheme
)

3. 自定义图标问题
   你设置了cropMenuCropButtonIcon = R.drawable.compass，如果该图标本身是黑色且背景也是黑色，同样会导致看不见。可以更换图标，或者移除该参数使用默认图标：

// 移除自定义图标设置，使用默认裁剪图标
// cropMenuCropButtonIcon = R.drawable.compass,

修改后的完整代码示例 #

val cropImageLauncher =
    rememberLauncherForActivityResult(CropImageContract()) { cropResult ->
        if (cropResult.isSuccessful) {
            val croppedImageUri = cropResult.uriContent
            if (croppedImageUri != null) {
                viewModel.setCroppedImageUri(croppedImageUri)
            } else {
                Toast.makeText(context, "Cropped image URI is null", Toast.LENGTH_SHORT).show()
            }
        } else {
            val exception = cropResult.error
            Toast.makeText(context, exception.toString(), Toast.LENGTH_SHORT).show()
        }
    }

val galleryLauncher =
    rememberLauncherForActivityResult(ActivityResultContracts.GetContent()) { uriGallery: Uri? ->
        uriGallery?.let {
            capturedImageUri = it
            Log.d("Snap", "Image selected from gallery: $it")
            cropImageLauncher.launch(
                CropImageContractOptions(
                    uri = uriGallery,
                    cropImageOptions = CropImageOptions(
                        activityTitle = "Crop Your Image",
                        guidelines = CropImageView.Guidelines.ON,
                        outputCompressFormat = Bitmap.CompressFormat.JPEG,
                        showCropLabel = true,
                        cropperLabelText = "Crop",
                        cropMenuCropButtonTitle = "Crop",
                        // 修复颜色冲突
                        toolbarColor = R.color.white,
                        toolbarTintColor = R.color.black,
                        toolbarTitleColor = R.color.black,
                        toolbarBackButtonColor = R.color.black,
                        activityMenuTextColor = R.color.black,
                        // 指定兼容主题
                        theme = R.style.CropImage.CropImageViewTheme
                    )
                )
            )
        }
    }

内容的提问来源于stack exchange，提问作者Phong Dương Hùng