Как разделить экран на две области, имея форму в центре?

Question

Я уже несколько часов пытаюсь создать приведенный ниже дизайн, но не могу найти лучший способ решения этой проблемы с помощью Jetpack Compose, и я не могу найти solid do c описание подхода компоновки компоновки / руководства.

Я перепробовал кучу вещей, включая следующую вложенность, но не повезло:

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() {
    return Box(gravity = ContentGravity.Center) {
        Column() {
            Row(modifier = Modifier.weight(1.0f).fillMaxWidth()
                .drawBackground(color = Color.Red)) {
            }

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

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