Flutter AppBar 詳解

概述

AppBar({
    Key key,
    this.leading, //widget類型，即可任意設計樣式，表示左側leading區域，通常爲icon，如返回icon
    this.automaticallyImplyLeading = true, // 如果leading!=null，該屬性不生效；如果leading==null且爲true，左側leading區域留白；如果leading==null且爲false，左側leading區域擴展給title區域使用
    this.title,//widget類型，即可任意設計樣式，表示中間title區域，通常爲標題欄
    this.actions,// List<Widget>類型，即可任意設計樣式，表示右側actions區域，可放置多個widget，通常爲icon，如搜索icon、菜單icon
    this.flexibleSpace,
    this.bottom, //PreferredSizeWidget類型，appbar底部區域，通常爲Tab控件
    this.elevation, //陰影高度，默認爲4
    this.shape,//ShapeBorder 類型，表示描邊形狀
    this.backgroundColor, //Color類型，背景色 
    this.brightness,//Brightness類型，表示當前appbar主題是亮或暗色調，有dark和light兩個值，可影響系統狀態欄的圖標顏色
    this.iconTheme, //IconThemeData類型，可影響包括leading、title、actions中icon的顏色、透明度，及leading中的icon大小。
    this.actionsIconTheme,
    this.textTheme,// TextTheme類型，文本主題樣式，可設置appbar中文本的許多樣式，如字體大小、顏色、前景色、背景色等...
    this.primary = true,//true時，appBar會以系統狀態欄高度爲間距顯示在下方；false時，會和狀態欄重疊，相當於全屏顯示。
    this.centerTitle, // boolean 類型，表示標題是否居中顯示
    this.titleSpacing = NavigationToolbar.kMiddleSpacing,//title區域水平方向與leading和actions的間距(padding)
    this.toolbarOpacity = 1.0,//toolbar區域透明度
    this.bottomOpacity = 1.0,//bottom區域透明度
  }

屬性示範

概述

leading

widget類型，即可任意設計樣式，表示左側leading區域，通常爲icon，如返回icon
如下紅框內矩形爲最大區域

title

//widget類型，即可任意設計樣式，表示中間title區域，通常爲標題欄

centerTitle

// boolean 類型，表示標題是否居中顯示

actions

// List類型，即可任意設計樣式，表示右側actions區域，可放置多個widget，通常爲icon，如搜索icon、菜單icon

bottom

//PreferredSizeWidget類型，appbar底部區域，通常爲Tab控件，樣式如下所示“首頁”、“新聞”、“個人”的Tab

shape

//ShapeBorder 類型，表示描邊形狀，可使用其子類構建標題欄形狀
如下圖用RoundedRectangleBorder生成

brightness

//Brightness類型，表示當前appbar主題是亮或暗色調，有dark和light兩個值，可影響系統狀態欄的圖標顏色，如下圖所示，設爲light後狀態欄爲黑色。設爲dark後狀態欄顏色爲白色

iconTheme

//IconThemeData類型，可影響包括leading、title、actions中icon的顏色、透明度，及leading中的icon大小。

iconTheme: IconThemeData(color: Color(0xff00ff00), opacity: 0.2, size: 40)

primary

//true時，appBar會以系統狀態欄高度爲間距顯示在下方；false時，會和狀態欄重疊。

備註

上圖樣式圖中的輔助線由flutter inspector生成