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