Flutter深入淺出元件篇---AppBar

AppBar介紹

​ AppBar是基於Material Design設計風格的應用欄，一般使用在Scaffold內部，作為頂部導航欄。

為什麼需要AppBar

​ 1、因為導航欄裡面一般由左側功能鍵（返回鍵、選單鍵）、標題、右側功能鍵組成，而AppBar裡面內建封裝了這些元件，使用起來非常方便。

​ 2、可以做一些特殊的導航欄，比如可滾動的導航欄。

​ 3、根據環境 MediaQuery 的填充插入內容，以避免系統 UI 入侵。

示例程式碼

本文中很多效果都沒有截圖，可下載原始碼執行專案 原始碼地址，或者通過視訊教程檢視 視訊教程地址

AppBar屬性和說明

總共28個屬性

欄位	屬性	描述
key	Key	當元件在元件樹中移動時使用Key可以保持元件之前狀態
leading	Widget	通常情況下返回一個返回鍵（IconButton)
leadingWidth	double	左側leading的寬度，預設56
automaticallyImplyLeading	bool	和leading配合使用，如果為true並且leading為空的情況下，會自動配置返回鍵
title	Widget	導航欄的標題
centerTitle	bool	標題是否居中，不同作業系統預設顯示位置不一樣
actions	List	一個Widget列表
bottom	PreferredSizeWidget	出現在導航欄底部的控制元件
elevation	double	控制導航欄下方陰影的大小
shadowColor	Color	控制導航欄下方陰影的顏色
shape	ShapeBorder	導航欄的形狀以及陰影
backgroundColor	Color	導航欄的背景顏色
foregroundColor	Color	導航欄中文字和圖示的顏色
backwardsCompatibility	bool	與foregroundColor配合使用
iconTheme	IconThemeData	導航欄圖示的顏色、透明度、大小的配置
actionsIconTheme	IconThemeData	導航欄右側圖示的顏色、透明度、大小的配置
textTheme	TextTheme	導航欄文字的排版樣式
primary	bool	導航欄是否顯示在螢幕頂部
excludeHeaderSemantics	bool	標題是否應該用 [Semantics] 包裹，預設false
titleSpacing	double	title內容的間距
toolbarOpacity	double	導航欄的透明度
bottomOpacity	double	導航欄底部的透明度
toolbarHeight	double	導航欄的高度，預設kToolbarHeight
toolbarTextStyle	TextStyle	導航欄圖示的顏色
titleTextStyle	TextStyle	導航欄標題的預設顏色
flexibleSpace	Widget	堆疊在工具欄和選項卡欄的後面
systemOverlayStyle	SystemUiOverlayStyle	疊加層的樣式
brightness	Brightness	導航欄的亮度，改屬性已廢棄，用systemOverlayStyle代替

AppBar詳細使用

1、key

​ key 是用來作為Widget 、Element 和 SemanticsNode 的標識，當元件在元件樹中移動時使用Key可以保持元件之前狀態。

使用方法

GlobalKey _appBarKey = GlobalKey();

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      key: _appBarKey,
    ),
  );
}
複製程式碼

2、leading

​ appBar 左側顯示的一個 Widget，一般顯示返回鍵 Icon 或 IconButton

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
    ),
  );
}
複製程式碼

3、leadingWidth

​ 左側leading的寬度，預設56

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      leadingWidth: 60,
    ),
  );
}
複製程式碼

4、automaticallyImplyLeading

​ 當leading 未配置時，在二級頁面下會自動展示一個返回鍵，預設值為 true

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      automaticallyImplyLeading: false,
    ),
  );
}
複製程式碼

5、title

​ 導航欄的標題，一般是顯示當前頁面的標題文字

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
    ),
  );
}
複製程式碼

6、centerTitle

​ 標題是否居中，不同作業系統預設顯示位置不一樣，安卓預設顯示在左側，蘋果預設顯示在中間

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
    ),
  );
}
複製程式碼

7、actions

​ 一個 Widget 列表，代表 Toolbar 中所顯示的選單，對於常用的選單，通常使用 IconButton 來表示；對於不常用的選單通常使用 PopupMenuButton 來顯示為三個點，點選後彈出二級選單

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "掃一掃",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "新增",
          icon: Icon(Icons.add),
        )
      ],
    ),
  );
}
複製程式碼

8、bottom

​ 出現在應用欄底部的控制元件，一般是 TabBar

