应用栏 (App Bars)

源：Material Design 应用栏

应用栏是屏幕顶部或底部的容器，用于展示品牌、导航、搜索和操作。

1. 顶部应用栏 (TopAppBar)

M3 提供了四种类型的顶部栏，它们的主要区别在于滚动时的行为和标题的大小。

滚动行为

要启用“滚动隐藏”或“折叠”效果，需要配合 Scaffold 的 nestedScroll 修改器使用。

基础用法

@OptIn(ExperimentalMaterial3Api::class) // TopAppBar 目前还是实验性 API
@Composable
fun TopBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior()

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            TopAppBar(
                title = { Text("首页") },
                navigationIcon = {
                    IconButton(onClick = { /* 打开侧边栏 */ }) {
                        Icon(Icons.Filled.Menu, "Menu")
                    }
                },
                actions = {
                    IconButton(onClick = { /* 搜索 */ }) {
                        Icon(Icons.Filled.Search, "Search")
                    }
                    IconButton(onClick = { /* 更多 */ }) {
                        Icon(Icons.Filled.MoreVert, "More")
                    }
                },
                scrollBehavior = scrollBehavior
            )
        }
    ) { innerPadding ->
        LazyColumn(contentPadding = innerPadding) {
            items(50) { Text("Item $it", Modifier.padding(16.dp)) }
        }
    }
}

四种类型对比

组件	描述	适用场景
TopAppBar	小标题，单行	详情页、设置页
CenterAlignedTopAppBar	标题居中	首页、品牌展示
MediumTopAppBar	初始显示中等高度标题，滚动变小	分区首页
LargeTopAppBar	初始显示巨大标题，滚动变小	强调型首页

CenterAligned

CenterAlignedTopAppBar(
    title = { Text("居中标题") },
    colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
        containerColor = MaterialTheme.colorScheme.primaryContainer,
        titleContentColor = MaterialTheme.colorScheme.primary
    )
)

Large

LargeTopAppBar(
    title = { Text("我的设置") },
    navigationIcon = {
        IconButton(onClick = {}) { Icon(Icons.Filled.ArrowBack, null) }
    },
    scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
)

2. 底部应用栏 (BottomAppBar)

通常与悬浮按钮 (FAB) 配合使用。

Scaffold(
    bottomBar = {
        BottomAppBar(
            actions = {
                IconButton(onClick = {}) { Icon(Icons.Filled.Check, null) }
                IconButton(onClick = {}) { Icon(Icons.Filled.Edit, null) }
            },
            floatingActionButton = {
                FloatingActionButton(
                    onClick = {},
                    containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                    elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                ) {
                    Icon(Icons.Filled.Add, "Add")
                }
            }
        )
    }
) { innerPadding ->
    // ...
}