flutter組件速查

基礎(chǔ) Widgets

Container : 一個擁有繪制、定位、調(diào)整大小的 widget。
Row:在水平方向上排列子widget的列表。
Column:在垂直方向上排列子widget的列表。
Image:一個顯示圖片的widget
Text:單一格式的文本
Icon:一個材料設(shè)計圖標(biāo)。
RaisedButton:Material Design中的button, 一個凸起的材質(zhì)矩形按鈕
FlutterLogo:Flutter logo, 以widget形式. 這個widget遵從IconTheme。
Placeholder:一個繪制了一個盒子的的widget,代表日后有widget將會被添加到該盒子中

Material Components(Material Components Widgets)(實(shí)現(xiàn)了Material Design 指南的視覺、效果、motion-rich的widget。)

App結(jié)構(gòu)和導(dǎo)航

MaterialApp:一個方便的widget,它封裝了應(yīng)用程序?qū)崿F(xiàn)Material Design所需要的一些widget。

Scaffold:Material Design布局結(jié)構(gòu)的基本實(shí)現(xiàn)。此類提供了用于顯示drawer、snackbar和底部sheet的API。
Appbar:一個Material Design應(yīng)用程序欄,由工具欄和其他可能的widget(如TabBar和FlexibleSpaceBar)組成。
BottomNavigationBar:底部導(dǎo)航條,可以很容易地在tap之間切換和瀏覽頂級視圖。
TabBar:一個顯示水平選項(xiàng)卡的Material Design widget。
TabBarView:顯示與當(dāng)前選中的選項(xiàng)卡相對應(yīng)的頁面視圖。通常和TabBar一起使用。
WidgetsApp:一個方便的類,它封裝了應(yīng)用程序通常需要的一些widget。
Drawer:從Scaffold邊緣水平滑動以顯示應(yīng)用程序中導(dǎo)航鏈接的Material Design面板。

按鈕

RaisedButton:Material Design中的button, 一個凸起的材質(zhì)矩形按鈕
FloatingActionButton:一個圓形圖標(biāo)按鈕,它懸停在內(nèi)容之上,以展示應(yīng)用程序中的主要動作。FloatingActionButton通常用于Scaffold.floatingActionButton字段。
FlatButton:一個扁平的Material按鈕
IconButton:一個Material圖標(biāo)按鈕,點(diǎn)擊時會有水波動畫
PopupMenuButton:當(dāng)菜單隱藏式,點(diǎn)擊或調(diào)用onSelected時顯示一個彈出式菜單列表
ButtonBar:水平排列的按鈕組

輸入框和選擇框

TextField:文本輸入框
Checkbox:復(fù)選框,允許用戶從一組中選擇多個選項(xiàng)。
Radio:單選框,允許用戶從一組中選擇一個選項(xiàng)。
Switch:On/off 用于切換一個單一狀態(tài)
Slider:滑塊,允許用戶通過滑動滑塊來從一系列值中選擇。
Date & Time Pickers:日期&時間選擇器

對話框、Alert、Panel

SimpleDialog:簡單對話框可以顯示附加的提示或操作
AlertDialog:一個會中斷用戶操作的對話款,需要用戶確認(rèn)
BottomSheet:BottomSheet是一個從屏幕底部滑起的列表(以顯示更多的內(nèi)容)。你可以調(diào)用showBottomSheet()或showModalBottomSheet彈出
ExpansionPanel:擴(kuò)展面板包含創(chuàng)建流程,并允許輕量級地編輯元素。ExpansionPanel小部件實(shí)現(xiàn)此組件。(Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.)
SnackBar:具有可選操作的輕量級消息提示,在屏幕的底部顯示。

信息展示

Image:一個顯示圖片的widget
Icon:一個材料設(shè)計圖標(biāo)。
Chip:標(biāo)簽,一個Material widget。 它可以將一個復(fù)雜內(nèi)容實(shí)體展現(xiàn)在一個小塊中,如聯(lián)系人。
Tooltip:一個文本提示工具,幫助解釋一個按鈕或其他用戶界面,當(dāng)widget長時間按下時(當(dāng)用戶采取其他適當(dāng)操作時)顯示一個提示標(biāo)簽。
DataTable:數(shù)據(jù)表顯示原始數(shù)據(jù)集。它們通常出現(xiàn)在桌面企業(yè)產(chǎn)品中。DataTable Widget實(shí)現(xiàn)這個組件
Card:一個 Material Design 卡片。擁有一個圓角和陰影
LinearProgressIndicator:一個線性進(jìn)度條,另外還有一個圓形進(jìn)度條CircularProgressIndicator

