Flutter widgets

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,

image.jpeg

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,

image.jpeg

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

異步組件

image.jpeg
image.jpeg

FadeTransition

淡入淡出Widget

FloatingActionButton

image.jpeg

配合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

比例用法

image.jpeg

Positioned

配合Stack使用宣鄙,放置位置

AnimatedBuilder

動(dòng)畫(huà)組件

image.jpeg

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

靈活布局,可以按比例放置

image.jpeg

MediaQuery

獲取用戶設(shè)備大小冕屯、方向寂诱、系統(tǒng)UI的遮擋部分(類(lèi)似SafeArea)

Spacer

自定義間距

image.jpeg

InheritedWidget

允許跨組件更新數(shù)據(jù),provider使用了這個(gè)

AnimatedIcon

使用 AnimatedIcon 小部件將動(dòng)畫(huà)圖標(biāo)直接拖放到您的應(yīng)用程序中安聘。Flutter 還有很多靜態(tài)圖標(biāo)可供選擇痰洒。

播放暫停動(dòng)畫(huà)很好看

AspectRatio

寬高比控件

image.jpeg
image.jpeg

LimitedBox

父控件無(wú)約束時(shí)為子控件提供默認(rèn)大小

父控件有大小,LimitedBox無(wú)效

image.jpeg

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à)

image.jpeg

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 可讓您指定其最小和最大寬度和高度歉井。

image.jpeg

Stack

如果您曾想要重疊元素,那么 Stack 小部件就是為您準(zhǔn)備的哈误!Stack 允許您將多個(gè)小部件疊加在一起哩至。 例如,您可以使用 Stack 在圖像上添加文本黑滴。

疊加超出父控件大小憨募,可以選擇剪裁掉

image.jpeg

AnimatedOpacity

淡入淡出的動(dòng)畫(huà)

FractionallySizedBox

有時(shí)您的設(shè)計(jì)需要相對(duì)的維度。 FractionallySizedBox 允許您將子項(xiàng)的大小調(diào)整為總可用空間的一小部分袁辈。

比例布局菜谣,在Row和Column要套一個(gè)Flexible

image.jpeg

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)容即可

image.jpeg

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 就是解決方案。

切換組件

image.jpeg

60. DraggableScrollableSheet

您是否想將小部件拖到屏幕上? 小部件是否具有可滾動(dòng)的內(nèi)容? DraggableScrollableSheet 可以幫助您命浴!

showModalBottomSheet的升級(jí)版粘衬,可以放大Sheet的區(qū)域

ColorFiltered

image.jpeg
image.jpeg

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 顯示于屏幕。

image.jpeg

66. DefaultTabController & TabBar

您需要將 widget 置入標(biāo)簽頁(yè)嗎逗栽?您可以使用 DefaultTabController盖袭、TabBar 和 TabBarView 小部件。

Drawer

需要為其他頁(yè)面提供導(dǎo)航彼宠?歡迎嘗試使用 Drawer鳄虱!

SnackBar

您是否想在應(yīng)用中顯示快速消息?那么 SnackBar 非常適合您凭峡!SnackBar 可以讓您在應(yīng)用程序的底部彈出一條消息幾秒鐘拙已。

image.jpeg

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咳秉。

  1. 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 可以幫您解決!

多選

image.jpeg

AboutDialog

image.jpeg

83. Package:async

如果您使用 Dart 編碼新思,則可能已經(jīng)使用了 SDK 內(nèi)置的異步支持,例如 Streams赘风。您是否知道還有一個(gè)異步軟件包夹囚,其中包含許多有用的附加內(nèi)容?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末邀窃,一起剝皮案震驚了整個(gè)濱河市崔兴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛔翅,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件位谋,死亡現(xiàn)場(chǎng)離奇詭異山析,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)掏父,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)笋轨,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人赊淑,你說(shuō)我怎么就攤上這事爵政。” “怎么了陶缺?”我有些...
    開(kāi)封第一講書(shū)人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵钾挟,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我饱岸,道長(zhǎng)掺出,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任苫费,我火速辦了婚禮汤锨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘百框。我一直安慰自己闲礼,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布铐维。 她就那樣靜靜地躺著柬泽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪方椎。 梳的紋絲不亂的頭發(fā)上聂抢,一...
    開(kāi)封第一講書(shū)人閱讀 51,631評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音棠众,去河邊找鬼琳疏。 笑死有决,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的空盼。 我是一名探鬼主播书幕,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼揽趾!你這毒婦竟也來(lái)了台汇?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤篱瞎,失蹤者是張志新(化名)和其女友劉穎苟呐,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體俐筋,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡牵素,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了澄者。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片笆呆。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖粱挡,靈堂內(nèi)的尸體忽然破棺而出赠幕,到底是詐尸還是另有隱情,我是刑警寧澤询筏,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布榕堰,位于F島的核電站,受9級(jí)特大地震影響屈留,放射性物質(zhì)發(fā)生泄漏局冰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一灌危、第九天 我趴在偏房一處隱蔽的房頂上張望康二。 院中可真熱鬧,春花似錦勇蝙、人聲如沸沫勿。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)产雹。三九已至,卻和暖如春翁锡,著一層夾襖步出監(jiān)牢的瞬間蔓挖,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工馆衔, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留瘟判,地道東北人怨绣。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像拷获,于是被迫代替她去往敵國(guó)和親篮撑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容