jetback在使用VideoView时合成黑色背景

Question

当我使用此代码在 jetback compose 中显示 Imageview 时，它可以正常工作

Column(
Modifier
.wrapContentHeight()
.fillMaxWidth(),
) {
    Image(
        modifier = Modifier.size(180.dp).align(CenterHorizontally).padding(0.dp, 64.dp, 0.dp, 0.dp),
        painter = painterResource(id = com.taxa.R.drawable.ic_phone_reg),
        contentDescription = ""
    )
    Text(
        text = stringResource(headerResource),
        modifier = Modifier
            .fillMaxWidth(),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.headlineLarge,
    )
    Text(
        text = stringResource(bodyResource),
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp),
        textAlign = TextAlign.Center,
        style = MaterialTheme.typography.titleMedium,
    )
}

但是当我需要显示原始文件夹中的视频而不是图像并用视频视图替换图像时

{
    Column(
        Modifier
            .wrapContentHeight()
            .fillMaxWidth(),
    ) {
        val path = "android.resource://" + BuildConfig.APPLICATION_ID + "/" + videoResource
        CommonVideoView(
            path,
            modifier = Modifier
                .height(180.dp)
                .fillMaxWidth()
                .align(CenterHorizontally)
        )
        Text(
            text = stringResource(headerResource),
            modifier = Modifier
                .fillMaxWidth(),
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.headlineLarge,
        )
        Text(
            text = stringResource(bodyResource),
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 10.dp),
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.titleMedium,
        )
    }
}


@Composable
fun CommonWebView(urlToRender: String, modifier: Modifier) {
    AndroidView(factory = {
        VideoView(it).apply {
            setVideoPath(urlToRender)
            setOnCompletionListener {
                start()
            }
            start()
        }
    }, modifier = modifier.size(100.dp))
}

-- 视频正常但背景变黑

使用VideoView时如何将背景显示为白色？

Answer 1

我使用 Box 可组合项作为父项，使用 AndroidView 作为子项。在 VideoView 的

setOnPrepatedListener

中使用

setZOrderOnTop(true)

，然后启动视频，这解决了问题。

Box(
    modifier = modifier
        .fillMaxHeight()
        .background(color = colorResource(id = R.color.sky_blue))
) {
    AndroidView(
        factory = { context ->
            VideoView(context).apply {
                setVideoURI(Uri.parse(path))
                setOnPreparedListener {
                    it.isLooping = true
                    setZOrderOnTop(true)
                    it.start()
                }
            }
        },
    )
}