Flutter开发者

Scaffold

2018-03-20

上期回顾

在前面的文章中,我们先后介绍了Flutter组件中常用组件和Layout的用法,但是这些组件基本上都是在Flutter中Scaffold中使用的,而我们好像还没有详细介绍过Scaffold,今天我们来具体了解下Scaffold的用法。

Scaffold

从前面的文章中我们知道,Scaffold的中文意思是脚手架,顾名思义就是帮助我们快速构建APP,那么我们还是来看下Scaffold能把我们做哪些把。

Scaffold构造方法

1
2
3
4
5
6
7
8
9
10
11
12
13
const Scaffold({
Key key,
this.appBar,//标题栏
this.body,//内容
this.floatingActionButton,//悬浮按钮
this.persistentFooterButtons,底部持久化现实按钮
this.drawer,//侧滑菜单左
this.endDrawer,//侧滑菜单右
this.bottomNavigationBar,//底部导航
this.backgroundColor,//背景颜色
this.resizeToAvoidBottomPadding: true,//自动适应底部padding
this.primary: true,试用使用primary主色
})

从构造方法我们可以看到,Scaffold可以帮助我们事先类似于Android中toolbar、悬浮按钮、汉堡菜单、底部导航效果
接下来我们来分别看看每一个参数的用法。

AppBar

appBar指的就是页面最上面用来显示页面状态或者信息的导航条

构造方法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
AppBar({
Key key,
this.leading,主导Widget
this.automaticallyImplyLeading: true,
this.title,
this.actions,其他附加最贱右上角
this.flexibleSpace,//伸缩空间,显示在title上面
this.bottom,//显示在title下面
this.elevation: 4.0,//阴影高度
this.backgroundColor,
this.brightness,明暗模式
this.iconTheme,
this.textTheme,
this.primary: true,是否是用primary
this.centerTitle,//标题是否居中
this.titleSpacing: NavigationToolbar.kMiddleSpacing,//title与leading的间隔
this.toolbarOpacity: 1.0,//title级文字透明度
this.bottomOpacity: 1.0,//底部文字透明度
})

现在,我们设置appbar的leading为一个Icon图标,title居中,设置elevation的阴影高度为10.0,设置appBar的背景颜色为红色。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import 'package:flutter/material.dart';

void main() {
runApp(new MaterialApp(
home: new MyApp(),
));
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
leading: new Icon(Icons.account_circle),
automaticallyImplyLeading: true,
title: new Text("AppBar"),
elevation: 10.0,
centerTitle: true,
backgroundColor: Colors.red,

),
);
}
}

运行看下效果:

上面每个参数都非常的简单,大家感兴趣的可以在下面试一下其他参数的作用,这里就不在做具体的介绍了,如果有哪个不明白,可以在文章最下面留言

FloatingActionButton

下面来看下floatingActionButton这个组件,这个组件可以说是跟Android上面的一模一样,连名字都是一样的

构造方法如下:

1
2
3
4
5
6
7
8
9
10
11
const FloatingActionButton({
Key key,
this.child,
this.tooltip,//提示,长按按钮提示文字
this.backgroundColor,//背景颜色
this.heroTag: const _DefaultHeroTag(),//页面切换动画Tag
this.elevation: 6.0,//阴影
this.highlightElevation: 12.0,//高亮阴影
@required this.onPressed,//点击事件
this.mini: false//是否使用小图标
})

我们试下增加一个Add图标,蓝色背景的FloatingActionButton

在前面代码的基础上新增如下代码:

1
2
3
4
5
floatingActionButton: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
backgroundColor: Colors.blue,
)

这样我们便在右下角新增了一个蓝色的FloatingActionButton,由于点击事件还没具体介绍,这里就先置为null,其他参数大家可以根据自己的兴趣尝试。

下面我们来看下PersistentFooterButtons

PersistentFooterButtons

persistentFooterButtons底部持久化显示按钮,说的是按钮,实际上你传什么Widget都是可以的,只不过作用不是很大,下面就简单介绍下这个组件的用法吧

在前面代码的基础上新增:

1
2
3
4
persistentFooterButtons: <Widget>[
new Icon(Icons.android),new Icon(Icons.book),new Icon(Icons.hourglass_empty),
new Icon(Icons.headset),new Icon(Icons.home),new Icon(Icons.help)
],

只是在页面的最下面显示了6个Icons而已。

用法就是这么简单,不再做具体的介绍了

Drawer

接下来就来看看Flutter中的菜单组件,drawer的基本用在前面的文章中已经简单介绍过,但是今天我们还是要好好来看看这个组件的用法

Drawer的构造方法:

1
2
3
4
5
const Drawer({
Key key,
this.elevation: 16.0,
this.child,
})

好吧,构造方法足够的简单霸气,elevation设置阴影宽度,child就是菜单区域

