Android Jetpack Compose中OpenStreetMap与TabRow显示冲突问题

问题描述 #

在Jetpack Compose开发中，TabScreen包含Map和Monitors两个标签页：

• Monitors页显示正常
• 切换到Map页时TabRow视觉上消失，但点击原区域仍可切换标签
• 触摸地图时TabRow会部分显示

相关代码 #

TabScreen.kt

@Composable
fun TabScreen() {
    var tabIndex by remember { mutableStateOf(0) }

    val tabs = listOf("Map", "Monitors")

    Column(modifier = Modifier.fillMaxWidth()) {
        TabRow(
            selectedTabIndex = tabIndex,
            backgroundColor = Color.White,
            divider = {
                TabRowDefaults.Divider(
                    Modifier.wrapContentSize(Alignment.BottomStart),
                    color = Color(0xFFF4F4F4)
                )
            },
            indicator = { tabPositions: List<TabPosition> ->
                TabRowDefaults.Indicator(
                    Modifier.tabIndicatorOffset(tabPositions[tabIndex]),
                    color = Color.Yellow,
                    height = 4.dp
                )
            },
            contentColor = Color(0xFFC2C2C2)
        ) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    text = { Text(title) },
                    selected = tabIndex == index,
                    onClick = { tabIndex = index },
                    selectedContentColor = Color.Black,
                    unselectedContentColor = Color(0xFFC2C2C2)
                )
            }
        } 
        
        when (tabIndex) {
            0 -> MapScreen()
            1 -> MonitorsScreen()
        }
    }
}

MapScreen.kt

@Composable
fun MapScreen() {
    Box() {
        val context = LocalContext.current

        val cameraState = rememberCameraState {
            geoPoint = GeoPoint(-6.3970066, 106.8224316)
            zoom = 12.0
        }

        var mapProperties by remember {
            mutableStateOf(DefaultMapProperties)
        }

        val overlayManagerState = rememberOverlayManagerState()

        SideEffect {
            mapProperties = mapProperties
                .copy(isTilesScaledToDpi = true)
                .copy(tileSources = TileSourceFactory.MAPNIK)
                .copy(isEnableRotationGesture = true)
                .copy(zoomButtonVisibility = ZoomButtonVisibility.NEVER)
        }

        OpenStreetMap(
//        modifier = Modifier.fillMaxSize(),
            cameraState = cameraState,
            properties = mapProperties,
            overlayManagerState = overlayManagerState,
            onFirstLoadListener = {
                val copyright = CopyrightOverlay(context)
                overlayManagerState.overlayManager.add(copyright)
            }
        )
    }
}

解决方案 #

1. 修正TabScreen的布局约束 #

让根Column填充整个屏幕，并给内容区域添加weight(1f)，确保TabRow固定在顶部，内容区域只占据剩余空间：

@Composable
fun TabScreen() {
    var tabIndex by remember { mutableStateOf(0) }

    val tabs = listOf("Map", "Monitors")

    Column(modifier = Modifier.fillMaxSize()) {
        TabRow(
            selectedTabIndex = tabIndex,
            backgroundColor = Color.White,
            divider = {
                TabRowDefaults.Divider(
                    Modifier.wrapContentSize(Alignment.BottomStart),
                    color = Color(0xFFF4F4F4)
                )
            },
            indicator = { tabPositions: List<TabPosition> ->
                TabRowDefaults.Indicator(
                    Modifier.tabIndicatorOffset(tabPositions[tabIndex]),
                    color = Color.Yellow,
                    height = 4.dp
                )
            },
            contentColor = Color(0xFFC2C2C2)
        ) {
            tabs.forEachIndexed { index, title ->
                Tab(
                    text = { Text(title) },
                    selected = tabIndex == index,
                    onClick = { tabIndex = index },
                    selectedContentColor = Color.Black,
                    unselectedContentColor = Color(0xFFC2C2C2)
                )
            }
        } 
        
        // 用weight确保内容区域不挤压TabRow
        Box(modifier = Modifier.weight(1f)) {
            when (tabIndex) {
                0 -> MapScreen()
                1 -> MonitorsScreen()
            }
        }
    }
}

2. 给MapScreen的组件设置正确尺寸 #

给根Box和OpenStreetMap添加fillMaxSize，约束地图只在分配的空间内绘制：

@Composable
fun MapScreen() {
    Box(modifier = Modifier.fillMaxSize()) {
        val context = LocalContext.current

        val cameraState = rememberCameraState {
            geoPoint = GeoPoint(-6.3970066, 106.8224316)
            zoom = 12.0
        }

        var mapProperties by remember {
            mutableStateOf(DefaultMapProperties)
        }

        val overlayManagerState = rememberOverlayManagerState()

        SideEffect {
            mapProperties = mapProperties
                .copy(isTilesScaledToDpi = true)
                .copy(tileSources = TileSourceFactory.MAPNIK)
                .copy(isEnableRotationGesture = true)
                .copy(zoomButtonVisibility = ZoomButtonVisibility.NEVER)
        }

        OpenStreetMap(
            modifier = Modifier.fillMaxSize(),
            cameraState = cameraState,
            properties = mapProperties,
            overlayManagerState = overlayManagerState,
            onFirstLoadListener = {
                val copyright = CopyrightOverlay(context)
                overlayManagerState.overlayManager.add(copyright)
            }
        )
    }
}

原因分析 #

• 原TabScreen的Column仅设置fillMaxWidth，未限制高度，导致内容区域可能超出布局范围覆盖TabRow
• OpenStreetMap未设置尺寸约束，默认可能占据全屏空间，视觉上遮挡了上方的TabRow
• 添加weight(1f)和fillMaxSize后，布局层级和尺寸被明确约束，TabRow会始终固定在顶部，地图仅在下方的内容区域内显示

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