布局

ListTile:一個固定高度的行,通常包含一些文本,以及一個行前或行尾圖標(biāo)。
Stepper:一個Material Design 步驟指示器,顯示一系列步驟的過程
Divider:一個邏輯1像素厚的水平分割線,兩邊都有填充

Cupertino(iOS風(fēng)格的widget)(Cupertino(iOS風(fēng)格的widget))

CupertinoActivityIndicator:一個iOS風(fēng)格的loading指示器。顯示一個圓形的轉(zhuǎn)圈菊花
CupertinoAlertDialog:iOS風(fēng)格的alert dialog
CupertinoButton:iOS風(fēng)格的button.
CupertinoDialog:iOS風(fēng)格的對話框
CupertinoDialogAction:通常用于CupertinoAlertDialog的一個button
CupertinoSlider:從一個范圍中選一個值.
CupertinoSwitch:iOS風(fēng)格的開關(guān). 用于單一狀態(tài)的開/關(guān)
CupertinoPageTransition:提供iOS風(fēng)格的頁面過度動畫
CupertinoNavigationBar:iOS風(fēng)格的導(dǎo)航欄. 通常和CupertinoPageScaffold一起使用。
CupertinoTabBar:iOS風(fēng)格的底部選項(xiàng)卡。 通常和CupertinoTabScaffold一起使用。
CupertinoPageScaffold:一個iOS風(fēng)格的頁面的基本布局結(jié)構(gòu)。包含內(nèi)容和導(dǎo)航欄
CupertinoTabScaffold:標(biāo)簽式iOS應(yīng)用程序的結(jié)構(gòu)。將選項(xiàng)卡欄放在內(nèi)容選項(xiàng)卡之上
CupertinoTabView:支持選項(xiàng)卡間并行導(dǎo)航項(xiàng)卡的根內(nèi)容。通常與CupertinoTabScaffolde一起使用

Layout(排列其它widget的columns、rows、grids和其它的layouts。)

布局 Widget

Container:一個擁有繪制、定位、調(diào)整大小的 widget。
Padding:一個widget, 會給其子widget添加指定的填充
Center:將其子widget居中顯示在自身內(nèi)部的widget
Align:一個widget,它可以將其子widget對齊,并可以根據(jù)子widget的大小自動調(diào)整大小。
FittedBox:按自己的大小調(diào)整其子widget的大小和位置。
AspectRatio:一個widget,試圖將子widget的大小指定為某個特定的長寬比
ConstrainedBox:對其子項(xiàng)施加附加約束的widget
Baseline:根據(jù)子項(xiàng)的基線對它們的位置進(jìn)行定位的widget。
FractionallySizedBox:一個widget,它把它的子項(xiàng)放在可用空間的一小部分。關(guān)于布局算法的更多細(xì)節(jié),見RenderFractionallySizedOverflowBox
IntrinsicHeight:一個widget,它將它的子widget的高度調(diào)整其本身實(shí)際的高度
IntrinsicWidth:一個widget,它將它的子widget的寬度調(diào)整其本身實(shí)際的寬度
LimitedBox:一個當(dāng)其自身不受約束時才限制其大小的盒子
Offstage:一個布局widget,可以控制其子widget的顯示和隱藏。
OverflowBox:對其子項(xiàng)施加不同約束的widget,它可能允許子項(xiàng)溢出父級。
SizedBox:一個特定大小的盒子。這個widget強(qiáng)制它的孩子有一個特定的寬度和高度。如果寬度或高度為NULL,則此widget將調(diào)整自身大小以匹配該維度中的孩子的大小。
SizedOverflowBox:一個特定大小的widget,但是會將它的原始約束傳遞給它的孩子,它可能會溢出。
Transform:在繪制子widget之前應(yīng)用轉(zhuǎn)換的widget。
CustomSingleChildLayout:一個自定義的擁有單個子widget的布局widget

擁有多個子元素的布局widget

