PS：轉(zhuǎn)載請注明出處
作者: TigerChain
地址: http://www.reibang.com/p/cfa3186c0859
本文出自 TigerChain 簡書 從頭開始整 Flutter系列
教程簡介
- 1卵史、閱讀對象
本篇教程適合新手閱讀，老手直接略過 - 2、教程難度
初級北苟，本人水平有限，文章內(nèi)容難免會出現(xiàn)問題打瘪，如果有問題歡迎指出友鼻，謝謝
正文
一、什么是 Container
在 Flutter 中宇宙萬物都是組件闺骚，Container 也是一個組件彩扔，它類似于 Html 中的 div，Android 中的 ViewGroup僻爽，我們可以給 Container 的子組件設(shè)置一些邊距虫碉、寬高、裝飾等樣式胸梆，一般情況下寫一個組件直接套一個 Container 沒什么大的問題「擴展性好一點」
二敦捧、Container 的屬性
1、Container 的屬性及含義
學(xué)一個組件首先看其構(gòu)造方法碰镜，以下就包括了 Container 構(gòu)造方法中的屬性
| 屬性 | 說明 |
|---|---|
| alignment | 子控件 child 的對齊方式绞惦，這個方式可以影響背景寬度為等屏幕寬 |
| padding | 設(shè)置內(nèi)邊距,可以控制子控件 child 和 Container 的邊距 |
| color | 用來設(shè)置 Container 的背景色,foregroundDecoration 可測會覆蓋此屬性，并全此屬性不能和 decoration 同時設(shè)置 |
| decoration | 裝飾器洋措，是子控件 child 的后面的裝飾济蝉，設(shè)置了此屬性就不能設(shè)置 color，而應(yīng)該使用 decoration 的 color 屬性 |
| foregroundDecoration | 這個裝飾器會繪制在 child 的上層 |
| width | Container 的寬度，設(shè)置為 double.infinity 可以撐滿屏幕寬度 如果不設(shè)置默認(rèn)為子控件的寬度「前提要有 child」 |
| height | Container 的高度 王滤，設(shè)置為 double.infinity 可以撐滿屏幕高度,如果不設(shè)置默認(rèn)為子控件的高度「前提要有 child」 |
| constraints | 添加到 child 上的一些結(jié)束贺嫂，比如設(shè)置圓角、任何一邊的邊框等 |
| margin | 圍繞在 decoration 和 child 之間的空白區(qū)域 |
| transform | Container 的變換矩陣 |
| child | 包裹在 Container 的子控件雁乡，是一個 Widget |
2第喳、使用場景
一般情況下在如下場景中使用 Container「當(dāng)然也可能有替代方式」
- 要設(shè)置內(nèi)邊距和外邊距
- 要設(shè)置 child 的背景，或是圓角踱稍、邊框曲饱、邊框陰影等
- 要設(shè)置 child 的對齊方式，當(dāng)然包一個 Align 組件也可以實現(xiàn)
- 設(shè)置背景圖片
有一個圖可以形象的表示 Container 的使用場景
PS: Container 如果沒有設(shè)置 child 那么他默認(rèn)的寬高是填充整個屏幕的
三珠月、Container 實例演練
1扩淀、color 屬性
顯示效果
核心代碼
[圖片上傳失敗...(image-b2da5b-1564056944844)]
2、padding 屬性
顯示效果
核心代碼
3啤挎、decoration 屬性
我們先看看 decoration 有那些擴展類
我們用的比較多的就是 BoxDecoration 驻谆，順便看一下他的構(gòu)造方法
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
})
可以看到盒子裝飾可以設(shè)置顏色，圖片庆聘，邊框胜臊，邊框圓角，邊框陰影和形狀等
1伙判、BoxDecoration border 底邊框
顯示效果
核心代碼
2象对、BoxDecoration border 四邊框
顯示效果
核心代碼
3、BoxDecoration borderRadius 圓角
顯示效果
核心代碼
4宴抚、BoxDecoration shape织盼、boxShadow 形狀和陰影
顯示效果
核心代碼
5、BoxDecoration.gradient 漸變
gradient 有三種形式漸變酱塔，LinearGradient「線性漸變」、RadialGradient 圓形漸變和 SweepGradient「掃描形漸變」危虱，具體可以看其構(gòu)造方法羊娃，漸變使用的頻率不高，所以不重點說埃跷，這里舉一個RadialGradient 的例子來畫一個太陽吧
顯示效果
核心代碼
其中 colors 是必須的蕊玷，stops 不必須，但是如果同時出現(xiàn)的話弥雹，參數(shù)是對應(yīng)起來「一樣多」垃帅，關(guān)于漸變就說這么，感興趣的可以下去仔細(xì)看看其它兩個漸變
4剪勿、constraints 屬性
constraints 屬性對應(yīng)的是 BoxConstraints 也就是對 Container 的寬高做一個限制贸诚，看看 BoxConstraints 的首個構(gòu)造方法
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity
});
BoxConstraints 有許多構(gòu)構(gòu)方法常用的就是以下三個 tight loose 和 expand
1、BoxConstraints.tight
BoxConstraints.tight(Size size)
: minWidth = size.width,
maxWidth = size.width,
minHeight = size.height,
maxHeight = size.height;
從構(gòu)造方法中可以看到 BoxConstraints.tight 方法給定的 size 那么 min=max 沒有區(qū)間
顯示效果
核心代碼
2、BoxConstraints.loose
不廢話看其構(gòu)造方法
BoxConstraints.loose(Size size)
: minWidth = 0.0,
maxWidth = size.width,
minHeight = 0.0,
maxHeight = size.height;
從構(gòu)造方法中可以看到其最小寬高都是 0.0 最大度寬高為設(shè)置的 size
顯示效果
核心代碼
3酱固、BoxConstraints.expand
構(gòu)造方法如下
const BoxConstraints.expand({
double width,
double height
}): minWidth = width != null ? width : double.infinity,
maxWidth = width != null ? width : double.infinity,
minHeight = height != null ? height : double.infinity,
maxHeight = height != null ? height : double.infinity;
如果寬或高不設(shè)置則在其方向上等屏幕展示
顯示效果
核心代碼
可以看到此效果是高度為 120械念，寬度屏幕等寬
5、foregroundDecoration 屬性
foregroundDecoration 顧名思義就是 child 的前景裝飾运悲，decoration龄减、child、foregroundDecoration 三者的關(guān)系如下圖所示
可以看到 foregroundDecoration 在 child 的上面班眯，child 在 decoration 的上面希停，例子就不舉了，decoration 我們說過了 foregroundDecoration 那還不是菜
四署隘、合理的使用 Container
Container 雖然好用宠能，包括你使用一些 Flutter 的插件「快速生成組件快捷鍵」生成組件的時候它會自動給你返回一個根組件為 Container「一般情況這往往是好的，因為加了 Container 擴展性變的很好」定踱，但是也不能亂使用棍潘，一定要明白 Container 的使用場景，否則就會變得臃腫崖媚，必定使用的組件多了多少會對性能有些影響亦歉，它要渲染呀，我們來看一個例子效果如下：
如果不合理的使用 Container 就會出現(xiàn)以下又臭又長的寫法
看到了吧畅哑，實現(xiàn)上述效果圖用了五個組件才搞定「有什么問題嗎肴楷？在顯示效果上來說真的沒有什么問題，但是這樣寫很操蛋」荠呐，其實一個 Container 組件和一個 Text 組件足夠了赛蔫，我們來看應(yīng)該如何精簡
使用上面兩個組件足以搞定效果圖樣式，所以寫組件之前先畫畫或是在腦子里過一下不要直接就動手去整
五泥张、總結(jié)
這節(jié)我們說了一下 Container 組件「最常用的組件之一」呵恢，下面我們來總結(jié)一下 Container 的使用場景
- 要給子組件設(shè)置部分樣式
- 設(shè)置邊框或圓角
- 設(shè)置漸變
- 設(shè)置內(nèi)外邊距
- 設(shè)置陰影
- 設(shè)置背景圖等
再來看一下使用場景圖
其中 Border 只是樣式的一種體現(xiàn)而已「還有圓角等屬性」
到此為之我們把 Container 大概就介紹完了，當(dāng)然沒有把所有的屬性都介紹完比如 transform 「變換屬性媚创，就是一些旋轉(zhuǎn)渗钉、放大、縮小等」钞钙，有興趣的可以自己玩一把鳄橘，下節(jié)我們說說 Row 組件和 Column 組件
作者: TigerChain 訂閱查看更多內(nèi)容，公號「TigerChain」同步
本文出自 TigerChain 的 從頭開始整 Flutter
