I'm creating a layout with Jetpack Compose and there is a column. I would like center one composable and the other to align to the bottom. Here is an image of my target screen here
I spent day working it out, SpaceAround
and SpaceBetween
didn't help. I would appreciate any help.
You can use a custom layout or something like:
Column(Modifier.fillMaxSize(),
verticalArrangement = Arrangement.SpaceBetween) {
Spacer(modifier = Modifier.fillMaxWidth().height(0.dp))
Box(
Modifier
.fillMaxWidth()
.height(60.dp)
.background(Red)
)
Row(
modifier = Modifier.fillMaxWidth().height(30.dp).background(Blue)
) {
//...
}
}
Use a Column with weight(1f)
and verticalArrangement = Arrangement.Center
to wrap the first item. Here's the code
@Composable
fun Demo() {
Column(modifier = Modifier.fillMaxSize()) {
Column(
modifier = Modifier
.fillMaxWidth()
.weight(1f)
.background(color = Color.Transparent),
verticalArrangement = Arrangement.Center,
) {
Box(
modifier = Modifier
.fillMaxWidth()
.height(100.dp)
.padding(15.dp)
.background(color = Color.Green)
)
}
Box(
modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.background(color = Color.Yellow)
)
}
}
@Composable
@Preview
fun DemoPreview() {
Demo()
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.