Row:在水平方向上排列子widget的列表。
Column:在垂直方向上排列子widget的列表。
Stack:可以允許其子widget簡單的堆疊在一起
IndexedStack:從一個子widget列表中顯示單個孩子的Stack
Flow:一個實(shí)現(xiàn)流式布局算法的widget
Table:為其子widget使用表格布局算法的widget
Wrap:可以在水平或垂直方向多行顯示其子widget。
ListBody:一個widget,它沿著一個給定的軸,順序排列它的子元素
ListView:可滾動的列表控件。ListView是最常用的滾動widget,它在滾動方向上一個接一個地顯示它的孩子。在縱軸上,孩子們被要求填充ListView。
CustomMultiChildLayout:使用一個委托來對多個孩子進(jìn)行設(shè)置大小和定位的小部件

Layout helpers

LayoutBuilder:構(gòu)建一個可以依賴父窗口大小的widget樹。
Text(文本顯示和樣式)

Text

Text:單一格式的文本
RichText:一個富文本Text,可以顯示多種樣式的text。
DefaultTextStyle:文字樣式,用于指定Text widget的文字樣式

Assets、圖片、Icons(管理assets, 顯示圖片和Icon。)

Image:一個顯示圖片的widget
Icon:一個材料設(shè)計圖標(biāo)。
RawImage:一個直接顯示dart:ui.Image的widget
AssetBundle:包含應(yīng)用程序可以使用的資源,如圖像和字符串。對這些資源的訪問是異步,所以他們可以來自網(wǎng)絡(luò)(例如,從NetworkAssetBundle)或從本地文件系統(tǒng),這并不會掛起用戶界面。
Input(Material Components 和 Cupertino中獲取用戶輸入的widget。)

表單 Widgets

Form:一個可選的、用于給多個TextField分組的widget
FormField:一個單獨(dú)的表單字段。此widget維護(hù)表單字段的當(dāng)前狀態(tài),以便在UI中直觀地反映更新和驗(yàn)證錯誤。
RawKeyboardListener:每當(dāng)用戶按下或釋放鍵盤上的鍵時調(diào)用回調(diào)的widget。

動畫和Motion(在您的應(yīng)用中使用動畫。查看Flutter中的動畫總覽)

AnimatedContainer:在一段時間內(nèi)逐漸改變其值的容器。
AnimatedCrossFade:一個widget,在兩個孩子之間交叉淡入,并同時調(diào)整他們的尺寸
Hero:將其子項(xiàng)標(biāo)記為hero動畫候選的widget。
AnimatedBuilder:用于構(gòu)建動畫的通用小部件。AnimatedBuilder在有多個widget希望有一個動畫作為一個較大的建造函數(shù)部分時會非常有用。要使用AnimatedBuilder,只需構(gòu)建widget并將其傳給builder函數(shù)即可。
DecoratedBoxTransition:DecoratedBox的動畫版本,可以給它的Decoration不同屬性使用動畫
FadeTransition:對透明度使用動畫的widget
PositionedTransition:Positioned的動畫版本,它需要一個特定的動畫來將孩子的位置從動畫的生命周期的起始位置移到結(jié)束位置。
RotationTransition:對widget使用旋轉(zhuǎn)動畫
ScaleTransition:對widget使用縮放動畫
SizeTransition:動畫自己的大小和剪輯,并對齊。
SlideTransition:對相對于其正常位置的某個位置之間使用動畫
AnimatedDefaultTextStyle:在文本樣式切換時使用動畫
AnimatedListState:動畫列表的state
AnimatedModalBarrier:一個阻止用戶與widget交互的widget
AnimatedOpacity:Opacity的動畫版本,在給定的透明度變化時,自動地在給定的一段時間內(nèi)改變孩子的Opacity
AnimatedPhysicalModel:PhysicalModel的動畫版本
AnimatedPositioned:動畫版本的Positioned,每當(dāng)給定位置的變化,自動在給定的時間內(nèi)轉(zhuǎn)換孩子的位置。
AnimatedSize:動畫widget,當(dāng)給定的孩子的大小變化時,它自動地在給定時間內(nèi)轉(zhuǎn)換它的大小。
AnimatedWidget:當(dāng)給定的Listenable改變值時,會重新構(gòu)建該widget
AnimatedWidgetBaseState:具有隱式動畫的widget的基類

交互模型(響應(yīng)觸摸事件并將用戶路由到不同的頁面視圖(View)。)

