Flutter 系列文章：Flutter Appbar 控件介紹

Flutter Appbar 控件介紹

1、使用方法

AppBar({
    Key key,
    
    this.leading,//在標題前面顯示的一個控件，在首頁一般顯示應用的
    
    logo；在其餘界面一般顯示爲返回按鈕
    
    this.automaticallyImplyLeading = true,//控制是否應該嘗試暗示前導小部件爲null
    
    this.title,//當前界面的標題文字
    
    this.actions,//一個 Widget 列表，表明 Toolbar中所顯示的菜單，對於經常使用的菜單，一般使用 IconButton 來表示；對於不經常使用的菜單一般使用 PopupMenuButton 來顯示爲三個點，點擊後彈出二級菜單
    
    this.flexibleSpace,//一個顯示在 AppBar 下方的控件，高度和 AppBar 高度同樣，能夠實現一些特殊的效果，該屬性一般在 SliverAppBar 中使用
    
    this.bottom,//一個 AppBarBottomWidget 對象，一般是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄
    
    this.elevation = 4.0,//? 材料設計中控件的 z 座標順序，默認值爲 4，對於可滾動的 SliverAppBar，當 SliverAppBar 和內容同級的時候，該值爲 0， 當內容滾動 SliverAppBar 變爲 Toolbar 的時候，修改 elevation 的值
    
    this.backgroundColor,//APP bar 的顏色，默認值 ThemeData.primaryColor。改值一般和下面的三個屬性一塊兒使用
    
    this.brightness,//App bar 的亮度，有白色和黑色兩種主題，默認值爲 ThemeData.primaryColorBrightness
    
    this.iconTheme,//App bar 上圖標的主題 包括 顏色、透明度、和尺寸信息。默認值爲 ThemeData().primaryIconTheme
    
    this.textTheme,//App bar 上的文字樣式。默認值爲 ThemeData().primaryTextTheme
    
    this.primary = true,//此應用欄是否顯示在屏幕頂部
    
    this.centerTitle,//標題是否居中顯示，默認值根據不一樣的操做系統，顯示方式不同,true居中 false居左
   
    this.titleSpacing = NavigationToolbar.kMiddleSpacing, //橫軸上標題內容 周圍的間距
   
    this.toolbarOpacity = 1.0, //頂部的工具欄部分的透明度 <=1.0
    
    this.bottomOpacity = 1.0,//bottom的工具欄部分的透明度 <=1.0
    })
複製代碼

2、經常使用屬性

1. 在標題前面顯示的一個控件，在首頁一般顯示應用的logo；在其餘界面一般顯示爲返回按鈕

leading: Icon(_selectedChoice.icon) ,
複製代碼

2. 控制是否應該嘗試暗示前導小部件爲null

automaticallyImplyLeading:true ,
複製代碼

3. 當前界面的標題文字

title: Text(_selectedChoice.title )
複製代碼

4. 一個 Widget 列表，表明 Toolbar 中所顯示的菜單，對於經常使用的菜單，一般使用 IconButton 來表示；對於不經常使用的菜單一般使用 PopupMenuButton 來顯示爲三個點，點擊後彈出二級菜單

actions: <Widget>[
            new IconButton( // action button
              icon: new Icon(choices[0].icon),
              onPressed: () { _select(choices[0]); },
            ),
            new IconButton( // action button
              icon: new Icon(choices[1].icon),
              onPressed: () { _select(choices[1]); },
            ),
            new PopupMenuButton<Choice>( // overflow menu
              onSelected: _select,
              itemBuilder: (BuildContext context) {
                return choices.skip(2).map((Choice choice) {
                  return new PopupMenuItem<Choice>(
                    value: choice,
                    child: new Text(choice.title),
                  );
                }).toList();
              },
            )
          ],
複製代碼

5. 一個顯示在 AppBar 下方的控件，高度和 AppBar 高度同樣，能夠實現一些特殊的效果，該屬性一般在 SliverAppBar 中使用

//        flexibleSpace: Container(
//          color: Colors.blue,
//          width: MediaQuery.of(context).size.width,
//          child: Text("aaaaaaaaaa"),
//          height: 10,
//        )
複製代碼

6. 一個 AppBarBottomWidget 對象，一般是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄

bottom: new TabBar(
            isScrollable: true,
            tabs: choices.map((Choice choice) {
              return new Tab(
                text: choice.title,
                icon: new Icon(choice.icon),
              );
            }).toList(),
          ) 
複製代碼

7. 材料設計中控件的 z 座標順序，默認值爲 4，對於可滾動的 SliverAppBar， 當 SliverAppBar 和內容同級的時候，該值爲 0， 當內容滾動 SliverAppBar 變爲 Toolbar 的時候，修改 elevation 的值

elevation: 1
複製代碼

8. APP bar 的顏色，默認值爲 ThemeData.primaryColor。改值一般和下面的三個屬性一塊兒使用

backgroundColor: Colors.red,

複製代碼

9. App bar 的亮度，有白色和黑色兩種主題，默認值爲 ThemeData.primaryColorBrightness

brightness:Brightness.light ,

複製代碼

10. App bar 上圖標的顏色、透明度、和尺寸信息。默認值爲 ThemeData().primaryIconTheme

iconTheme: ThemeData().iconTheme,

複製代碼

11. App bar 上的文字主題。默認值爲 ThemeData（）.primaryTextTheme

