Jetpack Compose 中 Tab 内部填充的减少技巧：一个循序渐进的指南

Android

2024-04-22 06:47:31

Jetpack Compose 中减少 Tab 内部填充的技巧

问题：默认填充过大

在 Jetpack Compose 中，Tab 组件默认具有轻微的内部填充，这可能会在 Tab 和其内容之间留下不必要的间隙。对于某些设计来说，这种填充是不需要的，因为它会导致外观不紧凑。

解决方案：自定义 Tab 指示器

要减少单个 Tab 的内部填充，我们可以使用 Accompanist 库来创建自定义 Tab 指示器。这个指示器会覆盖默认指示器，并允许我们指定填充量。

实施步骤

导入依赖项：

在你的 build.gradle 文件中添加以下依赖项：

implementation("com.google.accompanist:accompanist-pager-indicators:0.16.0")

创建自定义 Tab 指示器：

创建如下自定义 Tab 指示器：

@Composable
fun CustomTabIndicator(
    modifier: Modifier,
    tabPositions: List<TabPosition>
) {
    val currentTabPosition = tabPositions[pagerState.currentPage]
    Box(
        modifier = modifier
            .customTabIndicatorOffset(currentTabPosition)
            .padding(horizontal = 4.dp, vertical = 8.dp) // 调整填充量
            .height(4.dp)
            .background(Color.Red)
    )
}

你可以根据需要调整 padding 值以修改填充量。

在 TabRow 中使用自定义指示器：

在你的 TabRow 组件中，使用自定义指示器：

TabRow(
    selectedTabIndex = pagerState.currentPage,
    indicator = { tabPositions ->
        CustomTabIndicator(tabPositions = tabPositions)
    }
) {
    // ... 其余代码保持不变
}

通过这些步骤，你就可以减少单个 Tab 的内部填充，从而创建更紧凑的外观。

示例代码

以下是一个完整的示例代码，演示如何使用 Accompanist 库来减少 Jetpack Compose 中 Tab 的内部填充：

@Composable
fun Tabs(tabNames: List<String>, pagerState: PagerState) {
    TabRow(
        selectedTabIndex = pagerState.currentPage,
        indicator = { tabPositions ->
            CustomTabIndicator(tabPositions = tabPositions)
        }
    ) {
        tabNames.forEachIndexed { index, name ->
            Tab(
                text = {
                    Text(
                        text = name,
                        style = MaterialTheme.typography.body2
                    )
                },
                selected = pagerState.currentPage == index,
                onClick = {
                    pagerState.animateScrollToPage(index)
                }
            )
        }
    }
}

@Composable
fun CustomTabIndicator(
    modifier: Modifier,
    tabPositions: List<TabPosition>
) {
    val currentTabPosition = tabPositions[pagerState.currentPage]
    Box(
        modifier = modifier
            .customTabIndicatorOffset(currentTabPosition)
            .padding(horizontal = 4.dp, vertical = 8.dp) // 调整填充量
            .height(4.dp)
            .background(Color.Red)
    )
}