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")}}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！