如何在Compose中创建带方形镂空的模糊相机视图用于二维码扫描？

核心思路 #

AndroidView是原生View的包装，Compose的Modifier无法直接穿透到内部的PreviewView（比如模糊、自定义裁剪），所以必须用Compose层叠布局将遮罩叠加在AndroidView上方，同时确保PreviewView的尺寸被正确约束。

一、实现中心圆角镂空的透明遮罩 #

用Canvas自定义遮罩组件，通过路径运算实现“半透明背景+中心圆角镂空”的效果，代码直接可用：

1. 自定义镂空遮罩组件 #

@Composable
fun CenterRoundedCutoutOverlay(
    overlayColor: Color = Color.Black.copy(alpha = 0.7f),
    cutoutRadius: Dp = 16.dp,
    cutoutWidthRatio: Float = 0.6f, // 镂空宽度占父布局的比例
    cutoutHeightRatio: Float = 0.4f // 镂空高度占父布局的比例
) {
    val density = LocalDensity.current
    val radiusPx = with(density) { cutoutRadius.toPx() }
    
    Canvas(modifier = Modifier.fillMaxSize()) {
        val parentWidth = size.width
        val parentHeight = size.height
        
        // 1. 绘制全屏半透明背景
        val backgroundPath = Path().apply {
            addRect(Rect(0f, 0f, parentWidth, parentHeight))
        }
        
        // 2. 绘制中心圆角镂空区域
        val cutoutWidth = parentWidth * cutoutWidthRatio
        val cutoutHeight = parentHeight * cutoutHeightRatio
        val cutoutLeft = (parentWidth - cutoutWidth) / 2
        val cutoutTop = (parentHeight - cutoutHeight) / 2
        val cutoutPath = Path().apply {
            addRoundRect(
                RoundRect(
                    left = cutoutLeft,
                    top = cutoutTop,
                    right = cutoutLeft + cutoutWidth,
                    bottom = cutoutTop + cutoutHeight,
                    cornerRadius = CornerRadius(radiusPx, radiusPx)
                )
            )
        }
        
        // 3. 路径运算：背景减去镂空区域
        backgroundPath.op(cutoutPath, PathOperation.Difference)
        drawPath(backgroundPath, color = overlayColor)
    }
}

2. 整合PreviewView与遮罩 #

用Box层叠布局，确保PreviewView占满父容器，遮罩覆盖在最上层：

@Composable
fun CameraPreviewWithOverlay() {
    Box(modifier = Modifier.fillMaxSize()) {
        // 正确集成PreviewView：必须添加fillMaxSize()约束尺寸
        AndroidView(
            factory = { context ->
                PreviewView(context).apply {
                    layoutParams = ViewGroup.LayoutParams(
                        ViewGroup.LayoutParams.MATCH_PARENT,
                        ViewGroup.LayoutParams.MATCH_PARENT
                    )
                    // 这里添加你的CameraX配置逻辑
                }
            },
            modifier = Modifier.fillMaxSize()
        )
        
        // 叠加镂空遮罩
        CenterRoundedCutoutOverlay(
            overlayColor = Color.Black.copy(alpha = 0.6f),
            cutoutRadius = 20.dp,
            cutoutWidthRatio = 0.7f,
            cutoutHeightRatio = 0.5f
        )
    }
}

二、（可选）替代模糊效果的实现 #

如果之后需要模糊而非透明遮罩，可以用BackdropFilter结合BlurEffect，但注意性能（仅在必要时使用）：

@Composable
fun BlurCutoutOverlay() {
    Box(modifier = Modifier.fillMaxSize()) {
        // 先绘制全屏模糊层
        BackdropFilter(
            modifier = Modifier.fillMaxSize(),
            effect = BlurEffect(radiusX = 10f, radiusY = 10f)
        ) {
            Box(modifier = Modifier.fillMaxSize().background(Color.Black.copy(alpha = 0.3f)))
        }
        
        // 再叠加镂空遮罩（用白色填充镂空区域，抵消模糊）
        Canvas(modifier = Modifier.fillMaxSize()) {
            val density = LocalDensity.current
            val radiusPx = with(density) { 20.dp.toPx() }
            val parentWidth = size.width
            val parentHeight = size.height
            
            val cutoutWidth = parentWidth * 0.7f
            val cutoutHeight = parentHeight * 0.5f
            val cutoutLeft = (parentWidth - cutoutWidth) / 2
            val cutoutTop = (parentHeight - cutoutHeight) / 2
            
            val cutoutPath = Path().apply {
                addRoundRect(
                    RoundRect(
                        left = cutoutLeft,
                        top = cutoutTop,
                        right = cutoutLeft + cutoutWidth,
                        bottom = cutoutTop + cutoutHeight,
                        cornerRadius = CornerRadius(radiusPx, radiusPx)
                    )
                )
            }
            drawPath(cutoutPath, color = Color.White)
        }
    }
}

关键注意事项 #

• 必须给AndroidView添加fillMaxSize()的Modifier，否则原生PreviewView无法正确响应Compose的尺寸约束。
• 避免直接给AndroidView添加clip()或blur()等Modifier，因为这些效果仅作用于原生View的容器，而非内部的PreviewView内容。

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