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

奇怪的是，当我将最后一列的青色 .fillMaxHeight(0.5f) 更改为 1f 时，它填满了 space 的整个一半。有什么想法吗？

Answer 1

Modifier.fillMaxHeight取部分尺寸在测量视图时可用。

当您同时使用其中两个时，第一个视图会占用一半的可用尺寸，第二个会占用剩余尺寸的一半。

您可以对第二个视图使用 Modifier.fillMaxHeight(1f)，但对两个视图都使用 Modifier.weight(1f) 似乎更清楚。

如何在 Jetpack Compose 中分屏

How to split screen in Jetpack compose

android

android-jetpack-compose