1. 基本介紹

AppBar 提供了常見的導航條功能。

2. 示例代碼

代碼下載地址。如果對你有幫助的話記得給個關注，代碼會根據我的 Flutter 專題不斷更新。

3. AppBar 屬性

4. AppBar 組件

4.1 容器創建

優雅的編程，首先創建一個 appbar.dart 文件。

import 'package:flutter/material.dart';

class FMAppBarVC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: _appBar(),
    );
  }

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
    );
 }
}

appbar title center.png

4.2 title

使用 Title 屬性給 AppBar 設置標題，具體設置方法可以參考Flutter 組件之 Text 詳解。
使用 centerTitle 設置標題是否居中。

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      centerTitle: false,
    );
  }

appbar title left.png

4.3 actions

使用 actions 屬性自定義 AppBar 右側功能鍵。

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
    );
  }

  List<Widget> _actions(){
    return [
      Container(
        width: 50,
        color: Colors.green,
        child: Icon(Icons.image),
      ),
      Container(
        width: 50,
        color: Colors.greenAccent,
        child: Icon(Icons.accessible),
      ),
      Container(
        width: 50,
        color: Colors.grey,
        child: Icon(Icons.backspace),
      ),
      Container(
        width: 50,
        color: Colors.yellowAccent,
        child: Icon(Icons.battery_unknown),
      ),
    ];
  }

appbar actions.png

4.4 flexibleSpace

可折疊的應用欄，在改變 appBar 的 size 時有效果。

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      flexibleSpace: _flexibleSpaceBar(),
    );
  }

  FlexibleSpaceBar _flexibleSpaceBar(){
    return FlexibleSpaceBar(
      title: Text('FlexibleSpaceBar'),
    );
  }

appbar flexibleSpaceBar.png

4.5 leading

使用 leading 制定 appbar 左側按鈕。

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      // flexibleSpace: _flexibleSpaceBar(),
      leading: _leading(),
    );
  }

  Container _leading(){
    return Container(
      width: 50,
      color: Colors.yellow,
      child: Icon(Icons.favorite),
    );
  }

appbar leading.png

4.6 bottom

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      // flexibleSpace: _flexibleSpaceBar(),
      leading: _leading(),

      bottom: _preferredSize(),
    );
  }

  PreferredSize _preferredSize(){
    return PreferredSize(
      preferredSize: const Size.fromHeight(60),
      child: Container(
        color: Colors.greenAccent,
        height: 60,
      ),
    );
  }

appbar bottom.png

4.7 backgroundColor

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      // flexibleSpace: _flexibleSpaceBar(),
      // leading: _leading(),
      // bottom: _preferredSize(),
      // shadowColor: Colors.black,
      backgroundColor: Colors.grey,
    );
  }

appbar background grey.png

4.8 brightness

通過設置 brightness 改變上方，電池、時間...等圖標顏色。

  AppBar _appBar() {
    return AppBar(
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      backgroundColor: Colors.grey,
      brightness: Brightness.dark,
    );
  }

appbar brightness .png

appbar brightness light.png

4.9 toolbarHeight

通過 toolbarHeight 改變 appbar 高度。

  AppBar _appBar() {
    return AppBar(
      toolbarHeight: 90,
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      backgroundColor: Colors.grey,
      brightness: Brightness.light,
    );
  }

appbar toolbarHeight.png

4.10 toolbarOpacity

通過 toolbarOpacity 改變 appbar 透明度。

  AppBar _appBar() {
    return AppBar(
      toolbarHeight: 90,
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      backgroundColor: Colors.grey,
      brightness: Brightness.light,
      toolbarOpacity: 0.5,
    );
  }

appbar toolbarOpacity.png

4.11 iconTheme

使用 iconTheme 改變按鈕主題。

  AppBar _appBar() {
    return AppBar(
      toolbarHeight: 90,
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      backgroundColor: Colors.grey,
      brightness: Brightness.light,
      iconTheme: _iconThemeData(),
    );
  }

  IconThemeData _iconThemeData(){
    return IconThemeData(
      color: Colors.red,
      size: 40,
      opacity: 0.5,
    );
  }

appbar iconTheme.png

4.12 actionsIconTheme

使用 actionsIconTheme 改變 actions 按鈕主題。注意與 iconTheme 的區別，iconTheme 改變了整個 appBar 的按鈕，而 actions 僅僅改變 actions 按鈕的主題。

  AppBar _appBar() {
    return AppBar(
      toolbarHeight: 90,
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      backgroundColor: Colors.grey,
      brightness: Brightness.light,
      // iconTheme: _iconThemeData(),
      actionsIconTheme: _iconThemeData(),
    );
  }

appbar actionsIconTheme.png

4.13 textTheme

我試了好多種 TextTheme 設置，并沒有發現哪有有變化，如果有思路歡迎私信。

4.14 titleSpacing

使用 titleSpacing 來控制 title 的左側偏移量

  AppBar _appBar() {
    return AppBar(
      toolbarHeight: 90,
      titleSpacing: 40,
      title: Text(
        'AppBar',
        style: TextStyle(
          color: Colors.red,
        ),
      ),
      actions: _actions(),
      backgroundColor: Colors.grey,
      brightness: Brightness.light,
      // iconTheme: _iconThemeData(),
      actionsIconTheme: _iconThemeData(),
    );
  }

appbar titleSpacing.png

4.15 其他屬性

其實 AppBar 還有一些屬性，有興趣可以自己研究一下。

5. 技術小結

• AppBar 整體使用并沒有太多難點，基礎屬性反而是使用最多的。
• 多試一試各種屬性，就能熟練掌握。