技術標籤：Jetpack-ComposeJetpackComposeTabTabRowScrollableTab

Jetpack Compose - TabRow、ScrollableTabRow

• • 0、介紹
  • • • 0.1、TabRow
      • 0.2、ScrollableTabRow
      • 0.3、Tab
  • 1、屬性一覽
  • • • 1.1、TabRow：
      • 1.2、ScrollableTabRow
      • 1.3、Tab
  • 2、使用示例
  • 3、版本更新
  • 4、未解決問題

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
 

屬性引數含義：

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

該函式和上面函式引數類似，這裡只介紹一個不同的引數：

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

當我們需要自定義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將會以什麼樣的方式登場。