android - 如何将屏幕分成两个区域，同时在中心有一个表格？

Question

几个小时以来，我一直在尝试实现以下设计，但无法找到使用 Jetpack Compose 解决此问题的最佳方法，而且我找不到描述 Compose 布局方法/指南的可靠文档。

我尝试了很多东西，包括以下嵌套，但没有运气:

Container
 Row - green background, align Top
 Row - white background, align Buttom
 Container (Form) - align Center

我怎样才能实现这个设计？

谢谢!

Answer 1

我认为堆栈布局会帮助你。像这样

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainContainer()
        }
    }
}

@Preview
@Composable
fun MainContainer() {
    Stack {

        Align(Alignment.TopCenter) {
            Column(arrangement = Arrangement.Center) {
                Container(
                    background(Color.Green),
                    alignment = Alignment.TopCenter,
                    //height = 350.dp,
                    width = 450.dp,
                    expanded = true
                ) {
                    Text("Up")
                }
            }
        }

        Align(alignment = Alignment.BottomCenter) {
            Column(background(Color.Yellow), arrangement = Arrangement.Center) {
                Container(alignment = Alignment.Center, height = 350.dp, width = 450.dp) {
                    Text("Down")
                }
            }
        }

        Align(Alignment.Center) {
            Column(background(Color.White), arrangement = Arrangement.Center) {
                Container(alignment = Alignment.Center, height = 250.dp, width = 250.dp) {
                    Clip(shape = RoundedCornerShape(8.dp)) {
                        LoginContainer()
                    }
                }
            }
        }
    }
}

@Composable
fun LoginContainer() {
    Column {
        Text("Username")
        Text("Password")
        Button("Login")
    }
}