交互模型Widget
LongPressDraggable:可以使其子widget在長按時可拖動
GestureDetector:一個檢測手勢的widget
DragTarget:一個拖動的目標(biāo)widget,在完成拖動時它可以接收數(shù)據(jù)
Dismissible:可以在拖動時隱藏的widget
IgnorePointer:在hit test中不可見的widget。當(dāng)ignoring為true時,此widget及其子樹不響應(yīng)事件。但它在布局過程中仍然消耗空間,并像往常一樣繪制它的孩子。它是無法捕獲事件對象、因?yàn)樗赗enderBox.hitTest中返回false
AbsorbPointer:在hit test期間吸收(攔截)事件。當(dāng)absorbing為true時,此小部件阻止其子樹通過終止命中測試來接收指針事件。它在布局過程中仍然消耗空間,并像往常一樣繪制它的孩子。它只是防止其孩子成為事件命中目標(biāo),因?yàn)樗鼜腞enderBox.hitTest返回true。
Navigator:導(dǎo)航器,可以在多個頁面(路由)棧之間跳轉(zhuǎn)。
Scrollable:實(shí)現(xiàn)了可滾動widget的交互模型,但不包含UI顯示相關(guān)的邏輯

樣式(管理應(yīng)用的主題,使應(yīng)用能夠響應(yīng)式的適應(yīng)屏幕尺寸或添加填充。)

樣式 Widget
Padding:一個widget, 會給其子widget添加指定的填充
Theme:將主題應(yīng)用于子widget。主題描述了應(yīng)用選擇的顏色和字體。
MediaQuery:建立一個子樹,在樹中媒體查詢解析不同的給定數(shù)據(jù)

繪制和效果(Widget將視覺效果應(yīng)用到其子組件,而不改變它們的布局、大小和位置。)

繪制和視覺效果Widget

Opacity:使其子widget透明的widget。
Transform:在繪制子widget之前應(yīng)用轉(zhuǎn)換的widget。
DecoratedBox:在孩子繪制之前或之后繪制裝飾的widget。
FractionalTranslation:繪制盒子之前給其添加一個偏移轉(zhuǎn)換
RotatedBox:可以延順時針以90度的倍數(shù)旋轉(zhuǎn)其子widget
ClipOval:用橢圓剪輯其孩子的widget
ClipPath:用path剪輯其孩子的widget
ClipRect:用矩形剪輯其孩子的widget
CustomPaint:提供一個畫布的widget,在繪制階段可以在畫布上繪制自定義圖形
BackdropFilter:一個widget,它將過濾器應(yīng)用到現(xiàn)有的繪圖內(nèi)容,然后繪制孩子。這種效果是比較昂貴的,尤其是如果過濾器是non-local,如blur。

Async(Flutter應(yīng)用的異步模型)

異步 Widgets(Flutter應(yīng)用的異步模型)

FutureBuilder:基于與Future交互的最新快照來構(gòu)建自身的widget
StreamBuilder:基于與流交互的最新快照構(gòu)建自身的widget

滾動(滾動一個擁有多個子組件的父組件)

可滾動的Widget

ListView:一個可滾動的列表
NestedScrollView:一個可以嵌套其它可滾動widget的widget
GridView:一個可滾動的二維空間數(shù)組
SingleChildScrollView:有一個子widget的可滾動的widget,子內(nèi)容超過父容器時可以滾動。
Scrollable:實(shí)現(xiàn)了可滾動widget的交互模型,但不包含UI顯示相關(guān)的邏輯
Scrollbar:一個Material Design 滾動條,表示當(dāng)前滾動到了什么位置
CustomScrollView:一個使用slivers創(chuàng)建自定義的滾動效果的ScrollView
NotificationListener:一個用來監(jiān)聽樹上冒泡通知的widget。
ScrollConfiguration:控制可滾動組件在子樹中的表現(xiàn)行為
RefreshIndicator:Material Design下拉刷新指示器,包裝一個可滾動widget

輔助功能(給你的App添加輔助功能(這是一個正在進(jìn)行的工作))

輔助功能 Widget

Semantics:一個widget,用以描述widget樹的具體語義。使用輔助工具、搜索引擎和其他語義分析軟件來確定應(yīng)用程序的含義。
MergeSemantics:合并其后代語義的widget。
ExcludeSemantics:刪除其后代所有語義的widget

flutter(全部組件)

基礎(chǔ)組件(在構(gòu)建您的第一個Flutter應(yīng)用程序之前,您絕對需要了解這些widget。)