在上面代码基础上加上如下代码:

1
drawer: new Drawer();

由于Drawer会自动给appber加上leading,所以我们在这里需要把我们前面设置的leading给去掉


当然,现在打开菜单内容肯定是空白的。

在Flutter当中,默认我我们预置了很多好用的Widget,比如UserAccountsDrawerHeader和ListTile 。借助于这些Widget我们可以快速的构建出一个漂亮的菜单页面

接下来我们就使用这两个组件来构建一个侧滑菜单页。由于这连个Widget比较简单(篇幅太大)的原因,具体用法就不在具体介绍了,相信大家看了代码都能理解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
decoration:new BoxDecoration(image: new DecorationImage(image:new NetworkImage("http://t2.hddhhn.com/uploads/tu/201612/98/st93.png") )),
accountName: new Text("flyou"),
accountEmail: new Text("fangjaylong@gmail.com"),
currentAccountPicture: new CircleAvatar(
backgroundImage: new NetworkImage(
"http://tva2.sinaimg.cn/crop.0.3.707.707.180/a2f7c645jw8f6qvlbp1g7j20js0jrgrz.jpg"),)
),
new ListTile(leading: new Icon(Icons.refresh),title: new Text("刷新"),),
new ListTile(leading: new Icon(Icons.help),title: new Text("帮助"),),
new ListTile(leading: new Icon(Icons.chat),title: new Text("会话"),),
new ListTile(leading: new Icon(Icons.settings),title: new Text("设置"),),
],
),
),

当然,在代码当中我们还提到了CircleAvatar组件,这个组件看名字相比大家都会知道他是圆形头像的意思,不做具体说明了。

上面的代码中我们使用UserAccountsDrawerHeader快速构建了drawer的头部布局,头像和背景都是使用的网络图片加载,在菜单Item部分我们使用ListTile来处理,左边是一个图标右边是文字的样式。

代码虽然实现起来很简单,但是却能实现很好的界面效果,可见Flutter在界面上可是没少下功夫啊。

由于endDrawer 的使用方法和drawer完全一样,在这里就不在做具体的介绍了,感兴趣的小伙伴可以自己尝试下

BottomNavigationBar

接下来我们来看下 bottomNavigationBar底部导航按钮,相比大家都用过有类似功能的app这个底部导航按钮在Ios和Android中都非常的常见,所以今天也要给大家好好介绍下。

还是来看构造方法:

1
2
3
4
5
6
7
8
9
BottomNavigationBar({
Key key,
@required this.items,//List<BottomNavigationBarItem>
this.onTap,//tap事件
this.currentIndex: 0,//当前位置
BottomNavigationBarType type,//底部item类型,fixed自适应,shifting选择放大
this.fixedColor,选中颜色
this.iconSize: 24.0,//图标大小
})

构造方法很简单,大家自己看参数备注,默认需要传入BList参数,我们还是来看下BottomNavigationBarItem

1
2
3
4
5
const BottomNavigationBarItem({
@required this.icon,
@required this.title,
this.backgroundColor,
})

备注:

  • BottomNavigationBar金支持0-4个之间个底部按钮数量,超出4个系统将会报异常
  • 默认0-3个底部按钮数量时,BottomNavigationBar采用fixed的模式摆放底部按钮,当超过4个时默认使用shifting模式摆放底部按钮

好吧,相比于其他的Widget ,BottomNavigationBarItem的构造方法也可以说是非常简单明了的,一个Icon一个标题,好吧,那么我们还是来试下效果吧。

在上面代码的基础上增加如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

bottomNavigationBar: new BottomNavigationBar(
items: <BottomNavigationBarItem>[

new BottomNavigationBarItem(
icon: new Icon(Icons.shopping_cart), title: new Text("购物车")),
new BottomNavigationBarItem(
icon: new Icon(Icons.message), title: new Text("会话")),
new BottomNavigationBarItem(
icon: new Icon(Icons.person), title: new Text("我的")),
],
fixedColor: Colors.red,
currentIndex: 1,
),

选中的颜色我们设置为和我们appber一样的红色,默认让它选中第二个按钮。

关于每个按钮的点击事件,由于我们还没有讲过StatfulWidget,所以这篇文章就先不做介绍了,在下篇文章我们回来看下StatfulWidget和Flutter中的事件处理

小结

  1. Appber类似于Ios和Android中的toolbar
  2. FloatingActionButton悬浮按钮,很方便很简单
  3. Drawer类似于Ios和Android设备中的汉堡菜单
  4. BottomNavigationBar底部导航栏在移动端很常见

试一试

根据自己前面学习过的知识,结合本篇文章所学完成今天的做的例子,实现自己风格侧滑页面。

使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏

打赏请备注姓名或者昵称,方便我后期统计哦

关注公众号,及时查阅最新文章