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

Question

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

我尝试了很多东西，包括下面的嵌套，但没有成功：

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

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

谢谢！

Answer 1

我认为 Stack Layout 会对您有所帮助。像这样

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")
    }
}

Answer 2

您还可以使用父级 Box，其重心为 Column，两个相等 Row

@Composable
fun TwoAreas() {
    Box(contentAlignment = Alignment.Center) {
        Column {
            Row(modifier = Modifier.weight(1.0f).fillMaxWidth()
                .background(color = Color.Red)) {
            }

            Row(modifier = Modifier.weight(1.0f).fillMaxWidth()
                .background(color = Color.Blue)) {
            }
        }

        Box(modifier = Modifier.background(color = Color.Black).height(100.dp).width(100.dp))
    }
}

Answer 3

另一个答案，因为根据文档“Stack 已重命名为 Box”。而“gravity = ContentGravity.Center”似乎已经不存在了

@Composable
fun content(){
    Box {
        Column {
            Row(
                children = {},
                modifier = Modifier
                    .weight(1f)
                    .background(purple500)
                    .fillMaxWidth()
            )
            Row(
                children = {},
                modifier = Modifier
                    .weight(1f)
                    .background(purple200)
                    .fillMaxWidth()
            )
        }
    }
}

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

How do I split the screen into two areas, while having a form in the center?

android

android-jetpack

android-jetpack-compose