如何在 Jetpack Compose 中将屏幕高度分成两半？

Question

我想在 Jetpack Compose 中将屏幕水平分成两半，如下所示：

    @Composable
fun Splash(alpha: Float) {
    val configuration = LocalConfiguration.current
    val screenHeight = configuration.screenHeightDp.dp
    val screenWidth = configuration.screenWidthDp.dp
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.cat2))
    Box(
        modifier = Modifier
            .background(Blue)
            .height(screenHeight /  2)
            .padding(8.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        Column() {
            Text(text = "Example", fontSize = 44.sp)
        }
    }
    Box(
        modifier = Modifier
            .background(Red)
            .height(screenHeight /  2)
            .padding(8.dp),
        contentAlignment = Alignment.BottomCenter
    ){
        Column {
           
            Text(text = "Example", textAlign = TextAlign.End, color = Grey, fontSize = 12.sp)
        }
    }
}

我可以使用 LocalConfiguration.current 以 dp 获取屏幕高度，并将顶部框和底部框对齐分别设置为 Alignment.TopCenter 和 Alignment.BottomCenter，但它不起作用。第二个盒子（红色的）留在蓝色的上面。

Answer 1

将高度设置为等于半屏高度的最简单方法是在修饰符中使用小数。

Column(
    modifier = Modifier
        .padding(10.dp)
        .fillMaxHeight(0.5f)
        ){ //Content}

Answer 2

您可以用BoxColumn 包裹 es 并为每个框设置 Modifier.weight(1f) ，以将它们设置为相同的高度

@Composable
fun Splash() {

    Column(modifier =Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Blue)
                .weight(1f)
                .padding(8.dp),
            contentAlignment = Alignment.TopCenter
        ) {
            Column() {
                Text(text = "Example", fontSize = 44.sp)
            }
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Red)
                .weight(1f)
                .padding(8.dp),
            contentAlignment = Alignment.Center
        ){
            Column {

                Text(text = "Example", textAlign = TextAlign.End, color = DarkGray, fontSize = 12.sp)
            }
        }
    }
}

或用 包裹起来，BoxWithConstraints返回、和 use将一个 Box 置于顶部，将另一个 Box 置于底部。对于获取测量参数并将它们设置为子修改器非常有用。ContraintsmaxWidthmaxHeightModifier.alignBoxWithConstraints

@Composable
fun Splash2() {
    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Blue)
                .height(maxHeight/2)
                .align(Alignment.TopStart)
                .padding(8.dp),
            contentAlignment = Alignment.TopCenter
        ) {
            Column() {
                Text(text = "Example", fontSize = 44.sp)
            }
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Red)
                .align(Alignment.BottomStart)
                .height(maxHeight/2)
                .padding(8.dp),
            contentAlignment = Alignment.Center
        ){
            Column {

                Text(text = "Example", textAlign = TextAlign.End, color = DarkGray, fontSize = 12.sp)
            }
        }
    }
}