Android Compose中如何为PreviewView实现中心清晰的模糊镂空效果？

要实现PreviewView除中心方形外均模糊的效果，不能直接给整个视图加全局模糊，需要通过组合RenderEffect来区分模糊区域和清晰区域。以下是具体实现步骤：

核心思路 #

通过组合两种RenderEffect：

1. 给整个PreviewView应用模糊效果作为底层
2. 在中心区域叠加未模糊的原视图内容，实现局部清晰

修改后的代码 #

替换你原代码中previewView的初始化部分：

val previewView = PreviewView(context).apply {
    implementationMode = PreviewView.ImplementationMode.COMPATIBLE

    // 等待视图测量完成后计算中心区域尺寸
    viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
        override fun onGlobalLayout() {
            viewTreeObserver.removeOnGlobalLayoutListener(this)
            // 定义中心方形的大小（可根据需求调整，这里设为300dp）
            val centerSquareSize = TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_DIP,
                300f,
                context.resources.displayMetrics
            ).toInt()
            // 计算中心区域的坐标
            val left = (width - centerSquareSize) / 2
            val top = (height - centerSquareSize) / 2
            val right = left + centerSquareSize
            val bottom = top + centerSquareSize

            // 创建全局模糊效果
            val blurEffect = RenderEffect.createBlurEffect(26f, 26f, Shader.TileMode.CLAMP)
            // 创建中心区域的裁剪效果（保留原视图内容，不模糊）
            val clearClipEffect = RenderEffect.createClipEffect(left, top, right, bottom)
            // 组合效果：模糊层作为底层，中心清晰层覆盖在上方
            val compositeEffect = RenderEffect.createCompositeEffect(
                blurEffect,
                clearClipEffect,
                PorterDuff.Mode.SRC_OVER
            )
            setRenderEffect(compositeEffect)
        }
    })
}

关键说明 #

• 必须等待视图测量完成后再计算中心区域坐标，否则width和height会是0，导致区域计算错误
• 中心方形的大小可通过修改300f这个dp值来调整
• 使用PorterDuff.Mode.SRC_OVER确保中心清晰区域覆盖在模糊背景上
• 该方案基于Android 12+的RenderEffect API，是硬件加速的高效实现方式

内容的提问来源于stack exchange，提问作者Rahul Pawar