基礎(chǔ) Widgets

Container : 一個擁有繪制、定位、調(diào)整大小的 widget。
Row:在水平方向上排列子widget的列表。
Column:在垂直方向上排列子widget的列表。
Image:一個顯示圖片的widget
Text:單一格式的文本
Icon:一個材料設(shè)計圖標(biāo)。
RaisedButton:Material Design中的button, 一個凸起的材質(zhì)矩形按鈕
FlutterLogo:Flutter logo, 以widget形式. 這個widget遵從IconTheme。
Placeholder:一個繪制了一個盒子的的widget,代表日后有widget將會被添加到該盒子中

Material Components(Material Components Widgets)(實(shí)現(xiàn)了Material Design 指南的視覺、效果、motion-rich的widget。)

App結(jié)構(gòu)和導(dǎo)航

MaterialApp:一個方便的widget,它封裝了應(yīng)用程序?qū)崿F(xiàn)Material Design所需要的一些widget。

Scaffold:Material Design布局結(jié)構(gòu)的基本實(shí)現(xiàn)。此類提供了用于顯示drawer、snackbar和底部sheet的API。
Appbar:一個Material Design應(yīng)用程序欄,由工具欄和其他可能的widget(如TabBar和FlexibleSpaceBar)組成。
BottomNavigationBar:底部導(dǎo)航條,可以很容易地在tap之間切換和瀏覽頂級視圖。
TabBar:一個顯示水平選項(xiàng)卡的Material Design widget。
TabBarView:顯示與當(dāng)前選中的選項(xiàng)卡相對應(yīng)的頁面視圖。通常和TabBar一起使用。
WidgetsApp:一個方便的類,它封裝了應(yīng)用程序通常需要的一些widget。
Drawer:從Scaffold邊緣水平滑動以顯示應(yīng)用程序中導(dǎo)航鏈接的Material Design面板。

按鈕

RaisedButton:Material Design中的button, 一個凸起的材質(zhì)矩形按鈕
FloatingActionButton:一個圓形圖標(biāo)按鈕,它懸停在內(nèi)容之上,以展示應(yīng)用程序中的主要動作。FloatingActionButton通常用于Scaffold.floatingActionButton字段。
FlatButton:一個扁平的Material按鈕
IconButton:一個Material圖標(biāo)按鈕,點(diǎn)擊時會有水波動畫
PopupMenuButton:當(dāng)菜單隱藏式,點(diǎn)擊或調(diào)用onSelected時顯示一個彈出式菜單列表
ButtonBar:水平排列的按鈕組

輸入框和選擇框

TextField:文本輸入框
Checkbox:復(fù)選框,允許用戶從一組中選擇多個選項(xiàng)。
Radio:單選框,允許用戶從一組中選擇一個選項(xiàng)。
Switch:On/off 用于切換一個單一狀態(tài)
Slider:滑塊,允許用戶通過滑動滑塊來從一系列值中選擇。
Date & Time Pickers:日期&時間選擇器

對話框、Alert、Panel

SimpleDialog:簡單對話框可以顯示附加的提示或操作
AlertDialog:一個會中斷用戶操作的對話款,需要用戶確認(rèn)
BottomSheet:BottomSheet是一個從屏幕底部滑起的列表(以顯示更多的內(nèi)容)。你可以調(diào)用showBottomSheet()或showModalBottomSheet彈出
ExpansionPanel:擴(kuò)展面板包含創(chuàng)建流程,并允許輕量級地編輯元素。ExpansionPanel小部件實(shí)現(xiàn)此組件。(Expansion panels contain creation flows and allow lightweight editing of an element. The ExpansionPanel widget implements this component.)
SnackBar:具有可選操作的輕量級消息提示,在屏幕的底部顯示。

信息展示

Image:一個顯示圖片的widget
Icon:一個材料設(shè)計圖標(biāo)。
Chip:標(biāo)簽,一個Material widget。 它可以將一個復(fù)雜內(nèi)容實(shí)體展現(xiàn)在一個小塊中,如聯(lián)系人。
Tooltip:一個文本提示工具,幫助解釋一個按鈕或其他用戶界面,當(dāng)widget長時間按下時(當(dāng)用戶采取其他適當(dāng)操作時)顯示一個提示標(biāo)簽。
DataTable:數(shù)據(jù)表顯示原始數(shù)據(jù)集。它們通常出現(xiàn)在桌面企業(yè)產(chǎn)品中。DataTable Widget實(shí)現(xiàn)這個組件
Card:一個 Material Design 卡片。擁有一個圓角和陰影
LinearProgressIndicator:一個線性進(jìn)度條,另外還有一個圓形進(jìn)度條CircularProgressIndicator

