An overview of the
ScrollableTabRow is the equivalent of the TabLayout used in previous development.
Attribute is introduced
- SelectedTabIndex Index of the currently selected item
- BackgroundColor backgroundColor
- Indicator Navigation bar style
- Divider Indicates the attribute of the dividing line
- Tab is used to implement a single item
Simple implementation
code
@Composable
fun Greeting(a) {
val tabs = mutableListOf<String>(
"Safe and sound."."Hong Yang"."Yugang said."."Image Specter."."Android".Code "niche"."Google Developers"."Safe and sound.".)var selectIndex by remember {
mutableStateOf(0)
}
Scaffold(topBar = {
TopAppBar(title = { Text(text = "I am the 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 ->// Sets the slider's properties, which are white by default
TabRowDefaults.Indicator(
Modifier.tabIndicatorOffset(positions[selectIndex]),
color = Color.Red
)
},
divider = {// Set the bottom divider
Box(
Modifier
.fillMaxWidth()
.height(2.dp)
.background(Color.Cyan)) {
}
}
) {
tabs.forEachIndexed { index, data ->
Tab(
modifier = Modifier.fillMaxHeight(),// The height must be set, otherwise the display will be abnormal
selected = index == selectIndex,
onClick = {
selectIndex = index
}) {
Text(text = tabs[index], style = TextStyle(color = Color.White))
}
}
}
}
}
}
Copy the code
The effect
Git:github.com/ananananzhu…