使用方法

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State<AppBarExample> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "火車", icon: Icon(Icons.bus_alert),),
            Tab(text: "汽車", icon: Icon(Icons.bus_alert),)
          ],
        ),
      ),
    );
  }
}

複製程式碼

9、elevation

​ 控制應用欄下方陰影的大小，這個值不能是一個負值。

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
    ),
  );
}
複製程式碼

10、shadowColor

​ 控制導航欄下方陰影的顏色

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
    ),
  );
}
複製程式碼

11、shape

​ 導航欄的形狀以及陰影

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      elevation: 10,
      shadowColor: Colors.green,
      shape: RoundedRectangleBorder(
        side: BorderSide(
          color: Colors.red,
          width: 5
        )
      )
    ),
  );
}
複製程式碼

12、backgroundColor

​ 導航欄的背景顏色

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.orange,
    ),
  );
}
複製程式碼

13、foregroundColor

​ 導航欄中文字和圖示的顏色

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
    ),
  );
}
複製程式碼

14、backwardsCompatibility

​ 與foregroundColor配合使用

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      foregroundColor: Colors.black,
      backwardsCompatibility: true,
    ),
  );
}
複製程式碼

15、iconTheme

​ 導航欄圖示的顏色、透明度、大小的配置

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      iconTheme: IconThemeData(
        color: Colors.orange,
        opacity: 1,
        size: 50
      ),
    ),
  );
}
複製程式碼

16、actionsIconTheme

​ 導航欄右側圖示的顏色、透明度、大小的配置

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      actions: [
        IconButton(
          onPressed: (){

          },
          tooltip: "掃一掃",
          icon: Icon(Icons.qr_code_scanner),
        ),
        IconButton(
          onPressed: (){

          },
          tooltip: "新增",
          icon: Icon(Icons.add),
        )
      ],
      actionsIconTheme: IconThemeData(
        color: Colors.purple,
      ),
    ),
  );
}
複製程式碼

17、textTheme

​ 導航欄文字的排版樣式，預設使用ThemeData.primaryTextTheme

18、primary

​ 導航欄是否顯示在螢幕頂部

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,
    ),
  );
}
複製程式碼

19、excludeHeaderSemantics

​ 標題是否應該用 [Semantics] 包裹，預設false

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      primary: true,
      excludeHeaderSemantics: true,
    ),
  );
}
複製程式碼

20、titleSpacing

​ 標題內容的間距，如果為0，將佔用全部空間

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,
    ),
  );
}
複製程式碼

21、toolbarOpacity

​ 導航欄的透明度

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarOpacity: 0.5,
    ),
  );
}
複製程式碼

22、bottomOpacity

​ 導航欄底部的透明度

使用方法

import 'package:flutter/material.dart';

class AppBarExample extends StatefulWidget {
  @override
  _AppBarExampleState createState() => _AppBarExampleState();
}

class _AppBarExampleState extends State<AppBarExample> with SingleTickerProviderStateMixin{

  TabController _tabController;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: TabBar(
          controller: _tabController,
          tabs: [
            Tab(text: "火車", icon: Icon(Icons.bus_alert),),
            Tab(text: "汽車", icon: Icon(Icons.bus_alert),)
          ],
        ),
				bottomOpacity: 0.5,
      ),
    );
  }
}
複製程式碼

23、toolbarHeight

​ 導航欄的高度，預設kToolbarHeight

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      backrogoundColor: Colors.black,
      toolbarHeight: 200,
    ),
  );
}
複製程式碼

24、toolbarTextStyle

​ 導航欄圖示的顏色

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      leading: IconButton(
        onPressed: (){
          Navigator.pop(context);
        }, 
        icon: Icon(Icons.arrow_back_sharp, color: Colors.white,)
      ),
      toolbarTextStyle: TextStyle(
        color: Colors.black
      ),
    ),
  );
}
複製程式碼

25、titleTextStyle

​ 導航欄標題的預設顏色

使用方法

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("AppBarExample"),
      centerTitle: true,
      titleSpacing: 0,
      titleTextStyle: TextStyle(
        color: Colors.red
      ),
    ),
  );
}
複製程式碼

26、flexibleSpace、systemOverlayStyle、brightness

​ flexibleSpace 以及 systemOverlayStyle 一般都是在配合 SliverAppBar 使用的，這裡不做過多的描述。而 brightness 已經廢棄，用 systemOverlayStyle 代替。

總結

以上是針對 AppBar 的所有使用方法，最常用的屬有leading、title、actions、centerTitle、bottom、backgroundColor，其他屬性都是在特定的情況才會使用。