Flutte部件目錄-基本部件（三）

Scaffold

實現基本的材料設計視覺佈局結構。

此課程提供了用於顯示抽屜，短文本和底部表的API。

要顯示snackbar或持久底部表，請經過Scaffold.of獲取當前BuildContext的ScaffoldState，而後使用ScaffoldState.showSnackBar和ScaffoldState.showBottomSheet函數。

也能夠看看:

• AppBar, 這是一個水平條，一般使用appBar屬性顯示在應用程序的頂部.
• BottomAppBar,這是一個水平條，一般使用bottomNavigationBar屬性顯示在應用程序的底部 .
• FloatingActionButton, 這是一個圓形按鈕，一般使用floatingActionButton屬性顯示在應用程序的右下角.
• Drawer, 這是一個垂直面板，一般使用drawer屬性顯示在身體的左側（一般隱藏在手機上）.
• BottomNavigationBar, 這是一個水平按鈕陣列，一般使用bottomNavigationBar屬性在應用程序的底部顯示.
• SnackBar, 這是使用ScaffoldState.showSnackBar方法一般顯示在應用程序底部附近的臨時通知.
• BottomSheet, 這是一般顯示在應用底部附近的疊加層。 底部表單能夠是持久性的，在這種狀況下，它使用ScaffoldState.showBottomSheet方法或模態顯示，在這種狀況下，它使用showModalBottomSheet函數顯示.
• ScaffoldState, 這是與這個小部件相關的狀態.
• material.google.com/layout/structure.html

繼承結構 

Object>Diagnosticable>DiagnosticableTree>Widget​​​​​​​>StatefulWidget>Scaffold

構造函數

Scaffold({Key key, PreferredSizeWidget appBar, Widget body, Widget floatingActionButton, List<Widget> persistentFooterButtons, Widget drawer, Widget endDrawer, Widget bottomNavigationBar, Color backgroundColor, bool resizeToAvoidBottomPadding: true, bool primary: true })

爲材料設計部件建立視覺展臺.

const

屬性

appBar → PreferredSizeWidget

應用程序欄顯示在展臺的頂部.

final

backgroundColor → Color

做爲整個展現臺基礎的Material小部件的顏色. [...]

final

body → Widget

展現臺的主要內容. [...]

final

bottomNavigationBar → Widget

底部導航欄顯示在展現臺的底部. [...]

final

drawer → Widget

面板顯示在主體的側面，一般隱藏在移動設備上。 從左到右（TextDirection.ltr）或從右到左（TextDirection.rtl）滑入 [...]

final

endDrawer → Widget

面板顯示在主體的側面，一般隱藏在移動設備上。 從左到右（TextDirection.ltr）或從右到左（TextDirection.rtl）滑入 [...]

final

floatingActionButton → Widget

一個按鈕顯示在主體上方，位於右下角. [...]

final

persistentFooterButtons → List<Widget>

顯示在展現臺底部的一組按鈕. [...]

final

primary → bool

這個展現臺是否顯示在屏幕的頂部. [...]

final

resizeToAvoidBottomPadding → bool

主體（和其它浮動部件）是否應該本身調整大小以免窗口的底部填充. [...]

final

hashCode → int read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

createState() → ScaffoldState

在樹中的給定位置爲此部件建立可變狀態. [...]

createElement() → StatefulElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

debugFillProperties(DiagnosticPropertiesBuilder description) → void inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool inherited

靜態方法

geometryOf(BuildContext context) → ValueListenable<ScaffoldGeometry>

返回給定上下文的最近展現臺祖先的ScaffoldGeometry的ValueListenable. [...]

hasDrawer(BuildContext context, { bool registerForUpdates: true }) → bool

最接近的上下文中的展現臺是否有抽屜. [...]

of(BuildContext context, { bool nullOk: false }) → ScaffoldState

來自該類的最接近實例的狀態，它包含給定的上下文. [...]

setFloatingActionButtonNotchFor(BuildContext context, ComputeNotch computeNotch) → VoidCallback

爲給定上下文中最近的Scaffold祖先設置ScaffoldGeometry.floatingActionButtonNotch，若是存在的話. [...]

Appbar

一個Material Design應用程序欄。

應用程序欄由工具欄和其它可能的部件（如TabBar和FlexibleSpaceBar）組成。

