Android Compose PrimaryTabRow、SecondaryTabRow （TabRow）自定义

TabRow废弃
对于主要指标标签页（导航页），请使用PrimaryTabRow。对于次要指标标签页（子页面），请使用SecondaryTabRow。 固定标签页会同时显示一组中的所有标签页。它们最适合快速切换相关内容，例如在地图中切换交通方式。要在固定标签页之间导航，请单击单个标签页，或在内容区域向左或向右滑动。 TabRow包含一行标签，并在当前选定的标签下方显示一个指示器。TabRow将其标签均匀地分布在整行上，每个标签占据相同的空间。有关不强制等大小并允许滚动到不适合屏幕的标签页的标签行，请参见ScrollableTabRow。

val tabs = listOf("日", "周", "月", "年")
    val pagerState = rememberPagerState(pageCount = { tabs.size })
    val scope = rememberCoroutineScope()

    Column {
        SecondaryTabRow(
            selectedTabIndex = pagerState.currentPage,
            modifier = Modifier
                .padding(horizontal = 16.cx)
                .clip(RoundedCornerShape(30.cx)),
            //底色
            containerColor = Color(0xFFD9D9D9),
            //选中状态
            indicator = {
                Box(
                    modifier = Modifier
                        .tabIndicatorOffset(pagerState.currentPage)
                        .fillMaxSize()
                        .zIndex(-1f)
                        .padding(2.cx)
                        .background(
                            color = Purple,
                            shape = RoundedCornerShape(30.cx)
                        )
                )
            },
            //下边线
            divider = {}
        ) {
            tabs.forEachIndexed { index, title ->
                Box(
                    modifier = Modifier
                        .height(36.cx)
                        .throttleClick {
                            scope.launch {
                                pagerState.animateScrollToPage(index)
                            }
                        },
                    contentAlignment = Alignment.Center
                ){
                    Text(
                        title,
                        color = if(pagerState.currentPage == index) BLACK else GreyText,
                        textAlign = TextAlign.Center,
                        fontWeight = FontWeight.W500)
                }
            }
        }