创建脚手架组件以组合UI

在 Material Design 中,脚手架是一个基础结构,它为复杂的 UI 提供了一个标准化的平台。它将 UI 的不同部分(例如应用栏和浮动操作按钮)组合在一起,使应用的外观和感觉保持一致。

版本兼容性

此实现要求您的项目 minSDK 设置为 API 级别 21 或更高。

依赖项

创建脚手架

以下示例提供了如何实现 Scaffold 的完整示例。它包含一个顶部应用栏、底部应用栏和一个与 Scaffold 的内部状态交互的浮动操作按钮。

结果

An implementation of scaffold that contains simple top and bottom app bars, as well as a floating action button that iterates a counter. The inner content of the scaffold is simple text that explains the component.
图 1. 脚手架的实现。

要点

Scaffold 可组合项提供了一个简单的 API,您可以使用它根据 Material Design 指南快速组装应用的结构。Scaffold 将多个可组合项作为参数接受。其中包括以下内容

  • topBar:屏幕顶部的应用栏。
  • bottomBar:屏幕底部的应用栏。
  • floatingActionButton:一个悬停在屏幕右下角的按钮,您可以使用它来显示关键操作。

有关如何同时实现顶部和底部应用栏的更详细示例,请参阅应用栏页面。

您还可以像对其他容器一样传递 Scaffold 内容。它将 innerPadding 值传递给 content lambda,然后您可以在子可组合项中使用它。

包含本指南的收藏集

本指南是这些精选的快速指南收藏集的一部分,涵盖更广泛的 Android 开发目标

了解如何使用标准化平台构建复杂的 UI。脚手架将 UI 的不同部分组合在一起,使应用的外观和感觉保持一致。
了解可组合函数如何使您能够轻松创建基于 Material Design 设计系统的精美 UI 组件。

有问题或反馈?

访问我们的常见问题页面,了解快速指南,或与我们联系并告诉我们您的想法。