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也會有padding,用在title的時候就有問題

Expanded

擴張

int flex = 1, // 擴張系數

配合Row Column 使用,除去精確寬高之后,可以占滿剩下的布局

Wrap

類似流式布局,當一行空間放不下時,會把控件放到下一行,適用于標簽類的布局和小圖標

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的動畫,以Animated開頭的有很多類似的組件

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

漸變動畫,漸顯漸隱的效果,但是位置被占著。

0是transparent,1是顯示

AnimatedOpacity 可以添加動畫

FutureBuilder

異步組件

image.jpeg
image.jpeg

FadeTransition

淡入淡出Widget

FloatingActionButton

image.jpeg

配合Scaffold和bottomNavigationBar可以把這個放到中間

PageView

PageView在增刪更新不及時的時候,需要增加key,

Table

表格

defaultVerticalAlignment可以設置table里面的item對齊方式

SliverAppBar

需要和CustomScrollView一起使用,可以實現推上去的效果

SliverGrid SliverList

Grid和List同時在一個滾動視圖里面

FadeInImage

異步圖片占位圖

FadeInImage.memoryNetwork

透明占位圖:kTransparentImage

StreamBuilder

事件流控件

InheritedModel

provider里面用到,子控件狀態跟隨父控件狀態

ClipRRect

clip round rect

圓角裁切,類似的還有ClipOval ClipPath之類

Hero

過渡動畫,兩個Navigator之間可以做過渡

CustomPaint

自定義畫筆

Tooltip

給視力不佳的人使用,增加提示信息

FittedBox

當子控件大于父控件的時候,讓子控件適配父控件

fit

alignment

LayoutBuilder

可以獲得父控件的布局約束,大小

AbsorbPointer

禁止點擊、滑動

Transform

各種復雜動畫

ImageFilter

圖片處理,模糊、傾斜、旋轉等

配合BackdropFilter使用,達到模糊效果,前模糊、背景模糊、局部模糊

詳情見高斯模糊

Align

比例用法

image.jpeg

Positioned

配合Stack使用,放置位置

AnimatedBuilder

動畫組件

image.jpeg

Dismissible

左滑刪除,左滑右滑都可以操作

Dismissible 小部件可通過向左或向右滑動來清除列表項。對于多方向滑動,它支持兩種背景,如果您的 UI 需要用戶垂直滑動,則有一個方向屬性!

SizedBox

使用 SizedBox,您可以設置任何部件的確切大小。可以指定兩個維度;或者只指定一個維度,讓 Flutter 布局規則設定另一個維度。

子控件設置width和height不生效,和父控件一樣大的時候,可以套這個或者UnconstrainedBox

ValueListenableBuilder

使用 ValueListenableBuilder 來為您的用戶界面進行實時的數據更新。同樣適用于動畫類控件!

Draggable

配合DragTarget使用,可以實現拖動控件

AnimatedList

列表刪除插入動畫

Flexible

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

image.jpeg

MediaQuery

獲取用戶設備大小、方向、系統UI的遮擋部分(類似SafeArea)

Spacer

自定義間距

image.jpeg

InheritedWidget

允許跨組件更新數據,provider使用了這個

AnimatedIcon

使用 AnimatedIcon 小部件將動畫圖標直接拖放到您的應用程序中。Flutter 還有很多靜態圖標可供選擇。

播放暫停動畫很好看

AspectRatio

寬高比控件

image.jpeg
image.jpeg

LimitedBox

父控件無約束時為子控件提供默認大小

父控件有大小,LimitedBox無效

image.jpeg

Placeholder

占位控件

RichText

富文本,配合TextSpan使用

ReorderableListView

ReorderableListView 展示出一個項目列表,用戶可以通過拖動項目到他們想要的地方來重新排序。

AnimatedSwitcher

兩個控件切換動畫,配合key使用可以動其中一個控件

AnimatedPositioned

滑動的Positioned動畫

image.jpeg

AnimatedPadding

Padding改變時,可以有動效

AnimatedPadding 是在 Widget 和屏幕邊框之間提供平滑緩沖區和空格的好方法。使用此選項可動態更改 Widget 的填充,并使其在兩個值之間設置動畫。

IndexedStack

這個類似Visibility,具體見對比

Semantics

為UI提供額外含義,有50多個屬性

ConstrainedBox

Flutter ConstrainedBox Widget 非常適合添加 Widget 大小調整行為的要求。在 ConstrainedBox 中包裝 Widget 可讓您指定其最小和最大寬度和高度。

image.jpeg

Stack

如果您曾想要重疊元素,那么 Stack 小部件就是為您準備的!Stack 允許您將多個小部件疊加在一起。 例如,您可以使用 Stack 在圖像上添加文本。

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

image.jpeg

AnimatedOpacity

淡入淡出的動畫

FractionallySizedBox

有時您的設計需要相對的維度。 FractionallySizedBox 允許您將子項的大小調整為總可用空間的一小部分。

比例布局,在Row和Column要套一個Flexible

image.jpeg

ListView

ListView.builder只加載可見部分

cacheExtent緩存屏幕外內容

Container

您是否有需要一些設計的 widget,例如背景顏色,形狀或某些大小限制?嘗試將其包裝在 Container 中!可幫助您組成,裝飾和定位子 widget。

ListTile

為什么要花費數小時來實現行、列、容器以及各種間距和樣式的完美項目布局?你只需要 ListTile 就能搞定! ListTile 為你實現 Material Design 模式的列表項,你只需要關注其中的內容即可

image.jpeg

SelectableText

