[英]Align Box/Column to bottom of screen Jetpack Compose
I essentially want cards pinned to the top with a group of buttons pinned to the bottom (on screen keyboard)我基本上希望卡片固定在顶部,一组按钮固定在底部(在屏幕键盘上)
Using Column with a modifier like so only leads to the buttons covering the top cards:像这样使用带有修饰符的 Column 只会导致按钮覆盖顶部卡片:
fun HomeScreen() {
Column(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.SpaceAround
) {
WordGrid()
}
Column(
modifier = Modifier
.fillMaxWidth(),
verticalArrangement = Arrangement.Bottom
) {
Keyboard()
}
I have tried using all the different Arrangements, using a row and using Boxes, but can't seem to get it to work.我已经尝试过使用所有不同的安排,使用一行和使用框,但似乎无法让它工作。
Curiously, in the @Preview it looks as though the above code works, but when ran on an emulator they are both at the top of the screen.奇怪的是,在 @Preview 中,上面的代码看起来好像有效,但在模拟器上运行时,它们都位于屏幕顶部。
Using a spacer is another option, but would this cause issues in other ways?使用垫片是另一种选择,但这会导致其他方面的问题吗? maybe with screen sizes etc?
也许与屏幕尺寸等?
If you want your buttons row to be pinned to the bottom, you have to set the Column
to have a weight
of 1f
, something like this如果你想让你的按钮行固定在底部,你必须设置
Column
的weight
为1f
,像这样
MyTheme {
Surface(color = MyTheme.colors.background) {
// Cards content
Column(
modifier = Modifier.fillMaxWidth()
) {
Column(
modifier = Modifier.fillMaxWidth().weight(1f)
) {
Card(
modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
backgroundColor = Color.Red,
) {
Text(text = "Card 1")
}
Card(
modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
backgroundColor = Color.Green,
) {
Text(text = "Card 2")
}
Card(
modifier = Modifier.fillMaxWidth().height(80.dp).padding(all = 16.dp),
backgroundColor = Color.Blue,
) {
Text(text = "Card 3")
}
}
// Buttons content
Row(
modifier = Modifier.fillMaxWidth()
) {
Button(
onClick = {},
modifier = Modifier.padding(horizontal = 8.dp)
) {
Text(text = "Button 1")
}
Button(
onClick = {},
modifier = Modifier.padding(horizontal = 8.dp)
) {
Text(text = "Button 3")
}
Button(
onClick = {},
modifier = Modifier.padding(horizontal = 8.dp)
) {
Text(text = "Button 2")
}
}
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.