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









网友评论