應用欄一般會將一個或多個常見actions用IconButton顯示出來，可選擇使用PopupMenuButton做爲不太常見的操做（有時稱爲「溢出菜單」）。

應用程序欄一般用在Scaffold.appBar屬性中，該屬性將應用程序欄做爲固定高度的小部件放置在屏幕的頂部。對於可滾動的應用程序欄，請參閱SliverAppBar，該應用程序將AppBar嵌入長條中以用於CustomScrollView。

AppBar在底部（若是有）上方顯示工具欄部件，leading，標題和操做。底部一般用於TabBar。 若是指定了一個flexibleSpace部件，那麼它將堆疊在工具欄和底部部件的後面。下圖顯示了當書寫語言是從左到右（例如英語）時，每一個插槽出如今工具欄中的位置：

若是省略了leading小部件，但AppBar位於帶有抽屜的展現臺中，則會插入一個按鈕以打開抽屜。不然，若是最近的Navigator有全部之前的路線，則插入BackButton替代。這種行爲能夠經過設置automatedImplyLeading爲false來關閉。在這種狀況下，一個空的leading部件將致使在middle/title部件中開始展開。

示例代碼

new AppBar(
  title: new Text('My Fancy Dress'),
  actions: <Widget>[
    new IconButton(
      icon: new Icon(Icons.playlist_play),
      tooltip: 'Air it',
      onPressed: _airDress,
    ),
    new IconButton(
      icon: new Icon(Icons.playlist_add),
      tooltip: 'Restitch it',
      onPressed: _restitchDress,
    ),
    new IconButton(
      icon: new Icon(Icons.playlist_add_check),
      tooltip: 'Repair it',
      onPressed: _repairDress,
    ),
  ],
)

也能夠看看:

• Scaffold, 它在其Scaffold.appBar插槽中顯示AppBar.
• SliverAppBar, 它使用AppBar提供一個靈活的應用程序欄，能夠在CustomScrollView中使用.
• TabBar, 若是屏幕有多個頁面排列在選項卡中，它一般放置在AppBar的bottom插槽中.
• IconButton,它用於在應用欄上顯示按鈕的actions.
• PopupMenuButton, 經過actions在應用欄上顯示一個彈出式菜單.
• FlexibleSpaceBar, 當應用欄能夠展開和摺疊時，它與flexibleSpace一塊兒使用.
• material.google.com/layout/structure.html#structure-toolbars

繼承結構

Object​​​​​​​>Diagnosticable​​​​​​​>DiagnosticableTree​​​​​​​>Widget​​​​​​​>StatefulWidget>AppBar

實現

PreferredSizeWidget

構造函數

AppBar({Key key, Widget leading, bool automaticallyImplyLeading: true, Widget title, List<Widget> actions, Widget flexibleSpace, PreferredSizeWidget bottom, double elevation: 4.0, Color backgroundColor, Brightness brightness, IconThemeData iconTheme, TextTheme textTheme, bool primary: true, bool centerTitle, double titleSpacing: NavigationToolbar.kMiddleSpacing, double toolbarOpacity: 1.0, double bottomOpacity: 1.0 })

建立材質設計應用欄. [...]

屬性

actions → List<Widget>

部件在標題部件後顯示. [...]

final

automaticallyImplyLeading → bool

控制咱們是否應該嘗試暗示leading部件爲空. [...]

final

backgroundColor → Color

用於應用欄材質的顏色。 一般這應該與brightness，iconTheme，textTheme一塊兒設置. [...]

final

bottom → PreferredSizeWidget

此部件顯示在應用程序欄的底部. [...]

final

bottomOpacity → double

應用欄底部的不透明度如何. [...]

final

brightness → Brightness

應用欄材質的亮度。 一般這是與backgroundColor，iconTheme，textTheme一塊兒設置. [...]

final

centerTitle → bool

標題是否應該居中. [...]

final

elevation → double

放置此應用欄的z座標。 這將控制應用程序欄下方陰影的大小. [...]

final

flexibleSpace → Widget

此部件堆疊在工具欄和TabBar後面。 它的高度將與應用欄的總體高度相同. [...]

final

iconTheme → IconThemeData

用於應用程序欄圖標的顏色，不透明度和大小。 一般這是與backgroundColor，亮度，textTheme一塊兒設置的. [...]

final

leading → Widget

標題前顯示的部件. [...]

final

preferredSize → Size

