我正在尝试使用 Jetpack Compose 在 Android 中设置背景图片,但图片无法填满整个页面
I am trying to set a background image in Android using jetpack compose but the image cant fill the whole page
- 我想将图像填充到页面的最大尺寸并填充应用栏下方的边缘。
- 我可以在不使用脚手架的情况下将图像填充为完整背景,但在这种情况下我需要使用脚手架。
- 附上问题截图,方便理解
- 你可以通过点击 link 来查看
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
我试过这段代码,它工作正常。这里重要的是确保你放在里面的内容 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
}
}
- 我想将图像填充到页面的最大尺寸并填充应用栏下方的边缘。
- 我可以在不使用脚手架的情况下将图像填充为完整背景,但在这种情况下我需要使用脚手架。
- 附上问题截图,方便理解
- 你可以通过点击 link 来查看 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
我试过这段代码,它工作正常。这里重要的是确保你放在里面的内容 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
}
}