Flutter Appbar 控件介绍

一、使用方法

  1. AppBar({
  2.     Key key,
  4.     this.leading,//在标题前面显示的一个控件，在首页通常显示应用的
  6.     logo；在其他界面通常显示为返回按钮
  8.     this.automaticallyImplyLeading = true,//控制是否应该尝试暗示前导小部件为null
  10.     this.title,//当前界面的标题文字
  12.     this.actions,//一个 Widget 列表，代表 Toolbar中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
  14.     this.flexibleSpace,//一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
  16.     this.bottom,//一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
  18.     this.elevation = 4.0,//? 材料设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值
  20.     this.backgroundColor,//APP bar 的颜色，默认值 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
  22.     this.brightness,//App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness
  24.     this.iconTheme,//App bar 上图标的主题 包括 颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconTheme
  26.     this.textTheme,//App bar 上的文字样式。默认值为 ThemeData().primaryTextTheme
  28.     this.primary = true,//此应用栏是否显示在屏幕顶部
  30.     this.centerTitle,//标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左
  32.     this.titleSpacing = NavigationToolbar.kMiddleSpacing, //横轴上标题内容 周围的间距
  34.     this.toolbarOpacity = 1.0, //顶部的工具栏部分的透明度 <=1.0
  36.     this.bottomOpacity = 1.0,//bottom的工具栏部分的透明度 <=1.0
  37.     })