布局

ListTile:一個固定高度的行,通常包含一些文本,以及一個行前或行尾圖標(biāo)。
Stepper:一個Material Design 步驟指示器,顯示一系列步驟的過程
Divider:一個邏輯1像素厚的水平分割線,兩邊都有填充

Cupertino(iOS風(fēng)格的widget)(Cupertino(iOS風(fēng)格的widget))

CupertinoActivityIndicator:一個iOS風(fēng)格的loading指示器。顯示一個圓形的轉(zhuǎn)圈菊花
CupertinoAlertDialog:iOS風(fēng)格的alert dialog
CupertinoButton:iOS風(fēng)格的button.
CupertinoDialog:iOS風(fēng)格的對話框
CupertinoDialogAction:通常用于CupertinoAlertDialog的一個button
CupertinoSlider:從一個范圍中選一個值.
CupertinoSwitch:iOS風(fēng)格的開關(guān). 用于單一狀態(tài)的開/關(guān)
CupertinoPageTransition:提供iOS風(fēng)格的頁面過度動畫
CupertinoNavigationBar:iOS風(fēng)格的導(dǎo)航欄. 通常和CupertinoPageScaffold一起使用。
CupertinoTabBar:iOS風(fēng)格的底部選項(xiàng)卡。 通常和CupertinoTabScaffold一起使用。
CupertinoPageScaffold:一個iOS風(fēng)格的頁面的基本布局結(jié)構(gòu)。包含內(nèi)容和導(dǎo)航欄
CupertinoTabScaffold:標(biāo)簽式iOS應(yīng)用程序的結(jié)構(gòu)。將選項(xiàng)卡欄放在內(nèi)容選項(xiàng)卡之上
CupertinoTabView:支持選項(xiàng)卡間并行導(dǎo)航項(xiàng)卡的根內(nèi)容。通常與CupertinoTabScaffolde一起使用

Layout(排列其它widget的columns、rows、grids和其它的layouts。)

布局 Widget

Container:一個擁有繪制、定位、調(diào)整大小的 widget。
Padding:一個widget, 會給其子widget添加指定的填充
Center:將其子widget居中顯示在自身內(nèi)部的widget
Align:一個widget,它可以將其子widget對齊,并可以根據(jù)子widget的大小自動調(diào)整大小。
FittedBox:按自己的大小調(diào)整其子widget的大小和位置。
AspectRatio:一個widget,試圖將子widget的大小指定為某個特定的長寬比
ConstrainedBox:對其子項(xiàng)施加附加約束的widget
Baseline:根據(jù)子項(xiàng)的基線對它們的位置進(jìn)行定位的widget。
FractionallySizedBox:一個widget,它把它的子項(xiàng)放在可用空間的一小部分。關(guān)于布局算法的更多細(xì)節(jié),見RenderFractionallySizedOverflowBox
IntrinsicHeight:一個widget,它將它的子widget的高度調(diào)整其本身實(shí)際的高度
IntrinsicWidth:一個widget,它將它的子widget的寬度調(diào)整其本身實(shí)際的寬度
LimitedBox:一個當(dāng)其自身不受約束時才限制其大小的盒子
Offstage:一個布局widget,可以控制其子widget的顯示和隱藏。
OverflowBox:對其子項(xiàng)施加不同約束的widget,它可能允許子項(xiàng)溢出父級。
SizedBox:一個特定大小的盒子。這個widget強(qiáng)制它的孩子有一個特定的寬度和高度。如果寬度或高度為NULL,則此widget將調(diào)整自身大小以匹配該維度中的孩子的大小。
SizedOverflowBox:一個特定大小的widget,但是會將它的原始約束傳遞給它的孩子,它可能會溢出。
Transform:在繪制子widget之前應(yīng)用轉(zhuǎn)換的widget。
CustomSingleChildLayout:一個自定義的擁有單個子widget的布局widget

擁有多個子元素的布局widget

