如需转载，请注明出处：Flutter学习笔记（16）--Scaffold脚手架、AppBar组件、BottomNavigationBar组件

今天的内容是Scaffold脚手架、AppBar组件、BottomNavigationBar组件，通过这三个组件，能大体构建出一个app的主页面，顶导和底导。

• Scaffold（脚手架组件）

Scaffold实现了基本的Material Design布局，只要是在Material Design中定义过的单个界面显示的布局控件元素，都可以使用Scaffold来绘制。

Scaffold组件属性及描述

属性名	类型	说明
appbar	AppBar	显示在界面顶部的一个AppBar
body	Widget	当前界面所显示的主要内容
floatingActionButton	Widget	在Material Design中定义的一个功能按钮
persistentFooterButtons	List<Widget>	固定在下方展示的按钮
drawer	Widget	侧边栏组件
bottomNavigationBar	Widget	显示在底部的导航栏按钮
backgroundColor	Color	背景颜色
resizeToAvoidBottomPadding	bool	控制界面内容body是否重新布局来避免底部被覆盖，比如当键盘显示时，重新布局避免键盘遮盖住内容，默认值为true

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Demo示例：

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Scaffold Demo',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Scaffold Demo'),
        ),
        body: new Center(
          child: new Text('Scaffold Dmoe 脚手架组件'),
        ),
        //底部导航按钮
        bottomNavigationBar: new BottomAppBar(
          child: new Container(width: 100,height: 100,),
        ),
        backgroundColor: Colors.deepOrange,
      ),
    );
  }
}

效果截图：

• AppBar（导航）

应用中的顶部导航有两种，一种AppBar一种SilveApprBar，这两种对应Android中的toolbar，AppBar和SliveApprBar都是继承自StatefulWidget，这两者的区别是AppBar是固定在应用的最上面，就是页面的最顶部，而SliveApprBar是可以跟随内容滚动的。

AppBar及SliverAppBar组件属性及描述

属性名	类型	默认值	说明
leading	Widget	null	在标题前面显示的一个组件，一般情况下展示按钮，比如返回按钮
title	Widget	null	通常显示为当前页面的标题名
actions	List<Widget>	null	一个Widget列表，一般情况下展示的也是按钮，比如搜索按钮等
bottom	PreferredSizeWidget	null	通常是TabBar，用来在ToolBar标题栏下面显示一个Tab导航栏
elevation	double	4	纸墨设计中组件的z坐标顺序，对于可滚动的SliverBar，当SliverBar和内容同级的时候，该值为0，当内容滚动SliverAppBar变为toolbar的时候，修改为elevation的值
flexibleSpace	Widget	null	一个显示在AppBar下方的组件，高度和AppBar的高度一样，可以实现一些特殊的效果，该属性通常在SliverAppBar中使用
backgroundcolor	Color	ThemeData.primaryColor	背景色
brightness	Brightness	ThemeData.primaryColorBrightness	AppBar的亮度，有白色和黑色两种主题
iconTheme	IconThemeData	ThemeData.primaryIconTheme	AppBar上图标的颜色、透明度和尺寸信息
textTheme	TextTheme	ThemeData.primaryTextTheme	AppBar上的文字样式
centerTitle	bool	true	标题显示是否居中，默认值根据不同的操作系统，显示的方式不一样

 

示例代码：

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

void main() => runApp(DemoApp());

class DemoApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowMaterialGrid: false,
      debugShowCheckedModeBanner: false,
      title: 'AppBar Demo',
      home: new Scaffold(
        appBar: new AppBar(
          backgroundColor: Colors.cyanAccent,//标题栏北京设置为浅蓝色
          leading: Icon(Icons.menu),//标题左侧按钮
          iconTheme: IconThemeData(color: Colors.amberAccent,opacity: 30,size: 25),//icon的主题，会作用到AppBar上的所有Icon(不包含IconButton，因为IconButton是个button)
          title: new Text('AppBar Demo',style: TextStyle(color: Colors.deepPurple,fontSize: 20),),//标题文案及字体样式设置
          actions: <Widget>[
            IconButton(icon: Icon