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

Posted 2023-02-23

【中文标题】我正在尝试使用 jetpack compose 在 Android 中设置背景图像，但图像无法填满整个页面

【英文标题】：I am trying to set a background image in Android using jetpack compose but the image cant fill the whole page

【发布时间】：2022-01-01 00:11:07

【问题描述】：

我想将图像填充到页面的最大尺寸并填充应用栏下方的边缘。 我可以在不使用脚手架的情况下将图像填充到完整背景，但在这种情况下我需要使用脚手架。 截图附上问题以便更好地理解 你可以点击链接查看 enter image description here

@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
            )


        

    

the image cant fill the the edges of app bar

【问题讨论】：

你想让你的图片放在 topAppBar 后面（图片的一部分会被剪掉）？

是的！！！！但是因为脚手架我们不能这样做

那么不要在顶层使用脚手架。使用盒子。在里面放你的脚手架和图片fillMaxSize。

它会给出相同的响应...添加一个框不会改变任何东西

你能分享你的代码吗

【参考方案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
    

【讨论】：

感谢您的帮助...每次我忘记将 backgroundColor = Color.Transparent 添加到脚手架

在将一个活动更改为第二个活动后尝试保存我的编辑文本字段的值，然后在 jetpack compose 中返回到第一个活动，你能帮忙解决这个问题

您能否发布一个单独的问题来添加相关详细信息？