Compose UI 之 Small TopAppBar

原创

已于 2024-03-08 16:09:29 修改 · 1.3k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#Android #Compose

于 2024-03-06 12:15:17 首次发布

本文介绍了Jetpack Compose中的TopAppBar和CenterAlignedTopAppBar组件，详细阐述了它们的特点、参数及示例。TopAppBar提供高度可定制的Material Design 3风格应用栏，支持响应式布局；CenterAlignedTopAppBar则以居中标题为特点，适用于标题突出的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Small 类型 TopAppBar

AppBar 主要由2类，顶部 AppBar 和底部 AppBar。

顶部 AppBar：主要包含了标题，action菜单，导航菜单。
底部 AppBar：典型地包含主要导航项。

顶部 AppBar

顶部 AppBar 包含了 4 中类型： TopAppBar CenterAlignedTopAppBar MediumTopAppBar LargeTopAppBar

下面会逐个介绍 AppBar 的类型及给出示例。

TopAppBar

TopAppBar 是一个重要的组件，它提供了 Material Design 3 标准的顶部应用栏实现，提供现代化的外观和交互方式。TopAppBar 不仅具有直观且易用的 API，还支持高度定制，使得开发者能够轻松构建符合 Material Design 准则的应用界面。它通常包含应用的标题、导航图标、操作按钮等元素，为用户提供直观且一致的操作体验。

TopAppBar 特点

高度可定制：开发者可以通过各种参数来定制 TopAppBar 的外观和行为，包括颜色、标题、导航图标、操作按钮等。
响应式布局：TopAppBar 支持不同的屏幕尺寸和方向，能够自动调整布局以适应不同的设备。
易集成：TopAppBar 与其他 Compose 组件和布局可以无缝集成，使得 UI 构建更加灵活和高效。

TopAppBar 声明及参数

下面是 TopAppBar 的声明。

@Composable
fun TopAppBar(
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    navigationIcon: @Composable () -> Unit = {
   
   },
    actions: @Composable RowScope.() -> Unit = {
   
   },
    windowInsets: WindowInsets = TopAppBarDefaults.windowInsets,
    colors: TopAppBarColors = TopAppBarDefaults.topAppBarColors(),
    scrollBehavior: TopAppBarScrollBehavior? = null
): Unit

参数列表

参数名	类型	描述
title	@Composable () -> Unit	是应用栏的标题部分，通常显示页面相关的标题。它是一个标注 `@Composable` 的 lambda 表达式，你可以在其中放置任何你想要作为标题显示的 UI 元素，通常是一个 `Text` 组件。
modifier	Modifier	用于更改或增强 `TopAppBar` 的行为。例如，你可以使用 `Modifier.height()` 来设置应用栏的高度。
navigationIcon	@Composable () -> Unit	是一个可选的导航图标，通常用于显示一个返回按钮或菜单图标。和 `title` 一样，这也是一个标注 `@Composable` 的 lambda 表达式。
actions	@Composable RowScope.() -> Unit	用于在应用栏的右侧放置操作按钮或图标。开发者可以在这里添加多个按钮，它们将水平排列（因为 `RowScope`