Flutter中的AppBar

AppBar 和 SliverAppBar 都是继承至 StatefulWidget 类，都代表 Toobar，二则的区别在于 AppBar 位置的固定的应用最上面的；而 SliverAppBar 是可以跟随内容滚动的。他们的主要属性如下：

• leading：在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
• title： Toolbar 中主要内容，通常显示为当前界面的标题文字
• actions：一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
• bottom：一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
• elevation：纸墨设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值
• flexibleSpace：一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
• backgroundColor：APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
• brightness：App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness
• iconTheme：App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData.primaryIconTheme
• textTheme： App bar 上的文字样式。默认值为 ThemeData.primaryTextTheme
• centerTitle：true or false 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样

下面一是一个简单的AppBar的练习demo:

import 'package:flutter/material.dart';
void main() => runApp(new MyAppBar());

//创建一个名为MyAppBar的类，无状态，用于页面的基本布局

class MyAppBar extends StatelessWidget{

@override

Widget build(BuildContext context) {

return new MaterialApp(

title: 'My appBar',  //APP的名称

            theme: new ThemeData(

primarySwatch: Colors.red  //定义 APP 的主题颜色

            ),

home: new MyAppBarHome()  //APP的默认页

        );

}

}

// 创建MyAppBarHome类, 这是 APP 的默认页，有状态的，因为我们做一些交互操作，必须有状态

class MyAppBarHome extends StatefulWidget{

@override

MyAppBarHomeState createState() => new MyAppBarHomeState();

}

// MyAppBarHome的状态类

class MyAppBarHomeState extends State<MyAppBarHome>{

// Scaffold key 定义一个脚手架的key，相当于html中元素的id吧

    GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

// @function 打开Drawer组件，下面要用到

    void _openDrawer(){

_scaffoldKey.currentState.openEndDrawer(); // open the drawer

    }

@override

Widget build(BuildContext context) {

return new Scaffold(

key: _scaffoldKey,  //为脚手架设置key

            appBar: new AppBar(

leading: new Icon(Icons.home),  //为appBar定义一个图标

                title: new Text('Flutter appBar widget'),  //appBar的标题

                centerTitle: true,  //appBar标题居中

                actions: <Widget>[   //向aciont中放了一个简单的图标按钮IconButton,它的方法(onPressed)为打开Drawer

                    new IconButton(

icon: new Icon(

Icons.menu,

color: Colors.white,

),

onPressed: _openDrawer

)

],

),

//一共有两种Drawer，一种是drawer，从app的左侧滑出，一种是endDrawer，从右侧滑出，我这里用的是从右侧出滑出的

            //drawer: new Drawer,

            endDrawer: new Drawer(

child: new ListView(

children: <Widget>[

new ListTile(

title: new Text("欢迎"),

),

new Divider(),

new ListTile(

title: new Text("设置"),

trailing: new Icon(Icons.settings),

onTap: () {}),

],

),

),

body: new Center(

child: new Text(

'赵客缦胡缨，吴钩霜雪明',

style: new TextStyle(

fontSize: 24.0,

color: Colors.red

),

),

),

floatingActionButton: new FloatingActionButton(

onPressed: null,

tooltip: 'Increment',

child: new Icon(Icons.add),

),

);

}

}

提示：如果appBar不设置leading并且使用了Drawer组件，Drawer会自动在appBar中添加一个按钮（Icons.menu）用来操作Drawer

APP 效果图：