如何在 Compose 中构建以下布局？

Question

我想在 Compose 中构建以下布局：

我为此编写了以下代码：

@Composable
fun MainScreenContent(){
    Surface(
        color = MaterialTheme.colors.primary,
        modifier = Modifier
            .wrapContentWidth(Alignment.CenterHorizontally)
            .wrapContentHeight(Alignment.CenterVertically)
    ) {
        Row() {
            Column(Modifier.weight(0.3F)) {
                Greeting("Android")
                Spacer(Modifier.padding(16.dp))
                Greeting("User")
            }
            Surface(modifier = Modifier.weight(0.4F),
                color = MaterialTheme.colors.primaryVariant,
            ){
                Spacer(Modifier.padding(16.dp))
            }

            Column(Modifier.weight(0.3F)) {
                Greeting("Android")
                Spacer(Modifier.padding(16.dp))
                Greeting("User")
            }
        }
    }

}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!",
        Modifier
            .padding(16.dp), fontSize = 30.sp)
}

但是有了这个，我得到了以下输出：

我怎样才能达到objective？

Answer 1

将父级 Surface 的高度设置为 IntrinsicSize.Max，并将 fillMaxHeight() 添加到内部 Surface 的修饰符中。

@Composable
fun MainScreenContent() {
    Surface(
        ...,
        modifier = Modifier
            .wrapContentWidth(Alignment.CenterHorizontally)
            .height(IntrinsicSize.Max),
    ) {
        Row {
            ...
            Surface(
                modifier = Modifier
                    .weight(0.4F)
                    .fillMaxHeight(),
                color = MaterialTheme.colors.primaryVariant,
            ) {
                Spacer(Modifier.padding(16.dp))
            }
            ...
        }
    }
}

如何在 Compose 中构建以下布局？

How can I build the following layout in Compose?

android

kotlin

android-jetpack-compose