textTheme: ThemeData().accentTextTheme,

複製代碼

12. 此應用欄是否顯示在屏幕頂部

primary: true,

複製代碼

13. 標題是否居中顯示，默認值根據不一樣的操做系統，顯示方式不同,true居中 false居左

centerTitle: true,

複製代碼

14. 橫軸上標題內容 周圍的間距

titleSpacing: NavigationToolbar.kMiddleSpacing,

複製代碼

15. 頂部的工具欄部分的透明度 <=1.0

toolbarOpacity:1.0,

複製代碼

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

bottomOpacity: 0.5,

複製代碼

3、一個完整的例子

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

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

class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Text Demo',
      theme: ThemeData(
          primarySwatch: Colors.green
      ),
      home: AppbarPageDemo(title: 'Text Demo'),
    );
  }
}


class AppbarPageDemo extends StatefulWidget {
  AppbarPageDemo({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _AppbarPageDemoState createState() => _AppbarPageDemoState();
}

class _AppbarPageDemoState extends State<AppbarPageDemo>{
  Choice _selectedChoice = choices[0]; // The app's "state". void _select(Choice choice) { setState(() { // Causes the app to rebuild with the new _selectedChoice. _selectedChoice = choice; }); } @override Widget build(BuildContext context) { var _name = "flutter "; return DefaultTabController( length: choices.length, child: Scaffold( appBar: AppBar( //1.在標題左側顯示的一個控件，在首頁一般顯示應用的 logo；在其餘界面一般顯示爲返回按鈕 leading: Icon(_selectedChoice.icon) , //2. ? 控制是否應該嘗試暗示前導小部件爲null automaticallyImplyLeading:true , //3.當前界面的標題文字 title: Text(_selectedChoice.title ), //4.一個 Widget 列表，表明 Toolbar 中所顯示的菜單，對於經常使用的菜單，一般使用 IconButton 來表示； //對於不經常使用的菜單一般使用 PopupMenuButton 來顯示爲三個點，點擊後彈出二級菜單 actions: <Widget>[ new IconButton( // action button icon: new Icon(choices[0].icon), onPressed: () { _select(choices[0]); }, ), new IconButton( // action button icon: new Icon(choices[1].icon), onPressed: () { _select(choices[1]); }, ), new PopupMenuButton<Choice>( // overflow menu onSelected: _select, itemBuilder: (BuildContext context) { return choices.skip(2).map((Choice choice) {//skip 跳開前面的兩條數據 return new PopupMenuItem<Choice>( value: choice, child: new Text(choice.title), ); }).toList(); }, ) ], //5.一個顯示在 AppBar 下方的控件，高度和 AppBar 高度同樣， // 能夠實現一些特殊的效果，該屬性一般在 SliverAppBar 中使用 // flexibleSpace: Container( // color: Colors.blue, // width: MediaQuery.of(context).size.width, // child: Text("aaaaaaaaaa"), // height: 10, // ), //6.一個 AppBarBottomWidget 對象，一般是 TabBar。用來在 Toolbar 標題下面顯示一個 Tab 導航欄 bottom: new TabBar( isScrollable: true, tabs: choices.map((Choice choice) { return new Tab( text: choice.title, icon: new Icon(choice.icon), ); }).toList(), ) , //7.? 材料設計中控件的 z 座標順序，默認值爲 4，對於可滾動的 SliverAppBar， // 當 SliverAppBar 和內容同級的時候，該值爲 0， 當內容滾動 SliverAppBar 變爲 Toolbar 的時候，修改 elevation 的值 elevation: 1, //APP bar 的顏色，默認值爲 ThemeData.primaryColor。改值一般和下面的三個屬性一塊兒使用 backgroundColor: Colors.red, //App bar 的亮度，有白色和黑色兩種主題，默認值爲 ThemeData.primaryColorBrightness brightness:Brightness.light , //App bar 上圖標的顏色、透明度、和尺寸信息。默認值爲 ThemeData().primaryIconTheme iconTheme: ThemeData().iconTheme, //App bar 上的文字主題。默認值爲 ThemeData（）.primaryTextTheme textTheme: ThemeData().primaryTextTheme, //此應用欄是否顯示在屏幕頂部 primary: true, //標題是否居中顯示，默認值根據不一樣的操做系統，顯示方式不同,true居中 false居左 centerTitle: true, //橫軸上標題內容 周圍的間距 titleSpacing: NavigationToolbar.kMiddleSpacing, //頂部的工具欄(toolbar)部分的透明度 <=1.0 toolbarOpacity:0.8, //bottom的工具欄(tabbar)部分的透明度 <=1.0 bottomOpacity: 0.8, ), body : TabBarView( children: choices.map((Choice choice) { return new Padding( padding: const EdgeInsets.all(16.0), child: new ChoiceCard(choice: choice), ); }).toList(), ), ) ); } } const List<Choice> choices = const <Choice>[ const Choice(title: 'Car', icon: Icons.directions_car), const Choice(title: 'Bicycle', icon: Icons.directions_bike), const Choice(title: 'Boat', icon: Icons.directions_boat), const Choice(title: 'Bus', icon: Icons.directions_bus), const Choice(title: 'Train', icon: Icons.directions_railway), const Choice(title: 'Walk', icon: Icons.directions_walk), ]; 複製代碼