高度爲kToolbarHeight和bottom部件首選高度之和的大小. [...]

final

primary → bool

是否在屏幕頂部顯示此應用欄. [...]

final

textTheme → TextTheme

用於應用欄中文字的印刷風格。 一般這與亮度backgroundColor，iconTheme一塊兒設置. [...]

final

title → Widget

Appbar中顯示的主要部件. [...]

final

titleSpacing → double

標題內容在橫軸上的間距。即便沒有主要內容或操做，也會應用此間距。若是您但願標題佔用全部可用空間，請將此值設置爲0.0. [...]

final

toolbarOpacity → double

應用欄的工具欄部分的透明度如何. [...]

final

hashCode → int read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

createState() → _AppBarState

在樹中的給定位置爲此小部件建立可變狀態. [...]

createElement() → StatefulElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

debugFillProperties(DiagnosticPropertiesBuilder description) → void inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool inherited

FlutterLogo

Flutter標誌，以窗口小部件的形式。 這個小部件遵照IconTheme。

也能夠看看:

• IconTheme, 爲圖標提供環境配置.
• Icon, 用於顯示圖標材質設計圖標庫.
• ImageIcon,用於顯示來自AssetImages或其餘ImageProviders的圖標.

繼承結構

Object​​​​​​​>Diagnosticable​​​​​​​>DiagnosticableTree​​​​​​​>Widget​​​​​​​>StatelessWidget>FlutterLogo

FlutterLogo({Key key, double size, MaterialColor colors, Color textColor: const Color(0xFF616161), FlutterLogoStyle style: FlutterLogoStyle.markOnly, Duration duration: const Duration(milliseconds: 750), Curve curve: Curves.fastOutSlowIn })

建立一個繪製Flutter標誌的小部件. [...]

const

屬性

colors → MaterialColor

默認狀況下用於繪製徽標的色樣，Colors.blue. [...]

final

curve → Curve

標誌動畫的曲線若是樣式，顏色，文字顏色發生變化.

final

duration → Duration

動畫的時間長度，若是樣式，顏色或textColor屬性發生更改.

final

size → double

標誌的大小以邏輯像素表示. [...]

final

style → FlutterLogoStyle

是否以及在何處繪製「Flutter」文本。 默認狀況下，只繪製徽標自己.

final

textColor → Color

若是樣式爲FlutterLogoStyle.horizontal或FlutterLogoStyle.stacked，則用於在徽標上繪製「Flutter」文本的顏色。 適當的顏色是常量顏色（0xFF616161）（中等灰度），在白色背景下.

final

hashCode → int read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

build(BuildContext context) → Widget

介紹由此小部件表明的用戶界面的一部分. [...]

createElement() → StatelessElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

debugFillProperties(DiagnosticPropertiesBuilder description) → void inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String   inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool inherited

Placeholder

一個部件繪製一個框，表示有一天將添加其它部件的位置。

個部件在開發過程當中很是有用，用於指示接口還沒有完成。

默認狀況下，佔位符的大小適合其容器。 若是佔位符處於無界空間，它將根據給定的fallbackWidth和fallbackHeight自行調整大小。

繼承結構

Object​​​​​​​>Diagnosticable​​​​​​​>DiagnosticableTree​​​​​​​>Widget​​​​​​​>StatelessWidget>Placeholder

構造函數

Placeholder({Key key, Color color: const Color(0xFF455A64), double strokeWidth: 2.0 , double fallbackWidth: 400.0, double fallbackHeight: 400.0 })

建立一個繪製框的部件.

const

Properties

color → Color

The color to draw the placeholder box.

final

fallbackHeight → double

佔位符處於高度無限的狀況下要使用的高度. [...]

final

fallbackWidth → double

The width to use when the placeholder is in a situation with an unbounded width. [...]

final

strokeWidth → double

佔位符框中行的寬度.

final

hashCode → int read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

build(BuildContext context) → Widget

介紹由此小部件表明的用戶界面的一部分. [...]

createElement() → StatelessElement inherited

debugDescribeChildren() → List<DiagnosticsNode> @protected, inherited

debugFillProperties(DiagnosticPropertiesBuilder description) → void inherited

noSuchMethod(Invocation invocation) → dynamic inherited

toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) → DiagnosticsNode inherited

toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String inherited

toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) → String

inherited

toStringShort() → String inherited

操做符

operator ==(other) → bool inherited