Jetpack Compose中HorizontalPager遮挡Tab问题求助

问题根源是你的布局未使用垂直容器管理TabRow和HorizontalPager的层级关系，导致二者处于同一布局层级，HorizontalPager的fillMaxSize()会占据整个屏幕空间，进而覆盖上方的TabRow。

只需用Column包裹TabRow和HorizontalPager，并给HorizontalPager添加weight(1f)修饰符，就能让它自动填充TabRow下方的剩余屏幕空间，无需固定约束。

修改后的代码如下：

val pagerState = rememberPagerState()

val pages = listOf("One", "two")
val coroutineScope = rememberCoroutineScope()

Column(Modifier.fillMaxSize()) { // 用Column垂直排列组件，避免重叠
    TabRow(
        selectedTabIndex = pagerState.currentPage,
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                Modifier.pagerTabIndicatorOffset(pagerState, tabPositions)
            )
        }
    ) {
        pages.forEachIndexed { index, title ->
            Tab(
                text = { Text(title) },
                selected = pagerState.currentPage == index,
                onClick = {
                    coroutineScope.launch {
                        pagerState.scrollToPage(index)
                    }
                },
            )
        }
    }

    HorizontalPager(
        count = pages.size,
        state = pagerState,
        modifier = Modifier.weight(1f) // 让Pager填充TabRow下方的剩余空间
    ) { page ->
        when (page) {
            0 -> {
                Text(text = "hello", modifier = Modifier.fillMaxSize())
            }
            1 -> {

            }
        }
    }
}

关键说明：

• Column会将内部组件从上到下垂直排列，彻底解决层级重叠问题
• Modifier.weight(1f)让HorizontalPager占据Column中除TabRow外的所有剩余空间，自动适配不同屏幕尺寸
• 保留fillMaxSize()可让Pager内部内容填满自身区域

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