如何创建含下方内嵌行、支持滚动显隐的Top App Bar

要实现Top App Bar与下方筛选行作为整体滚动隐藏/显示，只需将两者合并为Scaffold的topBar内容，并调整间距即可，具体步骤如下：

1. 自定义顶部栏组件 #

将原有的CenterAlignedTopAppBar和筛选行RowFilters包裹在同一个Column中，作为一个整体的顶部栏组件，同时调整内边距消除多余间距：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomTopAppBar(scrollBehavior: TopAppBarScrollBehavior) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colorScheme.surface),
        verticalArrangement = Arrangement.spacedBy(0.dp)
    ) {
        CenterAlignedTopAppBar(
            title = { Text(text = "Test") },
            navigationIcon = { Icon(Icons.Default.Settings, contentDescription = "设置") },
            scrollBehavior = scrollBehavior,
            // 移除底部内边距，缩小与筛选行的间距
            contentPadding = PaddingValues(
                start = 16.dp,
                top = 16.dp,
                end = 16.dp,
                bottom = 0.dp
            )
        )
        RowFilters()
    }
}

@Composable
fun RowFilters() {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 16.dp, vertical = 8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        // 示例筛选标签，可根据需求自定义
        FilterChip(onClick = {}, label = { Text("全部") }, selected = true)
        FilterChip(onClick = {}, label = { Text("推荐") })
        FilterChip(onClick = {}, label = { Text("最新") })
    }
}

2. 重构主组件逻辑 #

将自定义顶部栏传入Scaffold的topBar参数，确保滚动行为正确关联到列表：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Test() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

    Scaffold(
        topBar = { CustomTopAppBar(scrollBehavior = scrollBehavior) }
    ) { padding ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .nestedScroll(scrollBehavior.nestedScrollConnection),
            contentPadding = PaddingValues(top = 0.dp)
        ) {
            items(100) {
                Text(text = "Item $it", modifier = Modifier.padding(16.dp))
            }
        }
    }
}

关键说明 #

• 整体滚动控制：将标题栏与筛选行合并为topBar内容后，两者会作为一个整体，跟随scrollBehavior的规则向下滚动隐藏、向上滚动显示。
• 间距优化：通过调整CenterAlignedTopAppBar的contentPadding移除底部内边距，同时给筛选行设置合适的上下内边距，实现类似YouTube的紧凑布局。
• 交互匹配：使用enterAlwaysScrollBehavior确保向上滚动时顶部栏立即显示，与YouTube的交互逻辑一致。

内容的提问来源于stack exchange，提问作者Danfb__