二、常用属性

  1. 在标题前面显示的一个控件，在首页通常显示应用的logo；在其他界面通常显示为返回按钮

    1. leading: Icon(_selectedChoice.icon) ,

  2. 控制是否应该尝试暗示前导小部件为null

    1. automaticallyImplyLeading:true ,

  3. 当前界面的标题文字

    1. title: Text(_selectedChoice.title )

  4. 一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单

    1. actions: <Widget>[
    2.          new IconButton( // action button
    3.            icon: new Icon(choices[0].icon),
    4.            onPressed: () { _select(choices[0]); },
    5.          ),
    6.          new IconButton( // action button
    7.            icon: new Icon(choices[1].icon),
    8.            onPressed: () { _select(choices[1]); },
    9.          ),
    10.          new PopupMenuButton<Choice>( // overflow menu
    11.            onSelected: _select,
    12.            itemBuilder: (BuildContext context) {
    13.              return choices.skip(2).map((Choice choice) {
    14.                return new PopupMenuItem<Choice>(
    15.                  value: choice,
    16.                  child: new Text(choice.title),
    17.                );
    18.              }).toList();
    19.            },
    20.          )
    21.        ],

  5. 一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用

    1. //        flexibleSpace: Container(
    2. //          color: Colors.blue,
    3. //          width: MediaQuery.of(context).size.width,
    4. //          child: Text("aaaaaaaaaa"),
    5. //          height: 10,
    6. //        )

  6. 一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏

    1. bottom: new TabBar(
    2.          isScrollable: true,
    3.          tabs: choices.map((Choice choice) {
    4.            return new Tab(
    5.              text: choice.title,
    6.              icon: new Icon(choice.icon),
    7.            );
    8.          }).toList(),
    9.        )

  7. 材料设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar， 当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值

    1. elevation: 1

  8. APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用

    1. backgroundColor: Colors.red,

  9. App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness

    1. brightness:Brightness.light ,

  10. App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconTheme

    1. iconTheme: ThemeData().iconTheme,

  11. App bar 上的文字主题。默认值为 ThemeData（）.primaryTextTheme

    1. textTheme: ThemeData().accentTextTheme,

  12. 此应用栏是否显示在屏幕顶部

    1. primary: true,

  13. 标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左

    1. centerTitle: true,

  14. 横轴上标题内容 周围的间距

    1. titleSpacing: NavigationToolbar.kMiddleSpacing,

  15. 顶部的工具栏部分的透明度 <=1.0

    1. toolbarOpacity:1.0,

  16. bottom的工具栏部分的透明度 <=1.0

    1. bottomOpacity: 0.5,

    三、一个完整的例子
    Flutter 系列文章：Flutter Appbar 控件介绍 - 图1

    1. import 'package:flutter/material.dart';
    2. import 'ChoiceCard.dart';
    3. void main() => runApp(MyApp());
    4. class MyApp extends StatelessWidget{
    5. @override
    6. Widget build(BuildContext context) {
    7. return MaterialApp(
    8.   title: 'Text Demo',
    9.   theme: ThemeData(
    10.       primarySwatch: Colors.green
    11.   ),
    12.   home: AppbarPageDemo(title: 'Text Demo'),
    13. );
    14. }
    15. }
    16. class AppbarPageDemo extends StatefulWidget {
    17. AppbarPageDemo({Key key, this.title}) : super(key: key);
    18. final String title;
    19. @override
    20. _AppbarPageDemoState createState() => _AppbarPageDemoState();
    21. }
    22. class _AppbarPageDemoState extends State<AppbarPageDemo>{
    23. Choice _selectedChoice = choices[0]; // The app's "state".
    24. void _select(Choice choice) {
    25. setState(() { // Causes the app to rebuild with the new _selectedChoice.
    26.   _selectedChoice = choice;
    27. });
    28. }
    29. @override
    30. Widget build(BuildContext context) {
    31. var _name = "flutter ";
    32. return DefaultTabController(
    33.   length: choices.length,
    34.   child: Scaffold(
    35.     appBar: AppBar(
    36.       //1.在标题左侧显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮
    37.       leading: Icon(_selectedChoice.icon) ,
    38.       //2. ? 控制是否应该尝试暗示前导小部件为null
    39.       automaticallyImplyLeading:true ,
    40.       //3.当前界面的标题文字
    41.       title: Text(_selectedChoice.title ),
    42.       //4.一个 Widget 列表，代表 Toolbar 中所显示的菜单，对于常用的菜单，通常使用 IconButton 来表示；
    43.       //对于不常用的菜单通常使用 PopupMenuButton 来显示为三个点，点击后弹出二级菜单
    44.       actions: <Widget>[
    45.         new IconButton( // action button
    46.           icon: new Icon(choices[0].icon),
    47.           onPressed: () { _select(choices[0]); },
    48.         ),
    49.         new IconButton( // action button
    50.           icon: new Icon(choices[1].icon),
    51.           onPressed: () { _select(choices[1]); },
    52.         ),
    53.         new PopupMenuButton<Choice>( // overflow menu
    54.           onSelected: _select,
    55.           itemBuilder: (BuildContext context) {
    56.             return choices.skip(2).map((Choice choice) {//skip 跳开前面的两条数据
    57.               return new PopupMenuItem<Choice>(
    58.                 value: choice,
    59.                 child: new Text(choice.title),
    60.               );
    61.             }).toList();
    62.           },
    63.         )
    64.       ],
    65.       //5.一个显示在 AppBar 下方的控件，高度和 AppBar 高度一样，
    66.       // 可以实现一些特殊的效果，该属性通常在 SliverAppBar 中使用
    67. //        flexibleSpace: Container(
    68. //          color: Colors.blue,
    69. //          width: MediaQuery.of(context).size.width,
    70. //          child: Text("aaaaaaaaaa"),
    71. //          height: 10,
    72. //        ),
    73.       //6.一个 AppBarBottomWidget 对象，通常是 TabBar。用来在 Toolbar 标题下面显示一个 Tab 导航栏
    74.       bottom: new TabBar(
    75.         isScrollable: true,
    76.         tabs: choices.map((Choice choice) {
    77.           return new Tab(
    78.             text: choice.title,
    79.             icon: new Icon(choice.icon),
    80.           );
    81.         }).toList(),
    82.       ) ,
    83.       //7.? 材料设计中控件的 z 坐标顺序，默认值为 4，对于可滚动的 SliverAppBar，
    84.       // 当 SliverAppBar 和内容同级的时候，该值为 0， 当内容滚动 SliverAppBar 变为 Toolbar 的时候，修改 elevation 的值
    85.       elevation: 1,
    86.       //APP bar 的颜色，默认值为 ThemeData.primaryColor。改值通常和下面的三个属性一起使用
    87.       backgroundColor: Colors.red,
    88.       //App bar 的亮度，有白色和黑色两种主题，默认值为 ThemeData.primaryColorBrightness
    89.       brightness:Brightness.light ,
    90.       //App bar 上图标的颜色、透明度、和尺寸信息。默认值为 ThemeData().primaryIconTheme
    91.       iconTheme: ThemeData().iconTheme,
    92.       //App bar 上的文字主题。默认值为 ThemeData（）.primaryTextTheme
    93.       textTheme: ThemeData().primaryTextTheme,
    94.       //此应用栏是否显示在屏幕顶部
    95.       primary: true,
    96.       //标题是否居中显示，默认值根据不同的操作系统，显示方式不一样,true居中 false居左
    97.       centerTitle: true,
    98.       //横轴上标题内容 周围的间距
    99.       titleSpacing: NavigationToolbar.kMiddleSpacing,
    100.       //顶部的工具栏(toolbar)部分的透明度 <=1.0
    101.       toolbarOpacity:0.8,
    102.      //bottom的工具栏(tabbar)部分的透明度 <=1.0
    103.       bottomOpacity: 0.8,
    104.     ),
    105.     body : TabBarView(
    106.       children: choices.map((Choice choice) {
    107.         return new Padding(
    108.           padding: const EdgeInsets.all(16.0),
    109.           child: new ChoiceCard(choice: choice),
    110.         );
    111.       }).toList(),
    112.     ),
    113.   )
    114. );
    115. }
    116. }
    117. const List<Choice> choices = const <Choice>[
    118. const Choice(title: 'Car', icon: Icons.directions_car),
    119. const Choice(title: 'Bicycle', icon: Icons.directions_bike),
    120. const Choice(title: 'Boat', icon: Icons.directions_boat),
    121. const Choice(title: 'Bus', icon: Icons.directions_bus),
    122. const Choice(title: 'Train', icon: Icons.directions_railway),
    123. const Choice(title: 'Walk', icon: Icons.directions_walk),
    124. ];

作者：sometime-rock
链接：https://juejin.im/post/5c909c4e6fb9a070d7557284
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。