"如何在 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)
        }
    }
}

我可以在 dp 中使用 LocalConfiguration.current 獲取屏幕高度，並將我的頂框和底框對齊分別設置為 Alignment.TopCenter 和 Alignment.BottomCenter 但它不起作用。 第二個盒子（紅色的）留在藍色的上面。

Answer 1

您可以用 Column 包裝Box<\/code> 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)
            }
        }
    }
}

Answer 2

實現圖像的最佳方式是：

            Column(
                Modifier
                    .fillMaxSize()
                    .padding(8.dp)
            ) {
                Row(
                    Modifier
                        .fillMaxWidth()
                        .weight(1f)
                        .background(Blue),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Example", fontSize = 44.sp)
                }
                Row(
                    Modifier
                        .fillMaxWidth()
                        .weight(1f)
                        .background(Red),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Example", fontSize = 44.sp)
                }
            }