如何使用 Jetpack Compose 将相机预览缩放到半透明背景中的任何给定尺寸或形状

Question

我有一个带有半透明背景的对话框片段。我想以圆形或方形的形式在此对话框片段上放置相机预览。

设置比例类型为 时PreviewView.ScaleType.FIT_CENTER，预览如下：

带黑色边框的相机预览

而如果我将比例类型设置为PreviewView.ScaleType.FILL_CENTER，则预览如下：

相机预览溢出超出设定边界

以下代码是我用于相机预览可组合项的代码：

@Composable
private fun CameraPreview(
    modifier: Modifier = Modifier,
    scaleType: PreviewView.ScaleType = PreviewView.ScaleType.FILL_CENTER,
    onUseCase: (UseCase) -> Unit
) {
    AndroidView(
        modifier = modifier,
        factory = { context ->
            val previewView = PreviewView(context).apply {
                this.scaleType = scaleType
                layoutParams = ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                )
            }
            onUseCase(
                Preview.Builder()
                    .build()
                    .also {
                        it.setSurfaceProvider(previewView.surfaceProvider)
                    }
            )
            previewView
        }
    )
}

我尝试为布局参数设置整数值，但这似乎没有帮助。我怎样才能设置相机预览，使其适合边界，并且不会超出边界或在边界周围留下黑色边框？

这是供参考的图像，它显示了我想要实现的目标：

我想要实现的目标的图片

Answer 1

我在实施二维码扫描时遇到了同样的问题。将一个框添加到 AndroidView 作为父级，并添加Modifier.clipToBounds()到它有助于获得正确的结果。

片段：

Box(
    modifier = Modifier
        .fillMaxWidth()
        .height(240.dp)
        .clipToBounds()
) {
    CameraPreviewWithQRScanning(
        modifier = Modifier
            .matchParentSize()
            .align(Alignment.Center),
        isFlashOn = state.isFlashOn,
        onQrCodeScanned = viewModel::onQrCodeScanned
    )
}

CameraPreviewWithQRScanning是一个带有 AndroidView 的 Composable 函数。尝试添加一个具有您所需尺寸的盒子一次，看看是否有帮助。