4.這是一份Flutter常用Widget指南

CoorChice發表於2019-03-19

目錄傳送門:《Flutter快速上手指南》先導篇

在 Flutter 中,所有的東西都是 Widget —— 萬物皆 Widget

Image(圖片)、Text(文字)、Container(容器)、Padding(間距)、Align(對齊方式)、GestureDetector(手勢).. 所有你知的一切,基本都是 Widget。

Flutter 通過一個個的 Widget 來拼裝檢視樹,處理互動、事件、資料等。

它很靈活,但有些太靈活了。

開發者必須花費很多的精力去掌握這些 Widget。

看個簡單的例子。

這個元件就是由多個 Widget 拼裝而成。

從上圖的檢視樹中可以看到,這樣一個簡單的導航欄場景,也需要很多的 Widget 來組裝。

你得明確一點,在 Flutter 的開發過程中,你的大部分時間都是在和各種各樣的 Widget 打交道。

它們種類很多,目前已經有 30+ 的 Widget 了,並且數量可能仍然在增加。

要完全掌握所有的 Widget 是很困難的,但你應該掌握大部分常用的 Widget,對其它的 Widget 也該有點認知。

本篇會羅列一些常用的 Widget 使用指南。

你可以收藏起來,以便隨時可以到這來查詢你不太確定的 Widget。

基礎 Widgets

? Widget-Container

? Widget-Button

? Widget-Row和Column

? Widget-Text

? Widget-Scaffold

? Widget-Icon

? Widget-Image

? Widget-Stack

? Widget-TabBar+TabBarView

? Widget-輸入框TextField

用於佈局的 Widgets

? Widget-Align

? Widget-Center

? Widget-Expended

? Widget-LayoutBuilder

? Widget-Padding

? Widget-Wrap

可滾動 Widgets

? Widget-CustomScrollView

? Widget-GridView

? Widget-ListView

? Widget-PageView

? Widget-SingleChildScrollView

裝飾 Widgets

? Widget-BoxDecoration

? Widget-Clip系列

? Widget-Opacity

? Widget-SafeArea

? Widget-高斯模糊BackdropFilter

功能性 Widgets

? Widget-FutureBuilder和StreamBuilder

? Widget-攔截返回鍵WillPopScope

⚠️ 本篇文章在動態更新中.. 不要嘗試點選前面有 ? 的連結!


目錄傳送門:《Flutter快速上手指南》先導篇

如何找到我?

傳送門:CoorChice 的主頁

傳送門:CoorChice 的 Github


相關文章