# 布局類Widget
## 簡介
布局類Widget都會包含一個或多個子widget,不同的布局類Widget對子widget排版(layout)方式不同。我們在前面說過Element樹才是最終的繪制樹,Element樹是通過widget樹來創建的(通過`Widget.createElement()`),widget其實就是Element的配置數據。Flutter中,根據Widget是否需要包含子節點將Widget分為了三類,分別對應三種Element,如下表:
Widget對應的Element用途LeafRenderObjectWidgetLeafRenderObjectElementWidget樹的葉子節點,用于沒有子節點的widget,通常基礎widget都屬于這一類,如Text、Image。SingleChildRenderObjectWidgetSingleChildRenderObjectElement包含一個子Widget,如:ConstrainedBox、DecoratedBox等MultiChildRenderObjectWidgetMultiChildRenderObjectElement包含多個子Widget,一般都有一個children參數,接受一個Widget數組。如Row、Column、Stack等> 注意,Flutter中的很多Widget是直接繼承自StatelessWidget或StatefulWidget,然后在`build()`方法中構建真正的RenderObjectWidget,如Text,它其實是繼承自StatelessWidget,然后在`build()`方法中通過RichText來構建其子樹,而RichText才是繼承自LeafRenderObjectWidget。所以為了方便敘述,我們也可以直接說Text屬于LeafRenderObjectWidget(其它widget也可以這么描述),這才是本質。讀到這里我們也會發現,其實**StatelessWidget和StatefulWidget就是兩個用于組合Widget的基類,它們本身并不關聯最終的渲染對象(RenderObjectWidget)**。
布局類Widget就是指直接或間接繼承(包含)MultiChildRenderObjectWidget的Widget,它們一般都會有一個children屬性用于接收子Widget。我們看一下繼承關系 Widget > RenderObjectWidget > (Leaf/SingleChild/MultiChild)RenderObjectWidget 。RenderObjectWidget類中定義了創建、更新RenderObject的方法,子類必須實現他們,關于RenderObject我們現在只需要知道它是最終布局、渲染UI界面的對象即可,也就是說,對于布局類Widget來說,其布局算法都是通過對應的RenderObject對象來實現的,所以讀者如果對接下來介紹的某個布局類Widget原理感興趣,可以查看其RenderObject的實現,而在本章中,為了讓讀者對布局類Widget有個快速的認識,所以我們不會深入到RenderObject的細節中區。在學習本章時,讀者的重點是掌握不同布局類Widget的布局特點,具體原理和細節我們會在后面高級部分介紹。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示