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

Jimi發表於2021-08-23

Flutter元件APP

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，其他屬性都是在特定的情況才會使用。

Flutter深入淺出元件篇---MaterialApp
2021-08-21
Flutter元件APP
Flutter深入淺出元件篇---Scaffold
2021-08-22
Flutter元件
Flutter深入淺出元件篇---TabBar
2021-08-25
Flutter元件tabBar
Flutter深入淺出元件篇---Padding、AnimatedPadding
2021-08-27
Flutter元件padding
Flutter深入淺出元件篇---SizeBox、FittedBox
2021-09-02
Flutter元件
Flutter深入淺出元件篇---Align、AnimatedAlign
2021-08-29
Flutter元件
Flutter深入淺出元件篇---ConstrainedBox、BoxConstraints、UnconstrainedBox
2021-08-31
Flutter元件AI
Flutter深入淺出元件篇---繼承關係圖
2021-08-17
Flutter元件繼承
Flutter控制元件--AppBar
2019-04-26
Flutter控制元件APP
Flutter | 深入淺出Key
2019-04-02
Flutter
flutter ScopedModel深入淺出
2019-09-10
Flutter
Flutter 系列文章：Flutter Appbar 控制元件介紹
2019-03-19
FlutterAPP控制元件
深入淺出 Flutter Framework 之 PaintingContext
2020-05-30
FlutterFrameworkAIGCContext
深入淺出 Flutter Framework 之 BuildOwner
2020-05-16
FlutterFrameworkUI
深入淺出 Flutter Framework 之 Element
2020-05-17
FlutterFramework
深入淺出 Flutter Framework 之 Widget
2020-05-10
FlutterFramework
Flutter 之 Scaffold 、AppBar 控制元件詳解
2021-07-19
FlutterAPP控制元件
Flutter基礎（五）Material元件之MaterialApp、Scaffold、AppBar
2019-07-09
Flutter元件APP
Flutter 基礎（五）Material 元件之 MaterialApp、Scaffold、AppBar
2019-06-10
Flutter元件APP
深入淺出理解 React高階元件
2018-11-15
React元件
Flutter深入淺出--（二）Flutter 的發展歷程
2020-01-07
Flutter
深入淺出PyTorch（運算元篇）
2020-06-22
PyTorch
深入淺出FE（十四）深入淺出websocket
2020-11-29
Web
Flutter 導航欄AppBar
2020-09-03
FlutterAPP
深入淺出 Golang 資源嵌入方案：前篇
2022-01-17
Golang
深入淺出Java執行緒池：使用篇
2021-01-31
Java執行緒
深入淺出解讀 Spring 原始碼：IOC/AOP 篇
2018-04-12
Spring原始碼
深入淺出Java執行緒池：原始碼篇
2021-02-06
Java執行緒原始碼
淺讀-《深入淺出Nodejs》
2023-03-30
NodeJS
深入淺出mongoose
2019-03-03
Go
HTTP深入淺出
2019-04-05
HTTP
深入淺出Webpack
2018-04-09
Web
深入淺出HTTP
2018-06-09
HTTP
mysqldump 深入淺出
2018-08-08
MySql
深入淺出——MVC
2020-05-26
MVC
深入淺出IO
2019-05-14
深入淺出decorator
2018-12-28
ArrayList 深入淺出
2021-07-23

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

AppBar介紹

為什麼需要AppBar

示例程式碼

AppBar屬性和說明

AppBar詳細使用

1、key

使用方法

2、leading

使用方法

3、leadingWidth

使用方法

4、automaticallyImplyLeading

使用方法

5、title

使用方法

6、centerTitle

使用方法

7、actions

8、bottom

使用方法

9、elevation

使用方法

10、shadowColor

使用方法

11、shape

使用方法

12、backgroundColor

使用方法

13、foregroundColor

使用方法

14、backwardsCompatibility

使用方法

15、iconTheme

使用方法

16、actionsIconTheme

使用方法

17、textTheme

18、primary

使用方法

19、excludeHeaderSemantics

使用方法

20、titleSpacing

使用方法

21、toolbarOpacity

使用方法

22、bottomOpacity

使用方法

23、toolbarHeight

使用方法

24、toolbarTextStyle

使用方法

25、titleTextStyle

使用方法

26、flexibleSpace、systemOverlayStyle、brightness

總結

相關文章