适用于 Android jetpack compose 的自定义可滑动选项卡（材料 3）

Question

我如何制作或者是否有任何库可以用来创建可滑动的自定义选项卡，如下图所示[歌曲、专辑、艺术家、流派 => 选项卡]，

我知道已经有一些原生构建的选项卡，它们不能开箱即用地滑动，但经过一些工作，我们可以使它们可以滑动。但在这张图片中，桌子看起来很酷！我需要可以在我的 jetpack compose 应用程序中实现的完全相同或类似类型的选项卡。

Answer 1

看看

ScrollableTabRow

可组合项，它可能正是您正在寻找的。

@Composable
fun MyComposable() {

    val tabsList = listOf("Songs", "Albums", "Artists", "Genres", "Dates", "Folders")
    var selectedTabIndex by remember {
        mutableIntStateOf(0)
    }

    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Top
    ) {

        ScrollableTabRow(
            selectedTabIndex = selectedTabIndex,
            indicator = {}
        ) {
            tabsList.forEachIndexed{ tabIndex, tabName ->
                FilterChip(
                    modifier = Modifier.padding(4.dp).wrapContentSize(),
                    selected = tabIndex == selectedTabIndex,
                    border = null,
                    onClick = { selectedTabIndex = tabIndex },
                    label = {
                        Text(text = tabName, textAlign = TextAlign.Center)
                    }
                )
            }
        }
        
        // TODO add Pager
    }
}

这看起来像这样：

现在，您需要将其与

HorizontalPager

集成。