Jetpack Compose - TabRowScrollableTabRow

Posted 乐翁龙

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jetpack Compose - TabRowScrollableTabRow相关的知识,希望对你有一定的参考价值。

Jetpack Compose - TabRow、ScrollableTabRow

Compose系列文章,请点原文阅读。原文,是时候学习Compose了!

0、介绍

0.1、TabRow

TabRow包含一行Tab,并在当前选定的Tab下方显示一个指示器。 TabRow将其Tab在整行中均匀分布,每个选项卡占用相等的空间。

0.2、ScrollableTabRow

ScrollableTabRow包含一行Tab,并在当前选定的选项卡下方显示一个指示器。 ScrollableTabRow将其Tab从起始位置开始放置,并允许滚动到屏幕外放置的Tab。

0.3、Tab

通常用于TabRow内部,一般是使用文本或图标表示。

1、属性一览

【目前基于alpha09版本】

1.1、TabRow:

@Composable fun TabRow(
    selectedTabIndex: Int, 
    modifier: Modifier = Modifier, 
    backgroundColor: Color = MaterialTheme.colors.primarySurface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    indicator: (tabPositions: List<TabPosition>) -> Unit =  tabPositions ->
        TabDefaults.Indicator(
            Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
        )
    , 
    divider: () -> Unit = 
        TabDefaults.Divider()
    , 
    tabs: () -> Unit
): Unit

属性参数含义:

参数含义
modifier: Modifier = Modifier应用于布局的修饰符
selectedTabIndex: Int当前所选Tab的索引
backgroundColor: Color = MaterialTheme.colors.primarySurfaceTabRow的背景颜色
contentColor: Color = contentColorFor(backgroundColor)内容子级的颜色
indicator: (tabPositions: List) -> Unit = tabPositions -> TabDefaults.Indicator( Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex]) ) 代表当前选择哪个Tab的指示器。默认情况下,它是一个TabDefaults.Indicator,使用TabDefaults.tabIndicatorOffset修饰符为其位置设置动画
divider: () -> Unit = TabDefaults.Divider() 显示在TabRow底部的分隔线
tabs: () -> Unit此TabRow中的选项卡。通常包含多个选项卡。将测量此lambda中的每个元素,并将其均匀地放置在TabRow上,每个元素占据相等的空间。

1.2、ScrollableTabRow

@Composable fun ScrollableTabRow(
    selectedTabIndex: Int, 
    modifier: Modifier = Modifier, 
    backgroundColor: Color = MaterialTheme.colors.primarySurface, 
    contentColor: Color = contentColorFor(backgroundColor), 
    edgePadding: Dp = TabDefaults.ScrollableTabRowPadding, 
    indicator: (tabPositions: List<TabPosition>) -> Unit =  tabPositions ->
        TabDefaults.Indicator(
            Modifier.tabIndicatorOffset(tabPositions[selectedTabIndex])
        )
    , 
    divider: () -> Unit = 
        TabDefaults.Divider()
    , 
    tabs: () -> Unit
): Unit

该函数和上面函数参数类似,这里只介绍一个不同的参数:

参数含义
edgePadding: Dp = TabDefaults.ScrollableTabRowPaddingScrollableTabRow的开始和结束边缘与其内部选项卡之间的距离(默认是有52dp的一个padding)

1.3、Tab

关于tab有两个函数,如下:

@Composable fun Tab(
    selected: Boolean, 
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    text: () -> Unit = emptyContent(), 
    icon: () -> Unit = emptyContent(), 
    interactionState: InteractionState = remember  InteractionState() , 
    selectedContentColor: Color = AmbientContentColor.current, 
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)
): Unit
@Composable fun Tab(
    selected: Boolean, 
    onClick: () -> Unit, 
    modifier: Modifier = Modifier, 
    interactionState: InteractionState = remember  InteractionState() , 
    selectedContentColor: Color = AmbientContentColor.current, 
    unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium), 
    content: ColumnScope.() -> Unit
): Unit
参数含义
selected: Boolean该Tab是否被选中
onClick: () -> Unit点击该Tab时候的回调事件
modifier: Modifier = Modifier应用于该Tab的修饰符
text: () -> Unit = emptyContent()显示在该Tab中的文本
icon: () -> Unit = emptyContent()显示在该Tab中的图标
interactionState: InteractionState = remember InteractionState() 该Tab的交互状态
selectedContentColor: Color = AmbientContentColor.current选中该Tab时内容的颜色,以及水波纹的颜色
unselectedContentColor: Color = selectedContentColor.copy(alpha = ContentAlpha.medium)未选中该Tab时内容的颜色

当我们需要自定义Tab的时候可以使用第二个函数,自定义参数如下:

参数含义
content: ColumnScope.() -> Unit自定义Tab的内容,默认是纵向布局

2、使用示例

我们直接对比这两个函数来使用,在TabRow中我们定义了3个Tab,第三个Tab的内容很长,在ScrollableTabRow中我们定义了5个Tab,第五个Tab的内容很长,代码如下:


@Composable
fun TabRowDemo() 
    var state = remember  mutableStateOf(0) 
    val titles = listOf("标签1", "标签2", "这是很长的标签3")

    Column 
        TabRow(selectedTabIndex = state.value) 
            titles.forEachIndexed  index, title ->
                Tab(
                    text =  Text(title) ,
                    selected = state.value == index,
                    onClick =  state.value = index 
                )
            
        

        Spacer(modifier = Modifier.height(20.dp))

        Text(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            text = "第$state.value + 1个标签被选中了",
            style = MaterialTheme.typography.body1
        )
    


@Composable
fun ScrollableTabRowDemo() 
    var state = remember  mutableStateOf(0) 
    val titles = listOf("标签1", "标签2", "标签3", "标签4", "这是很长的标签5")
    Column 
        ScrollableTabRow(
            selectedTabIndex = state.value,
            modifier = Modifier.wrapContentWidth(),
            edgePadding = 16.dp
        ) 
            titles.forEachIndexed  index, title ->
                Tab(
                    text =  Text(title) ,
                    selected = state.value == index,
                    onClick =  state.value = index 
                )
            
        

        Spacer(modifier = Modifier.height(20.dp))

        Text(
            modifier = Modifier.align(Alignment.CenterHorizontally),
            text = "第$state.value + 1个标签被选中了",
            style = MaterialTheme.typography.body1
        )
    

所以实现效果如下所示:

3、版本更新

  • 暂无

4、未解决问题

目前TabRow的基本使用就是这样了,关于自定义的内容我们稍后再讲,现在还没有ViewPager的相关信息,很期待在Compose中ViewPager将会以什么样的方式登场。

以上是关于Jetpack Compose - TabRowScrollableTabRow的主要内容,如果未能解决你的问题,请参考以下文章

Android Jetpack Compose学习—— Jetpack compose基础布局

Android Jetpack Compose学习—— Jetpack compose基础布局

Android Jetpack Compose学习—— Jetpack compose入门

Android Jetpack Compose学习—— Jetpack compose入门

jetpack compose 接收返回参数

什么是Jetpack Compose?带你走进Jetpack Compose~