Compose UI 之 Medium&Large TopAppBar

原创

已于 2024-03-08 16:08:47 修改 · 1.1k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#Android #Compose UI

于 2024-03-08 15:23:27 首次发布

本文详细介绍了Android Compose中的MediumTopAppBar和LargeTopAppBar，包括它们的特点、使用场景、动画效果和参数设置。MediumTopAppBar提供适中的高度和灵活布局，适合需要显示更多内容的应用；LargeTopAppBar则具有更大的空间，适用于强调标题和丰富内容的场景。两者都支持自定义布局和动画效果，能根据设备自动调整布局。

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

Medium&Large TopAppBar

前面文章介绍了 Small 类型的 TopAppBar：TopAppBar CenterAlignedTopAppBar 。下来介绍 Medium 和 Large 类型的 TopAppBar：MediumTopAppBar LargeTopAppBar 。

MediumTopAppBar

上面介绍了Small 类型的 TopAppBar (TopAppBar CenterAlignedTopAppBar)，这里再介绍一个 MediumTopAppBar。

MediumTopAppBar的特点

适中的高度：MediumTopAppBar 相较于传统的 TopAppBar 拥有适中的高度，这既保证了足够的空间来展示应用标题、图标和其他关键信息，又避免了因过高而占用过多屏幕空间的问题。
灵活的布局：MediumTopAppBar 支持自定义布局，开发者可以根据需求添加导航图标、标题、操作项等元素，并调整它们的位置和样式。
响应式设计：MediumTopAppBar 能够根据设备的屏幕尺寸和方向自动调整其布局和大小，确保在不同设备上都能呈现出良好的视觉效果。

使用场景分析

MediumTopAppBar 适用于那些需要展示更多信息或进行复杂操作的应用场景。例如，在新闻阅读应用中，可以使用 MediumTopAppBar 来展示新闻标题、搜索栏和分类按钮，以便用户能够更方便地浏览和筛选内容。

动画效果

MediumTopAppBar 支持多种动画效果，这些效果可以极大地提升用户体验。例如，当用户滚动页面时，MediumTopAppBar 可以逐渐隐藏或显示，这种滚动动画效果可以使得界面更加流畅和自然。此外，MediumTopAppBar 还可以与页面的其他元素进行联动，实现更复杂的动画效果。

MediumTopAppBar 声明及参数

MediumTopAppBar 的声明如下。

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

对于 MediumTopAppBar 的参数说明如下表。

参数名	类型	描述
title	@Composable () -> Unit	是应用栏的标题部分，通常显示页面相关的标题。它是一个标注 `@Composable` 的 lambda 表达式，你可以在其中放置任何你想要作为标题显示的 UI 元素，通常是一个 `Text` 组件。
modifier	Modifier	用于更改或增强 `TopAppBar` 的行为。例如，你可以使用 `Modifier.height()` 来设置应用栏的高度。
navigationIcon	@Composable () -> Unit	是一个可选的导航图标，通常用于显示一个返回按钮或菜单图标。和 `title` 一样，这也是一个标注 `@Composable` 的 lambda 表达式。
actions	@Composable RowScope.() -> Unit	用于在应用栏的右侧放置操作按钮或图标。开发者可以在这里添加多个按钮，它们将水平排列（因为 `RowScope` 表示一个水平行布局的范围）。
windowInsets	WindowInsets	定义了应用栏如何处理窗口插入，如状态栏、导航栏等。
colors	TopAppBarColors	用于定义应用栏的颜色方案。`TopAppBarColors` 是一个包含多个颜色属性的对象，如背景色、标题色等。`TopAppBarDefaults.mediumTopAppBarColors()` 提供了默认的颜色设置。
scrollBehavior	TopAppBarScrollBehavior?	当页面内容可以滚动时，`scrollBehavior` 定义了应用栏如何响应滚动事件。例如，应用栏可以在页面向下滚动时隐藏，并在页面向上滚动时重新显示。

MediumTopAppBar 的样式及使用示例

MediumTopAppBar 运行后显示的样式，标题在其他的图标下面。

MediumTopAppBar

示例及运行动态效果如下。

@Composable
fun ComponentDemoMain() {
   
   
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
   
   
            MediumTopAppBar