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
运行后显示的样式,标题在其他的图标下面。
示例及运行动态效果如下。
@Composable
fun ComponentDemoMain() {
val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior()
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
MediumTopAppBar