Flutter Scaffold

Scaffold 是 Flutter 中的一个 Widget，用于实现基本的 Material 设计视觉布局结构。 它可以快速创建一个通用移动应用程序，并且包含创建功能齐全且响应式 Flutter 应用程序所需的所有内容。 此 Widget 能够占据整个设备屏幕。 换句话说，我们可以说它主要负责为应用程序屏幕创建一个基础，子 Widget 可以在该基础上保持并呈现在屏幕上。 它提供了许多 Widget 或 API，用于显示抽屉（Drawer）、SnackBar、底部导航栏（BottomNavigationBar）、应用栏（AppBar）、悬浮操作按钮（FloatingActionButton）等等。

Scaffold 类是一个设置应用程序外观和设计的快捷方式，允许我们不手动构建各个视觉元素。 它可以节省我们为应用程序的外观和感觉编写更多代码的时间。 以下是 Scaffold Widget 类的构造函数和属性。

让我们详细了解上述所有属性。

1. appBar: 这是一个水平条，主要显示在 Scaffold Widget 的顶部。 它是 Scaffold Widget 的主要部分，显示在屏幕顶部。 没有此属性，Scaffold Widget 是不完整的。 它使用 appBar Widget，该 Widget 本身包含各种属性，例如 elevation、title、brightness 等。 请参见下面的示例

在上面的代码中，title 属性使用 Text Widget 在屏幕上显示文本。

2. body: 它是此 Widget 的另一个主要和必需属性，它将在 Scaffold 中显示主要内容。 它表示 appBar 下方以及浮动操作按钮（floatingActionButton）和抽屉（drawer）后面的位置。 默认情况下，body 内的 Widget 位于可用空间的左上角。 请参见下面的代码

在上面的代码中，我们在 body 属性中显示了文本"Welcome to Javatpoint!!"。 通过使用 Center Widget，此文本在页面中心对齐。 在这里，我们还使用 TextStyle Widget 设置了文本的样式，例如颜色、字体大小等。

3. drawer: 这是一个滑动面板，显示在 body 的侧面。 通常，它在移动设备上是隐藏的，但是用户可以从左向右或从右向左滑动以访问抽屉菜单。 它使用 Drawer Widget 属性，从 Scaffold 边缘沿水平方向滑动以显示应用程序中的导航链接。 抽屉的相应图标会自动在 appBar 属性中设置。 手势也设置为自动打开抽屉。 请参见以下代码。

在上面的代码中，我们使用 Scaffold 的 drawer 属性来创建抽屉。 我们还使用了一些其他 Widget 使其更具吸引力。 在 ListView Widget 中，我们将面板分为两个部分：Header 和 Menu。 DrawerHeader 属性修改面板的 Header，该 Header 还包含根据应用程序的图标或详细信息。 再次，我们使用 ListTile 在菜单中添加列表项。

4. floatingActionButton: 这是一个显示在右下角并浮动在 body 上方的按钮。 这是一个圆形图标按钮，它漂浮在屏幕内容上方的固定位置，以推广应用程序中的主要操作。 滚动页面时，其位置无法更改。 它使用 Scaffold.floatingActionButton 使用 FloatingActionButton Widget 属性。 请参见下面的代码

在上面的代码中，我们使用了 elevation 属性，该属性为按钮提供了阴影效果。 我们还使用 Icon Widget 使用预加载的 Flutter SDK 图标为按钮提供图标。 当用户点击该按钮时，将调用 onPressed() 属性，并且语句"I am Floating Action Button"将打印在控制台上。

5. backgroundColor: 此属性用于设置整个 Scaffold Widget 的背景色。

6. primary: 它用于告知 Scaffold 是否将显示在屏幕顶部。 其默认值为 true，这意味着 appBar 的高度由屏幕状态栏的高度扩展。

7. persistentFooterButton: 它是显示在 Scaffold Widget 底部的按钮列表。 这些属性项始终可见； 即使我们滚动 Scaffold 的 body。 它始终包含在 ButtonBar Widget 中。 它们在 body 下方但在 bottomNavigationBar 上方呈现。

在上面的代码中，我们使用了 RaisedButton，它显示在 Scaffold 的底部。 我们也可以使用 FlatButton 代替 RaisedButton。

8. bottomNavigationBar: 此属性类似于一个菜单，它在 Scaffold 底部显示导航栏。 在大多数移动应用程序中都可以看到它。 此属性允许开发人员在栏中添加多个图标或文本作为项目。 它应在 body 和 persistentFooterButtons 下方呈现。 请参见下面的代码

在上面的代码中，我们使用 BottomNavigationBar Widget 显示菜单栏。 fixedColor 属性用于活动图标的颜色。 BottomNavigationBarItems Widget 用于在栏中添加项目，其中包含文本和图标作为其子属性。 我们还使用了 onTap(int itemIndex) 函数，以便在我们点击项目时执行操作，该操作根据其索引位置进行。

9. endDrawer: 它类似于 drawer 属性，但是默认情况下，它们显示在屏幕的右侧。 可以从右向左或从左向右滑动它。

10. resizeToAvoidBottomInset: 如果为 true，则 body 和 Scaffold 的浮动 Widget 应自行调整大小以避免屏幕键盘。 bottom 属性定义屏幕键盘的高度。

11. floatingActionButtonLocation: 默认情况下，它位于屏幕的右下角。 它用于确定 floatingActionButton 的位置。 它包含许多预定义的常量，例如 centerDocked、centerFloat、endDocked、endFloat 等。

这就是关于 Scaffold 的各种属性的全部内容，这些属性使我们对 Scaffold Widget 有一个大致的了解。 其主要目的是熟悉 Flutter 应用程序中的不同属性及其用法。 如果我们想更详细地了解它，请参阅 Flutter 文档此处。

让我们看一个示例，其中我们尝试使用大多数 Scaffold 属性来快速轻松地了解此 Widget。

在此示例中，我们将看到一个带有 AppBar、BottomAppBar、FloatingActionButton、floatingActionButtonLocation 和 drawer 属性的 Scaffold Widget。

输出

当我们在 IDE 中运行此项目时，我们将看到 UI 如下面的屏幕截图所示。

如果单击可以在屏幕左上角看到的三行，我们将看到抽屉。 抽屉可以从右向左或从左向右滑动。 请参见下图。