Compose中Google Maps占满Column高度致底部内容不可见的问题

问题原因 #

当isLocationPermissionGranted为true时底部内容不可见，核心原因是GoogleMap的内部布局特性与weight(1f)的约束交互冲突：

• 使用Spacer作为占位符时，它会严格遵循Compose的布局规则，仅占据分配的weight(1f)空间，底部内容自然能在剩余区域正常显示。
• 而GoogleMap启用isMyLocationEnabled = true后，内部渲染逻辑（比如加载我的位置控件、地图瓦片）会主动撑满父容器的全部可用空间，直接忽略weight分配的约束，把底部内容挤出屏幕外。

解决方法 #

方法一：用Box包裹GoogleMap，让Box承担weight约束

通过外层Box来严格遵守weight(1f)的布局规则，GoogleMap在Box内部撑满即可，不会影响下方内容：

Column(modifier = Modifier.fillMaxSize().background(Color.DarkGray)) {
    if (isLocationPermissionGranted) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
        ) {
            GoogleMap(
                modifier = Modifier.fillMaxSize(),
                cameraPositionState = cameraPositionState,
                properties = MapProperties(isMyLocationEnabled = true)
            ) {
                // 地图内容
            }
        }
    } else {
        Spacer(modifier = Modifier.weight(1f))
    }
    // 底部内容保持不变
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.White)
            .padding(16.dp)
    ) {
        Text("底部文本1")
        Spacer(modifier = Modifier.padding(8.dp))
        Text("底部文本2")
    }
}

方法二：调整weight的fill参数

修改weight的fill参数为false，让GoogleMap仅占据自身所需空间（但这种方式可能导致地图高度不足，更推荐方法一）：

GoogleMap(
    modifier = Modifier
        .fillMaxWidth()
        .weight(1f, fill = false),
    cameraPositionState = cameraPositionState,
    properties = MapProperties(isMyLocationEnabled = true)
) {
    // 地图内容
}

内容的提问来源于stack exchange，提问作者user924