AppBar佈局及相關屬性

AppBar屬於基礎組件，結構以下

如下示例顯示一個帶有兩個簡單操做的AppBar。第一個動做打開SnackBar，第二個動做導航到新頁面。

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
    final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));
    return Scaffold(
      key: scaffoldKey,
      appBar: AppBar(
        title: const Text('AppBar Demo'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.add_alert),
            tooltip: 'Show Snackbar',
            onPressed: () {
              scaffoldKey.currentState.showSnackBar(snackBar);
            },
          ),
          IconButton(
            icon: const Icon(Icons.navigate_next),
            tooltip: 'Next page',
            onPressed: () {
              openPage(context);
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          'This is the home page',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }

  void openPage(BuildContext context) {
    Navigator.push(context, MaterialPageRoute(
      builder: (BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Container(
              color: Colors.white10,
              child: Row(
                children: <Widget>[Text('標題1'), Text('標題2')],
              ),
            ),
            actions: <Widget>[
              IconButton(
                icon: Icon(Icons.keyboard_voice),
                tooltip: 'keyboard_voice',
                onPressed: null,
              ),
              IconButton(
                icon: Icon(Icons.lightbulb_outline),
                tooltip: 'lightbulb_outline',
                onPressed: null,
              ),
            ],
            // 左側返回按鈕
            leading: Builder(
              builder: (BuildContext context) {
                return IconButton(
                  icon: const Icon(Icons.menu),
                  onPressed: null,
                  tooltip: 'menu',
                );
              },
            ), 
            //導航欄和狀態欄的的顏色
            backgroundColor: Colors.lightBlue, 
            // 在appbar底部
            bottom: PreferredSize(
                child: Text('bottom'),
                preferredSize: Size(30, 30)), 
            //控制狀態欄的顏色
            brightness: Brightness.dark, 
             //icon的主題樣式
            iconTheme: IconThemeData(
                color: Colors.pink,
                opacity: 0.5,
                size: 30),
            //字體主題
            textTheme: TextTheme(), 
            //標題是否居中，默認爲false
            centerTitle: true, 
             //整個導航欄的不透明度
            toolbarOpacity: 1.0,
            //bottom的不透明度
            bottomOpacity: 0.8, 
            //標題兩邊的空白區域,
            titleSpacing: 10, 
             //陰影的高度
            elevation: 10, 
            flexibleSpace: Text('d12321312'),
          ),
          body: const Center(
            child: Text(
              'This is the next page',
              style: TextStyle(fontSize: 24),
            ),
          ),
        );
      },
    ));
  }
}

官方文檔：

https://flutterchina.club/widgets/basics/

https://api.flutter.dev/flutter/material/AppBar-class.html