Compose中实现TabLayout+ViewPager的效果

1.滚动Tablayout实现

 val tabs = mutableListOf(
        "标题",
        "长标题",
        "超长标题",
        "标题1",
        "超长标题标题1",
    )
 val pageState = rememberPagerState{
        tabs.size
    }
val scope = rememberCoroutineScope()
Column(modifier = Modifier
        .fillMaxSize()){
        ScrollableTabRow(selectedTabIndex = pageState.currentPage,
            modifier = Modifier
                .fillMaxWidth()
                .height(52.dp),
            indicator = { positions ->
                Box(
                    Modifier
                        .fillMaxWidth()
                        .tabIndicatorOffset(positions[pageState.currentPage])
                        .height(5.dp)
                        .padding(horizontal = 20.dp)
                        .background(color = Color.Black, shape = RoundedCornerShape(5.dp))
                )
            },
            divider = {//设置底部的分割线
                TabRowDefaults.Divider()
            }, edgePadding = 0.dp) {
            tabs.forEachIndexed { index, s ->
                Tab(modifier = Modifier.fillMaxHeight(), selected = index==pageState.currentPage, onClick = { scope.launch {pageState.scrollToPage(index)}}){
                    Text(text = s, color = Color.White, fontSize = if(index==pageState.currentPage) 16.sp else 14.sp, fontWeight = if(index==pageState.currentPage) FontWeight.Bold else FontWeight.Normal)
                }
            }
        }
        HorizontalPager(state = pageState,modifier = Modifier.fillMaxSize()) {
            Text(text = tabs[it], modifier = Modifier.fillMaxSize(), fontSize = 50.sp)
        }
    }

其中 indicator可以使用默认实现，自己实现可以增加indicator间距，默认实现宽度是fillMaxWidth（）以下是官方默认实现：

TabRowDefaults.Indicator(
     Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
)
@Composable
    fun Indicator(
        modifier: Modifier = Modifier,
        height: Dp = IndicatorHeight,
        color: Color = LocalContentColor.current
    ) {
        Box(
            modifier
                .fillMaxWidth()
                .height(height)
                .background(color = color)
        )
    }

divider参考同理。

edgePadding官方默认有52.dp得左右padding。

2.非滚动TabLayout

        将ScrollableTabRow更换为TabRow即可，TabRow无edgePadding属性。