An overview of the

ScrollableTabRow is the equivalent of the TabLayout used in previous development.

Attribute is introduced

  1. SelectedTabIndex Index of the currently selected item
  2. BackgroundColor backgroundColor
  3. Indicator Navigation bar style
  4. Divider Indicates the attribute of the dividing line
  5. 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…