概述
ScrollableTabRow就相当于以前开发中使用的TabLayout。
属性介绍
- selectedTabIndex 当前选择的item的索引
- backgroundColor背景颜色
- indicator导航条的样式
- divider 分割线属性
- Tab用于实现单条的item
简单实现
代码
@Composable fun Greeting() { val tabs = mutableListOf<String>( "安安安安卓", "鸿阳", "玉刚说", "成像魔影", "Android群英传", "code小生", "google开发者", "安安安安卓", ) var selectIndex by remember { mutableStateOf(0) } Scaffold(topBar = { TopAppBar(title = { Text(text = "我是title") }, navigationIcon = { Icon(Icons.Default.ArrowBack, "") }) }) { Box( Modifier .fillMaxWidth() .height(60.dp) ) { ScrollableTabRow( selectedTabIndex = selectIndex, modifier = Modifier .fillMaxWidth() .height(60.dp), backgroundColor = Color(0xff098765), indicator = { positions ->//设置滑动条的属性，默认是白色的 TabRowDefaults.Indicator( Modifier.tabIndicatorOffset(positions[selectIndex]), color = Color.Red ) }, divider = {//设置底部的分割线 Box( Modifier .fillMaxWidth() .height(2.dp) .background(Color.Cyan)) { } } ) { tabs.forEachIndexed { index, data -> Tab( modifier = Modifier.fillMaxHeight(),//这里必须设置高度，否则会展示不正常 selected = index == selectIndex, onClick = { selectIndex = index }) { Text(text = tabs[index], style = TextStyle(color = Color.White)) } } } } } } 复制代码
效果