您是否曾經想過要使應用程序中的一些文本可被選擇呢? SelectableText 正是適合您的 widget!

DataTable

您是否有一些重要數據要以表格的方式顯示給用戶?使用 DataTable 定義列,行并自動調整單元格大小!

Slider

滑動進度條

AlertDialog

系統彈窗,不好用

AnimatedCrossFade

交叉淡入本是電影術語,意指一要素漸進淡入另一要素。若 Flutter widget 也有類似功能不是實用嗎? 這方面,AnimatedCrossFade 就是解決方案。

切換組件

image.jpeg

60. DraggableScrollableSheet

您是否想將小部件拖到屏幕上? 小部件是否具有可滾動的內容? DraggableScrollableSheet 可以幫助您!

showModalBottomSheet的升級版,可以放大Sheet的區域

ColorFiltered

image.jpeg
image.jpeg

ToggleButtons

您想讓用戶從多個相關選項中選擇嗎? 將 ToggleButtons 添加到您的應用程序會有所幫助!

CupertinoActionSheet

您是否正在構建一個需要向用戶提供一系列下一步操作選項的 iOS 風格應用程序? CupertinoActionSheet 是適合您的 Widget!

TweenAnimationBuilder

您是否想要一個簡單的動畫,但是沒有一個內置的隱式動畫 widget 能解決問題? TweenAnimationBuilder 可以滿足您所有自定義動畫的需求,而無需擔心 AnimationController!

65. Image

您的 app 需要顯示圖片嗎?讓 Flutter 助您一臂之力。無論圖片來源是 assets (有時稱為資源)、網絡、文件系統還是 RAM (隨機存取內存)等等,都可利用 Image 這個 widget 顯示于屏幕。

image.jpeg

66. DefaultTabController & TabBar

您需要將 widget 置入標簽頁嗎?您可以使用 DefaultTabController、TabBar 和 TabBarView 小部件。

Drawer

需要為其他頁面提供導航?歡迎嘗試使用 Drawer!

SnackBar

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

image.jpeg

ListWheelScrollView

ListViews 能讓使用者瀏覽或選擇屏幕無法一次顯示的 item。不過有時候,一般的 ListView 太過枯燥乏味,好在有ListWheelScrollView。而本集視頻會揭曉其實用之處。

可以試一下實現之前輪盤效果

ShaderMask

著色器可以把控件疊加顏色,可以做ListView的陰影

NotificationListener

你知道 widget 可以分派通知 (notification) 嗎?例如 ListView 這類含有Scrollable組件的Widget,就會分派滾動通知。這方面可利用 NotificationListener 來處理這類通知。

72. Builder

大多數情況下,Flutter 中的部件在構建時,不會查找父部件的額外信息。但有時,編碼時會遇到的一些狀況是相同 BuildMethod 下,子部件需要存取父部件中的 BuildContext,這就是 Builder 部件的用途。

閉包思想,在獲取點擊位置的時候用到了,見文檔

ClipPath

您是否希望 widget 具有獨特的形狀? ClipPath 允許您定義自己的 widget 形狀!給定一個 CustomerClipper 和您定義的路徑,ClipPath 將把 widget 的可見區域限制在此路徑內。

CircularProgressIndicator and LinearProgressIndicator

您想要顯示 Material App 的任務完成進度或是它正在執行任務嗎?我們有一些 widget 可以派上用場!您可以使用 CircularProgressIndicator,以圓形進度條顯示進度。若喜歡用線性的進度條 請使用 LinearProgressIndicator。

Divider

當兩個 Widget 彼此之間需要一些空間時,在它們之間繪制一條線會很有幫助。無論您有需要分開的 Widget 還是 Widget 組,Divider Widget 都非常有用。了解如何劃分 Widget 并準確獲得所需尺寸!

ThemeData統一主題,可以把分割線統一處理

IgnorePointer

防止用戶與 app 的某些部分進行交互可能會派上用場。當 UI 改變了用戶的點擊使用方式時,這實際上是一個非常常見且令人沮喪的問題。您可以通過禁用 app 中的所有交互式元素來解決此問題,或者可以使用 IgnorePointer。

  1. CupertinoActivityIndicator

如果您在 UI 中使用 Cupertino Widget,而您的應用程序需要加載指示器,那么可以選用 CupertinoActivityIndicator Widget!

iOS的圓形加載中

ClipOval

有時,圖片或屏幕的其他部分看起來可能過于方正。而 ClipOval Widget 可將其子級裁剪為圓形和橢圓形。因此請發揮創意加以善用。

AnimatedWidget

是個抽象類,動畫有許多不同的選項。在許多情況下,只需使用 AnimatedWidget 即可使 widget 實現動畫。了解一些已經為您構建的動畫 widget,以及如何構建自己的動畫 widget!

Padding

內邊距

CheckboxListTile

有時候,應用程序需要一個地方來放置法律條款、版本號、許可證和所有其他的小字號附加條款。不能到最后一刻才開始創建這部分。如果您遇到這種情況,有一個 Flutter Widgets 可以幫您解決!

多選

image.jpeg

AboutDialog

image.jpeg

83. Package:async

如果您使用 Dart 編碼,則可能已經使用了 SDK 內置的異步支持,例如 Streams。您是否知道還有一個異步軟件包,其中包含許多有用的附加內容?

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,606評論 6 533
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,582評論 3 418
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,540評論 0 376
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,028評論 1 314
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,801評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,223評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,294評論 3 442
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,442評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,976評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,800評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,996評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,543評論 5 360
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,233評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,662評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,926評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,702評論 3 392
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,991評論 2 374

推薦閱讀更多精彩內容