前言:《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
,用于扩展一些操作。
网友评论