如何在 Jetpack Compose 中分屏

Question

我想像這樣分割我的屏幕，首先是一半（整個屏幕的 0.5f），然后是另一半（整個屏幕的 0.25f），然后再次將它分成一半（0.125f），但是什么時候做它，它與其中一個屏幕重疊並且沒有按預期拆分

 Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomCenter) {
        MapLoad()
        //0.5f of screen
        Column(
            modifier = Modifier
                .fillMaxHeight(0.5f)
                .fillMaxWidth()
                .background(color = Purple200)
        ) {

            //0.25f
            Column(
                modifier = Modifier
                    .fillMaxHeight(0.5f)
                    .fillMaxWidth()
                    .background(color = NotFoundLabel)
            ) {
                //0.125f
                Column(
                    modifier = Modifier
                        .fillMaxHeight(0.5f)
                        .fillMaxWidth()
                        .background(color = LightBlue)
                ) {

                    Text("SOME TEXT ONE",Modifier.fillMaxSize().background(color = Color.Red))
                }
                //0.125f
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .fillMaxHeight(0.5f)
                        .background(color = Color.Cyan)
                ) {
                    Text("SOME TEXT TWO",Modifier.fillMaxSize().background(color = Color.White))
                }
            }
        }
    }

奇怪的是，當我將最后一列的青色 color.fillMaxHeight(0.5f) 更改為 1f 時，它會填滿整個空間的一半。 有任何想法嗎？

Answer 1

Modifier.fillMaxHeight取部分視圖測量時可用的尺寸。

當您使用其中兩個時，第一個視圖占用可用大小的一半，第二個視圖占用剩余大小的一半。

您可以對第二個視圖使用 Modifier.fillMaxHeight(1f Modifier.fillMaxHeight(1f) ，但對兩個視圖都使用Modifier.weight(1f)似乎更清晰。