Row:在水平方向上排列子widget的列表。
Column:在垂直方向上排列子widget的列表。
Stack:可以允許其子widget簡單的堆疊在一起
IndexedStack:從一個子widget列表中顯示單個孩子的Stack
Flow:一個實(shí)現(xiàn)流式布局算法的widget
Table:為其子widget使用表格布局算法的widget
Wrap:可以在水平或垂直方向多行顯示其子widget。
ListBody:一個widget,它沿著一個給定的軸,順序排列它的子元素
ListView:可滾動的列表控件。ListView是最常用的滾動widget,它在滾動方向上一個接一個地顯示它的孩子。在縱軸上,孩子們被要求填充ListView。
CustomMultiChildLayout:使用一個委托來對多個孩子進(jìn)行設(shè)置大小和定位的小部件

Layout helpers

LayoutBuilder:構(gòu)建一個可以依賴父窗口大小的widget樹。
Text(文本顯示和樣式)

Text

Text:單一格式的文本
RichText:一個富文本Text,可以顯示多種樣式的text。
DefaultTextStyle:文字樣式,用于指定Text widget的文字樣式

Assets、圖片、Icons(管理assets, 顯示圖片和Icon。)

Image:一個顯示圖片的widget
Icon:一個材料設(shè)計圖標(biāo)。
RawImage:一個直接顯示dart:ui.Image的widget
AssetBundle:包含應(yīng)用程序可以使用的資源,如圖像和字符串。對這些資源的訪問是異步,所以他們可以來自網(wǎng)絡(luò)(例如,從NetworkAssetBundle)或從本地文件系統(tǒng),這并不會掛起用戶界面。
Input(Material Components 和 Cupertino中獲取用戶輸入的widget。)

表單 Widgets

Form:一個可選的、用于給多個TextField分組的widget
FormField:一個單獨(dú)的表單字段。此widget維護(hù)表單字段的當(dāng)前狀態(tài),以便在UI中直觀地反映更新和驗(yàn)證錯誤。
RawKeyboardListener:每當(dāng)用戶按下或釋放鍵盤上的鍵時調(diào)用回調(diào)的widget。

動畫和Motion(在您的應(yīng)用中使用動畫。查看Flutter中的動畫總覽)

AnimatedContainer:在一段時間內(nèi)逐漸改變其值的容器。
AnimatedCrossFade:一個widget,在兩個孩子之間交叉淡入,并同時調(diào)整他們的尺寸
Hero:將其子項(xiàng)標(biāo)記為hero動畫候選的widget。
AnimatedBuilder:用于構(gòu)建動畫的通用小部件。AnimatedBuilder在有多個widget希望有一個動畫作為一個較大的建造函數(shù)部分時會非常有用。要使用AnimatedBuilder,只需構(gòu)建widget并將其傳給builder函數(shù)即可。
DecoratedBoxTransition:DecoratedBox的動畫版本,可以給它的Decoration不同屬性使用動畫
FadeTransition:對透明度使用動畫的widget
PositionedTransition:Positioned的動畫版本,它需要一個特定的動畫來將孩子的位置從動畫的生命周期的起始位置移到結(jié)束位置。
RotationTransition:對widget使用旋轉(zhuǎn)動畫
ScaleTransition:對widget使用縮放動畫
SizeTransition:動畫自己的大小和剪輯,并對齊。
SlideTransition:對相對于其正常位置的某個位置之間使用動畫
AnimatedDefaultTextStyle:在文本樣式切換時使用動畫
AnimatedListState:動畫列表的state
AnimatedModalBarrier:一個阻止用戶與widget交互的widget
AnimatedOpacity:Opacity的動畫版本,在給定的透明度變化時,自動地在給定的一段時間內(nèi)改變孩子的Opacity
AnimatedPhysicalModel:PhysicalModel的動畫版本
AnimatedPositioned:動畫版本的Positioned,每當(dāng)給定位置的變化,自動在給定的時間內(nèi)轉(zhuǎn)換孩子的位置。
AnimatedSize:動畫widget,當(dāng)給定的孩子的大小變化時,它自動地在給定時間內(nèi)轉(zhuǎn)換它的大小。
AnimatedWidget:當(dāng)給定的Listenable改變值時,會重新構(gòu)建該widget
AnimatedWidgetBaseState:具有隱式動畫的widget的基類

交互模型(響應(yīng)觸摸事件并將用戶路由到不同的頁面視圖(View)。)

