我正在尝试使用 jetpack compose 在 Android 中设置背景图像，但图像无法填充整个页面

Question

1. 我想将图像填充到页面的最大尺寸并填充应用栏下方的边缘。
2. 我可以在不使用脚手架的情况下将图像填充到完整背景，但在这种情况下我需要使用脚手架。
3. 屏幕截图附有问题以便更好地理解
4. 您可以通过点击链接进行检查， 在此处输入图像描述

@Composable
fun ScaffoldBackground() {

    Scaffold(
        topBar = {
            TopAppBar(
                modifier = Modifier
                    .fillMaxHeight(0.2f)
                    .clip(
                        shape = RoundedCornerShape(bottomEnd = 30.dp, bottomStart = 30.dp)
                    ),

                // Provide Title
                title = {
                    Text(
                        text = "Dashboard",
                    )

                }
            )
        },
    ) {

        Box(
            modifier = Modifier
                .fillMaxSize()
        ) {
            Image(
                modifier = Modifier
                    .fillMaxSize(), 
                painter = painterResource(R.drawable.ic_launcher_background),
                contentDescription = "background_image",
                contentScale = ContentScale.FillBounds
            )


        }

    }
}

图像无法填充应用栏的边缘

Answer 1

我尝试了这段代码并且它有效。这里重要的是确保您放入的内容Scaffold应该有一些透明区域，否则背景图像将不可见。

Box {
    Image(
        modifier = Modifier.fillMaxSize(),
        painter = painterResource(R.drawable.ic_launcher_background),
        contentDescription = "background_image",
        contentScale = ContentScale.FillBounds
    )
    Scaffold(
        backgroundColor = Color.Transparent,   // Make the background transparent
        topBar = {
            TopAppBar(
                modifier = Modifier
                    .fillMaxHeight(0.2f)
                    .clip(
                        shape = RoundedCornerShape(
                            bottomEnd = 30.dp,
                            bottomStart = 30.dp
                        )
                    ),
                title = {
                    Text(text = "Dashboard")
                }
            )
        },
    ) {
        // Scaffold content
    }
}