[Scaffold]Flutter中的脚手架

Posted 2021-04-29 flutter开发者

在前面的文章中，我们先后介绍了Flutter组件中常用组件和Layout的用法，但是我们这些组件基本上都是在Flutter中Scaffold中使用的，今天我们来具体介绍下Scaffold的用法。

Scaffold

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

Scaffold构造方法

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值得就是页面最上面用来显示页面状态或者信息的导航条

构造方法：

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的背景颜色为红色。

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上面的一模一样，连名字都是一样的

构造方法如下：

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

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

floatingActionButton: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
backgroundColor: Colors.blue,
)

这样我们便在右下角新增了一个蓝色的FloatingActionButton，其他参数大家可以根据自己的兴趣尝试。

PersistentFooterButtons

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

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

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的构造方法:

const Drawer({
Key key,
this.elevation: 16.0,
this.child,
})

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

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

drawer: new Drawer();

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

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

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

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

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

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

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

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

BottomNavigationBar

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

还是来看构造方法：

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:

const BottomNavigationBarItem({
@required this.icon,
@required this.title,
this.backgroundColor,
})

备注：

• BottomNavigationBar金支持0-4个之间个底部按钮数量，超出4个系统将会报异常

• 默认0-3个底部按钮数量时，BottomNavigationBar采用fixed的模式摆放底部按钮，当超过4个时默认使用shifting模式摆放底部按钮
  
  

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

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

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底部导航栏在移动端很常见

试一试

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

当然，有什么问题也欢迎大家在后台留言，我会在看到的第一时间回复大家的