Flutte部件目錄-Material Components

實現Material Design指南的視覺，行爲和運動豐富的小部件。

• 應用程序結構和導航
• 按鈕
• 輸入和選擇
• 對話框，彈出框和麪板
• 信息顯示
• 佈局

查看Flutter窗口小部件目錄中的更多小部件。

應用程序結構和導航

Scaffold

Appbar

上面兩個在基本部件中已經講過。

BottomNavigationBar

底部導航欄可輕鬆瀏覽並在單次點擊之間在頂層視圖之間切換。 BottomNavigationBar小部件實現此組件。

一個顯示在應用底部的材質小部件，用於在少許視圖中進行選擇，一般介於3到5之間。

底部導航欄由文本標籤，圖標或二者的多個項目組成，並放置在一塊材料的頂部。 它提供了應用程序頂級視圖之間的快速導航。 對於更大的屏幕，側面導航可能更適合。

底部導航欄一般與Scaffold結合使用，在Scaffold.bottomNavigationBar參數中提供它。

底部導航欄的type會更改其條目的顯示方式。若是未指定，則在少於四個項目時自動設置爲BottomNavigationBarType.fixed，不然爲BottomNavigationBarType.shifting。

• BottomNavigationBarType.fixed，缺省狀況下，當少於四個條目時。 若是選擇的項目非空，則使用fixedColor呈現所選項目，不然將使用主題的ThemeData.primaryColor。 導航欄的背景色是默認的材質背景色ThemeData.canvasColor（實質上是不透明的白色）。
• BottomNavigationBarType.shifting，有四個或更多項目時的默認值。 全部項目均以白色呈現，而且導航欄的背景色與所選項目的BottomNavigationBarItem.backgroundColor相同。 在這種狀況下，假定每一個項目將具備不一樣的背景色，而且背景色將與白色造成鮮明對比。

也能夠看看：

• BottomNavigationBarItem
• Scaffold
• material.google.com/components/bottom-navigation.html

繼承結構

Object>Diagnosticable>DiagnosticableTree​​​​​​​>Widget​​​​​​​>StatefulWidget>BottomNavigationBar

構造函數

BottomNavigationBar({Key key, @required List<BottomNavigationBarItem> items, ValueChanged<int> onTap, int currentIndex: 0, BottomNavigationBarType type, Color fixedColor, double iconSize: 24.0 })

建立一個底部導航欄，一般用在Scaffold中，做爲Scaffold.bottomNavigationBar參數提供. [...]

屬性

currentIndex → int

指向當前活動條目的索引.

final

fixedColor → Color

底部導航欄爲BottomNavigationBarType.fixed時所選項目的顏色. [...]

final

iconSize → double

全部BottomNavigationBarItem圖標的大小. [...]

final

items → List<BottomNavigationBarItem>

放置在底部的導航欄內的互動條目.

final

onTap → ValueChanged<int>

點擊條目時調用的回調. [...]

final

type → BottomNavigationBarType

定義BottomNavigationBar的佈局和行爲. [...]

final

hashCode → int read-only, inherited

key → Key final, inherited

runtimeType → Type read-only, inherited

方法

createState() → _BottomNavigationBarState

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

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

TabBar

一個Material Design小部件，顯示水平的一行標籤。

TabBarView

顯示與當前選定選項卡相對應的部件的頁面視圖。 一般與TabBar結合使用。

MaterialApp

一個方便的小部件，它包裝了許多實現Material Design的應用程序一般須要的小部件。

WidgetsApp

一個便利的類，它包裝了應用程序一般須要的許多小部件。

Drawer

Material Design面板，從展現臺的邊緣水平滑動，以在應用程序中顯示導航連接。

按鈕

RaisedButton

材質設計凸起按鈕。 一個凸起的按鈕由一個矩形的材料懸停在界面上。

FloatingActionButton

浮動操做按鈕是一個圓形圖標按鈕，它懸停在內容上以提高應用程序中的主要操做。 浮動動做按鈕最經常使用於Scaffold.floatingActionButton字段。

FlatButton

平面按鈕是在材料組件部件上打印的部分，經過填充顏色對觸摸做出反應。

IconButton

圖標按鈕是一個打印在材質小部件上的圖片，經過填充顏色（墨水）對觸摸做出反應。

PopupMenuButton

按下時顯示菜單而且當菜單因選擇項目而被解除時調用onSelected。

ButtonBar

按鈕的水平排列。

輸入和選擇

TextField

觸摸文本字段將放置光標並顯示鍵盤。 TextField部件實現了這個組件。

Checkbox

複選框容許用戶從一組中選擇多個選項。 Checkbox部件實現了這個組件

Radio

單選按鈕容許用戶從一組中選擇一個選項。 若是您認爲用戶須要並排查看全部可用選項，請使用單選按鈕進行排他選擇。

Switch

On/off開關切換單個設置選項的狀態。 Switch小部件實現這個組件。

Slider

經過移動滑塊，滑塊可以讓用戶從一系列值中進行選擇。

Date & Time Pickers

日期選擇器使用對話窗口在移動設備上選擇一個日期。 時間選擇器使用對話框在移動設備上選擇單個時間（以小時：分鐘格式）。

對話框，彈出框和麪板

SimpleDialog

簡單的對話框能夠提供有關列表項的其餘詳細信息或操做。 例如，他們能夠顯示頭像圖標，以闡明潛臺詞或正交行爲（如添加賬戶）。

AlertDialog

警報是須要確認的緊急中斷，通知用戶有關狀況。 AlertDialog小部件實現了這個組件。

BottomSheet

底部工做表從屏幕底部向上滑動以顯示更多內容。 您能夠調用showBottomSheet（）來實現持久性底部工做表或showModalBottomSheet（）來實現模態底部工做表。

ExpansionPanel

擴展面板包含建立流並容許輕量級地編輯元素。 ExpansionPanel小部件實現了這個組件。

SnackBar

帶有可選操做的輕量級消息，簡要顯示在屏幕底部。

信息顯示

Image

一個顯示圖像的小部件。

Icon

材質設計圖標。

Chip

一個Material Design芯片。 芯片表明小塊中的複雜實體，如聯繫人。

Tooltip

工具提示提供的文本標籤可幫助解釋按鈕或其餘用戶界面操做的功能。 將按鈕封裝在工具提示窗口小部件中，以便在按下窗口小部件時（或者當用戶採起其餘適當的操做時）顯示標籤。

DataTable

數據表顯示一組原始數據。 它們一般出如今桌面企業產品中。 DataTable小部件實現了這個組件。

Card

材料設計卡片。 卡片有稍微圓角和陰影。

LinearProgressIndicator

進度和活動指標是應用程序加載內容的可視化指示。 LinearProgressIndicator小部件實現了這個組件。 此外，您還可使用CircularProgressIndicator小部件。

GridView

網格列表由以垂直和水平佈局排列的單元格的重複模式組成。 GridView小部件實現了這個組件。

佈局

ListTile

單個固定高度的行，一般包含一些文本以及前導或尾隨圖標。

Stepper

材質設計步驟部件，經過一系列步驟顯示進度。

Divider

一個邏輯像素粗橫線，兩邊都有填充。