如何创建顶部应用栏，并在其下方包含一行

Question

我想创建一个顶部应用栏，其下方有一行，并使其（顶部栏+行）在向下滚动时隐藏并在向上滚动时出现。我希望该行成为顶部应用栏的一部分。

这是我做的一个小测试：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Test() {

    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

    Scaffold(topBar = {
        CenterAlignedTopAppBar(
            title = { Text(text = "Test") },
            navigationIcon = { Icon(Icons.Default.Settings, contentDescription = null) },
            scrollBehavior = scrollBehavior
        )
    }){ padding ->
        Column(Modifier.fillMaxSize().padding(padding)) {

            RowFilters()
            LazyColumn(Modifier.fillMaxSize().nestedScroll(scrollBehavior.nestedScrollConnection)) {
                items(100){
                    Text(text = "Item $it")
                }
            }
        }
    }
}

这就是我从中得到的：

如您所见，该行没有隐藏（显然），并且标题和行之间的间距太大。

基本上，我想要一个像 YouTube 一样的顶部栏（但在左侧有一个标题和一个图标）：一个较小的顶部栏，带有一行过滤器，向下滚动时隐藏，向上滚动时出现。

这是 YouTube 顶部栏的图片：

Answer 1

您无法将额外的可组合项放入

CenterAlignedTopAppBar

中，但在您的情况下，将

RowFilters

可组合项添加到另一个 CenterAlignedTopAppBar 中可能就足够了，如下所示：

Scaffold(
    topBar = {
        Column {
            CenterAlignedTopAppBar(
                title = { Text(text = "Test") },
                navigationIcon = { Icon(Icons.Default.Settings, contentDescription = null) },
                scrollBehavior = scrollBehavior
            )
            CenterAlignedTopAppBar(
                title = { RowFilters() },
                scrollBehavior = scrollBehavior
            )
        }
    }
) { padding ->
    //...
}

这样，颜色也会一致。

输出：