[toc]
Widget
在 Flutter 中 Everything's a Widget贱枣。
啥都別說(shuō)先莽一遍，在Flutter中構(gòu)建布局
可視化調(diào)試
Flutter 開(kāi)發(fā)中沒(méi)有實(shí)時(shí)預(yù)覽卒落，剛上手編寫(xiě) UI 界面時(shí)對(duì)組件的大小或位置不好把握。這個(gè)時(shí)候開(kāi)啟可視化調(diào)試為組件加上標(biāo)注只壳，可以更好的學(xué)習(xí)和[圖片上傳失敗...(image-41ff07-1564558939474)][圖片上傳失敗...(image-3fab06-1564558949839)]
理解組件的使用。
在 main() 方法中加入 debugPaintSizeEnabled = true; 并導(dǎo)入 rendering.dart 然后啟動(dòng)程序吼句。
所有的盒子都會(huì)得到一個(gè)明亮的深青色邊框命辖，padding（來(lái)自widget如Padding）顯示為淺藍(lán)色分蓖，子widget周?chē)幸粋€(gè)深藍(lán)色框么鹤， 對(duì)齊方式（來(lái)自widget如Center和Align）顯示為黃色箭頭. 空白（如沒(méi)有任何子節(jié)點(diǎn)的Container）以灰色顯示
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled = true;
runApp(MyApp());
}
其他參數(shù)：
- debugPaintBaselinesEnabled:對(duì)于具有基線的對(duì)象蒸甜，文字基線以綠色顯示，表意(ideographic)基線以橙色顯示
- debugPaintPointersEnabled：該標(biāo)志打開(kāi)一個(gè)特殊模式辉巡，任何正在點(diǎn)擊的對(duì)象都會(huì)以深青色突出顯示郊楣。 這可以幫助您確定某個(gè)對(duì)象是否以某種不正確地方式進(jìn)行hit測(cè)試（Flutter檢測(cè)點(diǎn)擊的位置是否有能響應(yīng)用戶(hù)操作的widget）,例如净蚤，如果它實(shí)際上超出了其父項(xiàng)的范圍输硝，首先不會(huì)考慮通過(guò)hit測(cè)試
- debugPaintLayerBordersEnabled：該標(biāo)志用橙色或輪廓線標(biāo)出每個(gè)層的邊界
- debugRepaintRainbowEnabled： 只要合成圖層重繪時(shí)点把，這會(huì)使該層被一組旋轉(zhuǎn)色所覆蓋
參考 https://flutterchina.club/debugging/ 調(diào)試應(yīng)用
布局 Widget
布局 Widget 就是 Flutter 中的容器，類(lèi)似 Android 中的 layout（ViewGroup）郎逃。 Flutter 中布局 Widget 可以分為三類(lèi)：
擁有單個(gè)子元素的布局 widget
擁有多個(gè)子元素的布局 widget
Layout helpers
擁有單個(gè)子元素的布局 widget
官方文檔中擁有單個(gè)子元素的布局 widget 如下表。
| Widget | 作用 |
|---|---|
| Container | 一個(gè)擁有繪制衣厘、定位压恒、調(diào)整大小的 widget |
| Padding | 會(huì)給其子 widget 添加指定的填充 |
| Center | 將其子 widget 居中顯示在自身內(nèi)部的 widget |
| Align | 它可以將其子 widget 對(duì)齊型宙，并可以根據(jù)子 widget 的大小自動(dòng)調(diào)整大小 |
| FittedBox | 按自己的大小調(diào)整其子 widget 的大小和位置 |
| AspectRatio | 試圖將子 widget 的大小指定為某個(gè)特定的長(zhǎng)寬比 |
| ConstrainedBox | 對(duì)其子項(xiàng)施加附加約束的 widget |
| Baseline | 根據(jù)子項(xiàng)的基線對(duì)它們的位置進(jìn)行定位的 widget |
| FractionallySizedBox | 把它的子項(xiàng)放在可用空間的一小部分 |
| IntrinsicHeight | 將它的子 widget 的高度調(diào)整其本身實(shí)際的高度 |
| IntrinsicWidth | 它的子 widget 的寬度調(diào)整其本身實(shí)際的寬度 |
| LimitedBox | 當(dāng)其自身不受約束時(shí)才限制其大小的盒子 |
| Offstage | 可以控制其子 widget 的顯示和隱藏 |
| OverflowBox | 對(duì)其子項(xiàng)施加不同約束的 widget，它可能允許子項(xiàng)溢出父級(jí) |
| SizedBox | 一個(gè)特定大小的盒子搁嗓。這個(gè) widget 強(qiáng)制它的孩子有一個(gè)特定的寬度和高度箱靴。如果寬度或高度為NULL衡怀，則此 widget 將調(diào)整自身大小以匹配該維度中的孩子的大小 |
| SizedOverflowBox | 一個(gè)特定大小的 widget，但是會(huì)將它的原始約束傳遞給它的孩子荐类，它可能會(huì)溢出 |
| Transform | 在繪制子 widget 之前應(yīng)用轉(zhuǎn)換的 widget |
| CustomSingleChildLayout | 一個(gè)自定義的擁有單個(gè)子 widget 的布局 widget |
擁有多個(gè)子元素的布局 widget
| Widget | 作用 |
|---|---|
| Row | 在水平方向上排列子widget的列表 |
| Column | 在垂直方向上排列子widget的列表 |
| Stack | 可以允許其子widget簡(jiǎn)單的堆疊在一起 |
| IndexedStack | 從一個(gè)子widget列表中顯示單個(gè)孩子的Stack |
| Flow | 一個(gè)實(shí)現(xiàn)流式布局算法的widget |
| Table | 為其子widget使用表格布局算法的widget |
| Wrap | 可以在水平或垂直方向多行顯示其子widget |
| ListBody | 一個(gè)widget玉罐，它沿著一個(gè)給定的軸厌小，順序排列它的子元素 |
| ListView | 可滾動(dòng)的列表控件璧亚。ListView是最常用的滾動(dòng)widget癣蟋，它在滾動(dòng)方向上一個(gè)接一個(gè)地顯示它的孩子疯搅。在縱軸上幔欧，孩子們被要求填充ListView |
| CustomMultiChildLayout | 使用一個(gè)委托來(lái)對(duì)多個(gè)孩子進(jìn)行設(shè)置大小和定位的小部件 |
Layout helpers
LayoutBuilder 構(gòu)建一個(gè)可以依賴(lài)父窗口大小的widget樹(shù)
