Flutter 布局之 Scaffold

Flutter 布局之 Scaffold

先说明一点,在DEBUG模式下,即 flutter run 模式下,如果加载的东西多,或者动画复杂,会出现卡顿情况,但是当使用命令 flutter build apkflutter build ios 打包之后,几乎不会出现卡顿情况,非常流畅。


上篇简单的了解了 MaterialApp 之后,就可以定义一个APP了,不过定义好 MaterialApp 之后,就往上堆按钮文本,自己造头部导航,底部导航,这样显然太累了。为了简化开发,Flutter 提供了脚手架,即 Scaffold

一般来说,总是定义一个 Scaffold 当作实参传入到 MaterialApp 的 home 属性。换句话说,一个 MaterialApp 总是绑定一个 Scaffold。

Scaffold定义了一个 UI 框架,这个框架包含 头部导航栏,body,右下角浮动按钮,底部导航栏等。

说说我常用的几个参数吧

1,appBar

这个参数用来定义顶部导航栏,传入一个 AppBar 实例即可。

关于 AppBar ,有几个参数非常重要:

首先是leading,这个参数用来定义导航栏左上角的组件,通常是一个图标按钮,这里需要注意的一点是,当在同一个 MaterialApp 内使用路由跳转到一个新界面时,会自动将leading设置为一个返回按钮,当然可以自定义 leading 来覆盖默认的 leading 。

返回上一页用如下代码来实现:


然后是 title ,注意这个 title 是 Widget 类型:

这说明所有 Widget 组件都可以作为 title,不止是 Text。

比如下面这个界面就是把一个 Container 传入 title, 看顶部搜索框,其实是按钮,点击按钮后进入搜索页,这个按钮只是和搜索框长的像而已:

然后在 Container 内部再定义一个 Row ,来排版两个 FlatButton。

如果 AppBar 在不定义 leading 和 action 时, title 会自动占据这两个参数的空间,并且在两侧会各留一个 16.0 的边距。


下一个属性是 actions ,这个参数的类型是 Widget 数组,用来将一组 Widget (通常是图标按钮)数组放在右上角,


然后就是 bottom 了,如上图,三个 Tab 就是放在 AppBar 的 bottom 位置。当然 包含三个 Tab 的 TabBar 不一定非要放在这,TabBar 放到哪里都可以,因为他是一个 Widget,

像网易云音乐的APP,就是把 TabBar 放到了 title 的位置。。。

另外,关于 TabBar 很重要的一点是,它的外层要嵌套一层 DefaultTabController ,用来说明 Tab 的个数:


2,body

Scaffold 的下一个参数就是 body 了,用来展示 APP 的主体部分。主体部分大部分是通过组合 Container ColumnRowStack来实现的,关于这几个组件的布局以后再说。


3,floatingActionButton

Scaffold 还有一个参数是 floatingActionButton 了,这个参数用来定义浮动在 body 右下角的组件。Flutter 入门的那个例子中就用到了这个参数。


4,bottomNavigationBar

我用过的 Scaffold 的最后一个参数是 bottomNavigationBar, 顾名思义,就是底部导航栏,可以传入一个 Flutter 提供的 BottomNavigationBar 来实现导航栏,如下图,看底部导航栏:

这种实现方式的优点是省心,不用布局,缺点是不能自定义,如果想实现下面效果的底栏就无能为力了:

这就需要用到 BottomAppBar了,代码如下所示:

使用这种方式就可以随意组合 Container,Row 和 Column 来实现自定义布局。


关于 Scaffold ,我就了解这么多,明天继续写另一个话题。

发布于 2018-06-05

文章被以下专栏收录