Flutter Material Components Widgets之AppBar

Appbar 一个Material Design应用程序操作栏，由工具栏和其他可能的widget（如TabBar和FlexibleSpaceBar）组成。

结构如下图

AppBar构造函数

AppBar({
    Key key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation = 4.0,
    this.backgroundColor,
    this.brightness,
    this.iconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
  })

• actions → List < Widget >
  要在标题小部件后显示的Widget
• automaticImplyLeading → bool
  控制是否应该显示Leading Widget 默认为true
• backgroundColor → 颜色
  用于应用栏材质的颜色。通常这应该与亮度，iconTheme，textTheme一起设置
• bottom → PreferredSizeWidget
  此widget显示在应用栏的底部
• bottomOpacity → double
  应用栏底部的不透明程度
• brightness → Brightness
  应用栏材质的亮度。通常，这与backgroundColor，iconTheme，textTheme一起设置
• centerTitle → bool
  标题是否居中
• elevation → double
  放置此应用栏的z坐标。这可以控制应用栏下方阴影的大小
• flexibleSpace → Widget
  此Widget堆叠在工具栏和标签栏后面。它的高度与应用栏的整体高度相同
• iconTheme → IconThemeData
  用于应用栏图标的颜色，不透明度和大小。通常，这与backgroundColor，brightness，textTheme一起设置
• leading → Widget
  标题之前显示的Widget
• preferredSize → Size
  高度为kToolbarHeight和底部窗口小部件首选高度之和的大小
• primary → bool
  此应用栏是否显示在屏幕顶部
• textTheme → TextTheme
  应用栏中用于文本的排版样式。通常，这与亮度 backgroundColor，iconTheme一起设置
• title → Widget
  appbar中显示的title widget
• titleSpacing → double
  横轴上标题内容 周围的间距。即使没有前导内容或操作，也会应用此间距。如果希望 title占用所有可用空间，请将此值设置为0.0
• toolbarOpacity → double
  应用栏的工具栏部分是多么不透明

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
      home: new DefaultTabController(length: 3, child: new Scaffold(
        appBar: AppBar(
          title: Text('My Fancy Dress'),
          leading: new BackButton(),
          actions: <Widget>[
            new IconButton(
              icon: Icon(Icons.playlist_play),
              tooltip: 'Air it',
              onPressed: () => print("air it"),
            ),
            new IconButton(
              icon: Icon(Icons.playlist_add),
              tooltip: 'Restitch it',
              onPressed: () => print("restitch is"),
            ),
            new IconButton(
              icon: Icon(Icons.playlist_add_check),
              tooltip: 'Repair it',
              onPressed: () => print("repair it"),
            ),
          ],
          bottom: new TabBar(tabs: <Widget>[
            new Tab(text: "test1",),
            new Tab(text: "test2",),
            new Tab(text: "test3",),
          ],
          ),
        ),
      ),
      )
  ));
}