Jetpack Compose 之 TabRow

311 阅读1分钟

属性

@Composable
@UiComposable
fun TabRow(
    //选中的位置
    selectedTabIndex: Int,
    //composable 设置
    modifier: Modifier = Modifier,
    //背景色
    backgroundColor: Color = MaterialTheme.colors.primarySurface,
    //内容颜色
    contentColor: Color = contentColorFor(backgroundColor),
    //指示器设置
    indicator: @Composable @UiComposable
        (tabPositions: List<TabPosition>) -> Unit = @Composable { tabPositions ->
TabRowDefaults.Indicator(
                Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
            )
        } ,
     //分割线
    divider: @Composable @UiComposable () -> Unit =
        @Composable {
TabRowDefaults.Divider()
        } ,
    tabs: @Composable @UiComposable () -> Unit
) 

基础使用

var selectIndex by remember {
 mutableStateOf(0)
}
TabRow(selectedTabIndex = selectIndex) {
 Tab(selected = selectIndex == 0, onClick = {
selectIndex = 0
    } ) {
 Text(text = "Tab one")
    }

 Tab(selected = selectIndex == 1, onClick = {
selectIndex = 1
    } ) {
 Text(text = "Tab two")
    }
}