如何让GoogleMap与其他Composable合理分配高度？

问题描述 #

我编写了一个@Composable函数，用于渲染包含GoogleMap和多个Text组件的视图（视图截图：）。相关代码如下（不含底部导航，不影响问题）：

@Composable
fun ShowGoogleMap() {
    Scaffold {
        Column {
            GoogleMap()
            Text("hi")
            Text("hi")
            Text("hi")
            Text("hi")
        }
    }
}

目前遇到的问题是GoogleMap会占据全部可用高度，导致下方的Text组件无法显示。请问如何配置才能让GoogleMap与其他Composable组件共享高度，实现地图与Text组件堆叠展示？

解决方案 #

默认情况下GoogleMap会尽可能抢占所有可用空间，需要通过布局约束限制它的高度，让下方Text组件能正常显示，以下是几种实用实现方式：

方式1：给GoogleMap设置固定高度 #

直接通过Modifier.height()指定地图的具体高度，适合明确知道地图所需尺寸的场景：

@Composable
fun ShowGoogleMap() {
    Scaffold { padding ->
        Column(modifier = Modifier.padding(padding)) {
            GoogleMap(modifier = Modifier.height(200.dp))
            Text("hi")
            Text("hi")
            Text("hi")
            Text("hi")
        }
    }
}

方式2：按比例分配空间 #

使用Modifier.weight()给地图和Text组件分配不同的空间占比，比如让地图占据2/3高度，剩余部分留给Text：

@Composable
fun ShowGoogleMap() {
    Scaffold { padding ->
        Column(modifier = Modifier.padding(padding).fillMaxSize()) {
            GoogleMap(modifier = Modifier.weight(2f))
            Column(modifier = Modifier.weight(1f)) {
                Text("hi")
                Text("hi")
                Text("hi")
                Text("hi")
            }
        }
    }
}

注意必须给外层Column添加fillMaxSize()，否则weight无法生效。

方式3：地图占据剩余空间（Text用自身高度） #

如果希望Text组件只占用自身所需高度，剩余空间全部分配给地图，只需给地图添加weight(1f)：

@Composable
fun ShowGoogleMap() {
    Scaffold { padding ->
        Column(modifier = Modifier.padding(padding).fillMaxSize()) {
            GoogleMap(modifier = Modifier.weight(1f))
            Text("hi")
            Text("hi")
            Text("hi")
            Text("hi")
        }
    }
}

另外要注意：必须应用Scaffold提供的padding参数，避免内容被系统栏遮挡；外层Column添加fillMaxSize()是让布局能占满屏幕空间，确保weight或高度设置生效。

内容的提问来源于stack exchange，提问作者J. Doe