Jetpack Compose TabRow指示器修改

默认TabRow写法及样式

TabRow(selectedTabIndex = 0) {
        Tab(selected = false, onClick = { }) {
            Text(text = "标签1")
        }
        Tab(selected = false, onClick = { }) {
            Text(text = "标签2")
        }
        Tab(selected = false, onClick = { }) {
            Text(text = "标签3")
        }
    }

修改底部白色指示器的长度

指示器也是一个Compose组件，修改TabRow的参数字段indicator为自己的Compose对象即可。下列代码展示的是将指示器长度改为Tab宽度的1/4，并修改指示器高度为1dp

TabRow(selectedTabIndex = 0, indicator = @Composable { tabPositions ->

        val currentTabPosition = tabPositions[0]
        //修改指示器长度
        val currentTabWidth by animateDpAsState(
            targetValue = currentTabPosition.width / 4,
            animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing)
        )
        //修改指示器偏移量为居中
        val indicatorOffset by animateDpAsState(
            targetValue = currentTabPosition.left + (currentTabPosition.width / 2 - currentTabWidth / 2),
            animationSpec = tween(durationMillis = 250, easing = FastOutSlowInEasing)
        )
        //自带的Indicator指示器，只需改Modifier就可以了
        TabRowDefaults.Indicator(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentSize(Alignment.BottomStart)
                .offset(x = indicatorOffset)
                .width(currentTabWidth)
                .height(1.dp)//修改指示器高度为1dp，默认2dp
        )
    }) {
        Tab(selected = false, onClick = { }) {
            Text(text = "标签1")
        }
        Tab(selected = false, onClick = { }) {
            Text(text = "标签2")
        }
        Tab(selected = false, onClick = { }) {
            Text(text = "标签3")
        }
    }