Hello, Flutter(二)——Scaffold

前言：《Hello, Flutter》是我近期的一个写作计划。我的目标是写一篇篇简短的教程，提供给Flutter的初级用户，让他们能够快速掌握Flutter开发。代码地址：https://github.com/flycash/hello_flutter

这一篇我们简单学习一下Scaffold组件。Scaffold可以说是最为基础的组件了，在Flutter里面可以算是第二学到的组件了，第一学到的大概就是MaterialApp。

对于绝大部分应用来说，使用Scaffold来创建一个APP总是没错的。

简答用法

一般来说，我们在MaterialApp里面声明一个Scaffold：

这是一个空的Scaffold，里面什么东西都没有。

appBar

我们往里面加一个导航栏：

title接收Widget，所以我们可以说将其设置为一个icon：

body

现在我们再往里面设置body属性：

floatingActionButton

Scaffold里面的floatingActionButton、floatingActionButtonLocation与floatingActionButtonAnimator三个属性，在Hello, Flutter(一)——FloatingActionButton里面有更加详细的说明：

bottomNavigationBar

该属性就是配置屏幕下方的导航栏，或者标签，或者什么的。比如说在微信里面，类似于：

作为示例，我们传入一个IconButton的数组：

persistentFooterButtons

persistentFooterButtons有时候会让人有点困惑，因为它的效果看起来会和bottomNavigationBar比较接近。比如说我们复制一下上面的bottomNavigationBar的配置：

一般来说，persistentFooterButtons用得不太多，它在body之下，bottomNavigationBar之上。它还有一个特性是，会受到Scaffold设置的颜色之类属性的影响。准确来说，是因为persistentFooterButtons只接收一个数组，所以它的任何自身的属性，都是受到Scaffold的其它属性影响的。

而bottomNavigationBar则不会。它接收一个widget属性，这意味着，它自身的属性是由自己来控制的。

来看一个改变颜色的例子：

总结

Scaffold里面的这些属性，基本上就对应了整个APP非常重要的三个组成部分：顶部导航栏（appBar），主体（body），底部导航栏（bottomNavigationBar)。此外，还额外支持了常用的floatingActionButton，用于扩展一些操作。