Flutter 控件之 AppBar 和 SliverAppBar

AppBar 和 SliverAppBar 是纸墨设计中的 App Bar，也就是 Android 中的 Toolbar，关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容。

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： 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样

比如下面的代码在 App bar 上添加了功能按钮和 Tabs，并指定标题居中显示、修改 App bar 背景颜色 等：

Flutter 控件之 AppBar 和 SliverAppBar

作者: rain 分类: Dart, 移动 发布时间: 2017-03-29 22:56 6 0条评论

AppBar 和 SliverAppBar 是纸墨设计中的 App Bar，也就是 Android 中的 Toolbar，关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容。

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： 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样

比如下面的代码在 App bar 上添加了功能按钮和 Tabs，并指定标题居中显示、修改 App bar 背景颜色 等：

 

Java

 

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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60

@override   Widget build(BuildContext context) {     // This method is rerun every time setState is called, for instance     // as done by the _incrementCounter method above.     // The Flutter framework has been optimized to make rerunning     // build methods fast, so that you can just rebuild anything that     // needs updating rather than having to individually change     // instances of widgets.     return new Scaffold(       appBar: new AppBar(         title: new Text(config.title),         leading: new Icon(Icons.home),         backgroundColor: Colors.amber[500],         centerTitle: true,         actions: <Widget>[           new IconButton(               icon: new Icon(Icons.add_alarm),               tooltip: 'Add Alarm',               onPressed: () {                 // do nothing               }),           new PopupMenuButton<String>(               itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[                     new PopupMenuItem<String>(                         value: "price", child: new Text('Sort by price')),                     new PopupMenuItem<String>(                         value: "time", child: new Text('Sort by time')),                   ],               onSelected: (String action) {                 switch (action) {                   case "price":                     // do nothing                     break;                   case "time":                     // do nothing                     break;                 }               })         ],         bottom: new TabBar(           isScrollable: true,           tabs: <Widget>[             new Tab(text: "Tabs 1"),             new Tab(text: "Tabs 2"),             new Tab(text: "Tabs 3"),             new Tab(text: "Tabs 4"),             new Tab(text: "Tabs 5"),             new Tab(text: "Tabs 6"),           ],         ),       ),       body: body,       floatingActionButton: new FloatingActionButton(         onPressed: _incrementCounter,         tooltip: 'Increment',         child: new Icon(Icons.add),       ), // This trailing comma makes auto-formatting nicer for build methods.     );   }

显示效果如下：