交互模型Widget
LongPressDraggable:可以使其子widget在長按時可拖動
GestureDetector:一個檢測手勢的widget
DragTarget:一個拖動的目標(biāo)widget,在完成拖動時它可以接收數(shù)據(jù)
Dismissible:可以在拖動時隱藏的widget
IgnorePointer:在hit test中不可見的widget。當(dāng)ignoring為true時,此widget及其子樹不響應(yīng)事件。但它在布局過程中仍然消耗空間,并像往常一樣繪制它的孩子。它是無法捕獲事件對象、因?yàn)樗赗enderBox.hitTest中返回false
AbsorbPointer:在hit test期間吸收(攔截)事件。當(dāng)absorbing為true時,此小部件阻止其子樹通過終止命中測試來接收指針事件。它在布局過程中仍然消耗空間,并像往常一樣繪制它的孩子。它只是防止其孩子成為事件命中目標(biāo),因?yàn)樗鼜腞enderBox.hitTest返回true。
Navigator:導(dǎo)航器,可以在多個頁面(路由)棧之間跳轉(zhuǎn)。
Scrollable:實(shí)現(xiàn)了可滾動widget的交互模型,但不包含UI顯示相關(guān)的邏輯

樣式(管理應(yīng)用的主題,使應(yīng)用能夠響應(yīng)式的適應(yīng)屏幕尺寸或添加填充。)

樣式 Widget
Padding:一個widget, 會給其子widget添加指定的填充
Theme:將主題應(yīng)用于子widget。主題描述了應(yīng)用選擇的顏色和字體。
MediaQuery:建立一個子樹,在樹中媒體查詢解析不同的給定數(shù)據(jù)

繪制和效果(Widget將視覺效果應(yīng)用到其子組件,而不改變它們的布局、大小和位置。)

繪制和視覺效果Widget

Opacity:使其子widget透明的widget。
Transform:在繪制子widget之前應(yīng)用轉(zhuǎn)換的widget。
DecoratedBox:在孩子繪制之前或之后繪制裝飾的widget。
FractionalTranslation:繪制盒子之前給其添加一個偏移轉(zhuǎn)換
RotatedBox:可以延順時針以90度的倍數(shù)旋轉(zhuǎn)其子widget
ClipOval:用橢圓剪輯其孩子的widget
ClipPath:用path剪輯其孩子的widget
ClipRect:用矩形剪輯其孩子的widget
CustomPaint:提供一個畫布的widget,在繪制階段可以在畫布上繪制自定義圖形
BackdropFilter:一個widget,它將過濾器應(yīng)用到現(xiàn)有的繪圖內(nèi)容,然后繪制孩子。這種效果是比較昂貴的,尤其是如果過濾器是non-local,如blur。

Async(Flutter應(yīng)用的異步模型)

異步 Widgets(Flutter應(yīng)用的異步模型)

FutureBuilder:基于與Future交互的最新快照來構(gòu)建自身的widget
StreamBuilder:基于與流交互的最新快照構(gòu)建自身的widget

滾動(滾動一個擁有多個子組件的父組件)

可滾動的Widget

ListView:一個可滾動的列表
NestedScrollView:一個可以嵌套其它可滾動widget的widget
GridView:一個可滾動的二維空間數(shù)組
SingleChildScrollView:有一個子widget的可滾動的widget,子內(nèi)容超過父容器時可以滾動。
Scrollable:實(shí)現(xiàn)了可滾動widget的交互模型,但不包含UI顯示相關(guān)的邏輯
Scrollbar:一個Material Design 滾動條,表示當(dāng)前滾動到了什么位置
CustomScrollView:一個使用slivers創(chuàng)建自定義的滾動效果的ScrollView
NotificationListener:一個用來監(jiān)聽樹上冒泡通知的widget。
ScrollConfiguration:控制可滾動組件在子樹中的表現(xiàn)行為
RefreshIndicator:Material Design下拉刷新指示器,包裝一個可滾動widget

輔助功能(給你的App添加輔助功能(這是一個正在進(jìn)行的工作))

輔助功能 Widget

Semantics:一個widget,用以描述widget樹的具體語義。使用輔助工具、搜索引擎和其他語義分析軟件來確定應(yīng)用程序的含義。
MergeSemantics:合并其后代語義的widget。
ExcludeSemantics:刪除其后代所有語義的widget

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。