https://space.bilibili.com/64169458/channel/detail?cid=131083
SafeArea
this.left = true,
this.top = true,
this.right = true,
this.bottom = true,
this.minimum = EdgeInsets.zero,
this.maintainBottomViewPadding = false,
SafeArea 如果頂部和底部都是圓角潜沦,比如iPhone亮蒋,如果不指定top的話煮寡,bottom也會(huì)有padding,用在title的時(shí)候就有問(wèn)題
Expanded
擴(kuò)張
int flex = 1, // 擴(kuò)張系數(shù)
配合Row Column 使用趾诗,除去精確寬高之后蜡感,可以占滿剩下的布局
Wrap
類(lèi)似流式布局,當(dāng)一行空間放不下時(shí)恃泪,會(huì)把控件放到下一行郑兴,適用于標(biāo)簽類(lèi)的布局和小圖標(biāo)
this.direction = Axis.horizontal,
this.alignment = WrapAlignment.start,
this.spacing = 0.0,
this.runAlignment = WrapAlignment.start,
this.runSpacing = 0.0,
this.crossAxisAlignment = WrapCrossAlignment.start,
this.textDirection,
this.verticalDirection = VerticalDirection.down,
this.clipBehavior = Clip.hardEdge,
AnimatedContainer
Container的動(dòng)畫(huà),以Animated開(kāi)頭的有很多類(lèi)似的組件
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
Curve curve = Curves.linear,
@required Duration duration,
VoidCallback onEnd,
Opacity
漸變動(dòng)畫(huà)贝乎,漸顯漸隱的效果情连,但是位置被占著。
0是transparent览效,1是顯示
AnimatedOpacity 可以添加動(dòng)畫(huà)
FutureBuilder
異步組件
FadeTransition
淡入淡出Widget
FloatingActionButton
配合Scaffold和bottomNavigationBar可以把這個(gè)放到中間
PageView
PageView在增刪更新不及時(shí)的時(shí)候蒙具,需要增加key,
Table
表格
defaultVerticalAlignment可以設(shè)置table里面的item對(duì)齊方式
SliverAppBar
需要和CustomScrollView一起使用朽肥,可以實(shí)現(xiàn)推上去的效果
SliverGrid SliverList
Grid和List同時(shí)在一個(gè)滾動(dòng)視圖里面
FadeInImage
異步圖片占位圖
FadeInImage.memoryNetwork
透明占位圖:kTransparentImage
StreamBuilder
事件流控件
InheritedModel
provider里面用到,子控件狀態(tài)跟隨父控件狀態(tài)
ClipRRect
clip round rect
圓角裁切持钉,類(lèi)似的還有ClipOval ClipPath之類(lèi)
Hero
過(guò)渡動(dòng)畫(huà)衡招,兩個(gè)Navigator之間可以做過(guò)渡
CustomPaint
自定義畫(huà)筆
Tooltip
給視力不佳的人使用,增加提示信息
FittedBox
當(dāng)子控件大于父控件的時(shí)候每强,讓子控件適配父控件
fit
alignment
LayoutBuilder
可以獲得父控件的布局約束始腾,大小
AbsorbPointer
禁止點(diǎn)擊州刽、滑動(dòng)
Transform
各種復(fù)雜動(dòng)畫(huà)
ImageFilter
圖片處理,模糊浪箭、傾斜穗椅、旋轉(zhuǎn)等
配合BackdropFilter使用,達(dá)到模糊效果奶栖,前模糊匹表、背景模糊、局部模糊
詳情見(jiàn)高斯模糊
Align
比例用法
Positioned
配合Stack使用宣鄙,放置位置
AnimatedBuilder
動(dòng)畫(huà)組件
Dismissible
左滑刪除袍镀,左滑右滑都可以操作
Dismissible 小部件可通過(guò)向左或向右滑動(dòng)來(lái)清除列表項(xiàng)。對(duì)于多方向滑動(dòng)冻晤,它支持兩種背景苇羡,如果您的 UI 需要用戶垂直滑動(dòng),則有一個(gè)方向?qū)傩裕?/p>
SizedBox
使用 SizedBox鼻弧,您可以設(shè)置任何部件的確切大小设江。可以指定兩個(gè)維度攘轩;或者只指定一個(gè)維度叉存,讓 Flutter 布局規(guī)則設(shè)定另一個(gè)維度。
子控件設(shè)置width和height不生效撑刺,和父控件一樣大的時(shí)候鹉胖,可以套這個(gè)或者UnconstrainedBox
ValueListenableBuilder
使用 ValueListenableBuilder 來(lái)為您的用戶界面進(jìn)行實(shí)時(shí)的數(shù)據(jù)更新。同樣適用于動(dòng)畫(huà)類(lèi)控件够傍!
Draggable
配合DragTarget使用甫菠,可以實(shí)現(xiàn)拖動(dòng)控件
AnimatedList
列表刪除插入動(dòng)畫(huà)
Flexible
靈活布局,可以按比例放置
MediaQuery
獲取用戶設(shè)備大小冕屯、方向寂诱、系統(tǒng)UI的遮擋部分(類(lèi)似SafeArea)
Spacer
自定義間距
InheritedWidget
允許跨組件更新數(shù)據(jù),provider使用了這個(gè)
AnimatedIcon
使用 AnimatedIcon 小部件將動(dòng)畫(huà)圖標(biāo)直接拖放到您的應(yīng)用程序中安聘。Flutter 還有很多靜態(tài)圖標(biāo)可供選擇痰洒。
播放暫停動(dòng)畫(huà)很好看
AspectRatio
寬高比控件
LimitedBox
父控件無(wú)約束時(shí)為子控件提供默認(rèn)大小
父控件有大小,LimitedBox無(wú)效
Placeholder
占位控件
RichText
富文本浴韭,配合TextSpan使用
ReorderableListView
ReorderableListView 展示出一個(gè)項(xiàng)目列表丘喻,用戶可以通過(guò)拖動(dòng)項(xiàng)目到他們想要的地方來(lái)重新排序。
AnimatedSwitcher
兩個(gè)控件切換動(dòng)畫(huà)念颈,配合key使用可以動(dòng)其中一個(gè)控件
AnimatedPositioned
滑動(dòng)的Positioned動(dòng)畫(huà)
AnimatedPadding
Padding改變時(shí)泉粉,可以有動(dòng)效
AnimatedPadding 是在 Widget 和屏幕邊框之間提供平滑緩沖區(qū)和空格的好方法。使用此選項(xiàng)可動(dòng)態(tài)更改 Widget 的填充,并使其在兩個(gè)值之間設(shè)置動(dòng)畫(huà)嗡靡。
IndexedStack
這個(gè)類(lèi)似Visibility跺撼,具體見(jiàn)對(duì)比
Semantics
為UI提供額外含義,有50多個(gè)屬性
ConstrainedBox
Flutter ConstrainedBox Widget 非常適合添加 Widget 大小調(diào)整行為的要求讨彼。在 ConstrainedBox 中包裝 Widget 可讓您指定其最小和最大寬度和高度歉井。
Stack
如果您曾想要重疊元素,那么 Stack 小部件就是為您準(zhǔn)備的哈误!Stack 允許您將多個(gè)小部件疊加在一起哩至。 例如,您可以使用 Stack 在圖像上添加文本黑滴。
疊加超出父控件大小憨募,可以選擇剪裁掉
AnimatedOpacity
淡入淡出的動(dòng)畫(huà)
FractionallySizedBox
有時(shí)您的設(shè)計(jì)需要相對(duì)的維度。 FractionallySizedBox 允許您將子項(xiàng)的大小調(diào)整為總可用空間的一小部分袁辈。
比例布局菜谣,在Row和Column要套一個(gè)Flexible
ListView
ListView.builder只加載可見(jiàn)部分
cacheExtent緩存屏幕外內(nèi)容
Container
您是否有需要一些設(shè)計(jì)的 widget,例如背景顏色晚缩,形狀或某些大小限制尾膊?嘗試將其包裝在 Container 中!可幫助您組成荞彼,裝飾和定位子 widget冈敛。
ListTile
為什么要花費(fèi)數(shù)小時(shí)來(lái)實(shí)現(xiàn)行、列鸣皂、容器以及各種間距和樣式的完美項(xiàng)目布局抓谴?你只需要 ListTile 就能搞定! ListTile 為你實(shí)現(xiàn) Material Design 模式的列表項(xiàng)寞缝,你只需要關(guān)注其中的內(nèi)容即可
SelectableText
您是否曾經(jīng)想過(guò)要使應(yīng)用程序中的一些文本可被選擇呢? SelectableText 正是適合您的 widget癌压!
DataTable
您是否有一些重要數(shù)據(jù)要以表格的方式顯示給用戶?使用 DataTable 定義列荆陆,行并自動(dòng)調(diào)整單元格大刑步臁!
Slider
滑動(dòng)進(jìn)度條
AlertDialog
系統(tǒng)彈窗被啼,不好用
AnimatedCrossFade
交叉淡入本是電影術(shù)語(yǔ)帜消,意指一要素漸進(jìn)淡入另一要素。若 Flutter widget 也有類(lèi)似功能不是實(shí)用嗎浓体? 這方面泡挺,AnimatedCrossFade 就是解決方案。
切換組件
60. DraggableScrollableSheet
您是否想將小部件拖到屏幕上? 小部件是否具有可滾動(dòng)的內(nèi)容? DraggableScrollableSheet 可以幫助您命浴!
showModalBottomSheet的升級(jí)版粘衬,可以放大Sheet的區(qū)域
ColorFiltered
ToggleButtons
您想讓用戶從多個(gè)相關(guān)選項(xiàng)中選擇嗎? 將 ToggleButtons 添加到您的應(yīng)用程序會(huì)有所幫助!
CupertinoActionSheet
您是否正在構(gòu)建一個(gè)需要向用戶提供一系列下一步操作選項(xiàng)的 iOS 風(fēng)格應(yīng)用程序? CupertinoActionSheet 是適合您的 Widget稚新!
TweenAnimationBuilder
您是否想要一個(gè)簡(jiǎn)單的動(dòng)畫(huà),但是沒(méi)有一個(gè)內(nèi)置的隱式動(dòng)畫(huà) widget 能解決問(wèn)題跪腹? TweenAnimationBuilder 可以滿足您所有自定義動(dòng)畫(huà)的需求褂删,而無(wú)需擔(dān)心 AnimationController!
65. Image
您的 app 需要顯示圖片嗎冲茸?讓 Flutter 助您一臂之力屯阀。無(wú)論圖片來(lái)源是 assets (有時(shí)稱(chēng)為資源)、網(wǎng)絡(luò)轴术、文件系統(tǒng)還是 RAM (隨機(jī)存取內(nèi)存)等等难衰,都可利用 Image 這個(gè) widget 顯示于屏幕。
66. DefaultTabController & TabBar
您需要將 widget 置入標(biāo)簽頁(yè)嗎逗栽?您可以使用 DefaultTabController盖袭、TabBar 和 TabBarView 小部件。
Drawer
需要為其他頁(yè)面提供導(dǎo)航彼宠?歡迎嘗試使用 Drawer鳄虱!
SnackBar
您是否想在應(yīng)用中顯示快速消息?那么 SnackBar 非常適合您凭峡!SnackBar 可以讓您在應(yīng)用程序的底部彈出一條消息幾秒鐘拙已。
ListWheelScrollView
ListViews 能讓使用者瀏覽或選擇屏幕無(wú)法一次顯示的 item。不過(guò)有時(shí)候摧冀,一般的 ListView 太過(guò)枯燥乏味倍踪,好在有ListWheelScrollView。而本集視頻會(huì)揭曉其實(shí)用之處索昂。
可以試一下實(shí)現(xiàn)之前輪盤(pán)效果
ShaderMask
著色器可以把控件疊加顏色建车,可以做ListView的陰影
NotificationListener
你知道 widget 可以分派通知 (notification) 嗎?例如 ListView 這類(lèi)含有Scrollable組件的Widget楼镐,就會(huì)分派滾動(dòng)通知癞志。這方面可利用 NotificationListener 來(lái)處理這類(lèi)通知。
72. Builder
大多數(shù)情況下框产,F(xiàn)lutter 中的部件在構(gòu)建時(shí)凄杯,不會(huì)查找父部件的額外信息。但有時(shí)秉宿,編碼時(shí)會(huì)遇到的一些狀況是相同 BuildMethod 下戒突,子部件需要存取父部件中的 BuildContext,這就是 Builder 部件的用途描睦。
閉包思想膊存,在獲取點(diǎn)擊位置的時(shí)候用到了,見(jiàn)文檔
ClipPath
您是否希望 widget 具有獨(dú)特的形狀? ClipPath 允許您定義自己的 widget 形狀隔崎!給定一個(gè) CustomerClipper 和您定義的路徑今艺,ClipPath 將把 widget 的可見(jiàn)區(qū)域限制在此路徑內(nèi)。
CircularProgressIndicator and LinearProgressIndicator
您想要顯示 Material App 的任務(wù)完成進(jìn)度或是它正在執(zhí)行任務(wù)嗎爵卒?我們有一些 widget 可以派上用場(chǎng)虚缎!您可以使用 CircularProgressIndicator,以圓形進(jìn)度條顯示進(jìn)度钓株。若喜歡用線性的進(jìn)度條 請(qǐng)使用 LinearProgressIndicator实牡。
Divider
當(dāng)兩個(gè) Widget 彼此之間需要一些空間時(shí),在它們之間繪制一條線會(huì)很有幫助轴合。無(wú)論您有需要分開(kāi)的 Widget 還是 Widget 組创坞,Divider Widget 都非常有用。了解如何劃分 Widget 并準(zhǔn)確獲得所需尺寸受葛!
ThemeData統(tǒng)一主題题涨,可以把分割線統(tǒng)一處理
IgnorePointer
防止用戶與 app 的某些部分進(jìn)行交互可能會(huì)派上用場(chǎng)。當(dāng) UI 改變了用戶的點(diǎn)擊使用方式時(shí)奔坟,這實(shí)際上是一個(gè)非常常見(jiàn)且令人沮喪的問(wèn)題携栋。您可以通過(guò)禁用 app 中的所有交互式元素來(lái)解決此問(wèn)題,或者可以使用 IgnorePointer咳秉。
- CupertinoActivityIndicator
如果您在 UI 中使用 Cupertino Widget婉支,而您的應(yīng)用程序需要加載指示器,那么可以選用 CupertinoActivityIndicator Widget澜建!
iOS的圓形加載中
ClipOval
有時(shí)向挖,圖片或屏幕的其他部分看起來(lái)可能過(guò)于方正。而 ClipOval Widget 可將其子級(jí)裁剪為圓形和橢圓形炕舵。因此請(qǐng)發(fā)揮創(chuàng)意加以善用何之。
AnimatedWidget
是個(gè)抽象類(lèi),動(dòng)畫(huà)有許多不同的選項(xiàng)咽筋。在許多情況下溶推,只需使用 AnimatedWidget 即可使 widget 實(shí)現(xiàn)動(dòng)畫(huà)。了解一些已經(jīng)為您構(gòu)建的動(dòng)畫(huà) widget奸攻,以及如何構(gòu)建自己的動(dòng)畫(huà) widget蒜危!
Padding
內(nèi)邊距
CheckboxListTile
有時(shí)候,應(yīng)用程序需要一個(gè)地方來(lái)放置法律條款睹耐、版本號(hào)辐赞、許可證和所有其他的小字號(hào)附加條款。不能到最后一刻才開(kāi)始創(chuàng)建這部分硝训。如果您遇到這種情況响委,有一個(gè) Flutter Widgets 可以幫您解決!
多選
AboutDialog
83. Package:async
如果您使用 Dart 編碼新思,則可能已經(jīng)使用了 SDK 內(nèi)置的異步支持,例如 Streams赘风。您是否知道還有一個(gè)異步軟件包夹囚,其中包含許多有用的附加內(nèi)容?