上一篇筆記用了個Container組件，這一篇詳細(xì)介紹一下，整體來說這個組件類似div，但是與div又不同，具體有哪些特性，先了解一下Container有哪些屬性再總結(jié)，因?yàn)椴涣私庥心男傩灾苯涌吹脑挘瑫悬c(diǎn)懵逼。
Container({
Key key,
AlignmentGeometry alignment, //子組件的對齊方式
EdgelnsetsGeometry padding, //內(nèi)邊距
Color color, //背景色
Decoration decoration, //背景裝飾 相當(dāng)于樣式 在child之下
Decoration foregroundDecoration, //前景裝飾 覆蓋在child之上 如半透明遮罩效果
double width, //寬
double height, //高
BoxConstraints constraints, //容器的大小限制
EdgelnsetsGeometry margin, //外邊距
Matrix4 transform, //變換
Widget child //子節(jié)點(diǎn)
})
1、alignment
子組件的對齊方式，有子組件并且當(dāng)前Container尺寸大于子組件尺寸時有效。
new Container(
color: Colors.red,
width: 400.0,
height: 400.0,
alignment: Alignment.center,
child: new Container(
color: Colors.blue,
width: 50.0,
height: 50.0,
)
)
center：居中
centerLeft：靠左垂直居中
centerRight：靠右垂直居中
bottomCenter：底部居中
bottomLeft：左下
bottomRight：右下
topCenter：頂部居中
topLeft：左上
topRight：右上
可以看見除了center，都是兩個單詞拼在一起很好記，垂直方向在前，水平方向在后。
子組件尺寸要小于當(dāng)前組件尺寸時才會生效。
2、padding&& margin
這兩個放一起，設(shè)置方式相同，這里以padding為例。
new Container(
padding: EdgeInsets.all(10.0)
)
EdgeInsets.all：四個內(nèi)邊距值相同
EdgeInsets.only：四個邊距單獨(dú)設(shè)置，不設(shè)置則為0，用法如下
padding: EdgeInsets.only(
top: 10.0,
left: 20.0
)
可以只寫一個，也可以四個全都寫。
EdgeInsets.symmetric：可以設(shè)置同方向上的兩個內(nèi)邊距
padding: EdgeInsets.symmetric(
horizontal: 10.0, //水平方向兩個邊距
vertical: 20.0 //垂直方向兩個邊距
)
EdgeInsets.zero：設(shè)置內(nèi)邊距為0
EdgeInsets.fromLTRB：only的簡寫，順序?yàn)樽笊嫌蚁?/p>
padding: EdgeInsets.fromLTRB(10.0, 20.0, 30.0, 40.0)
EdgeInsets.fromWindowPadding：具體用法不知道
***EdgeInsets這個組件是個公用組件，并不是只有padding可以用，比如margin也可以
3、color
背景色。
new Container(
color: Colors.red
)
4、decoration
***decoration不能和color同時用，會報(bào)錯。
const BoxDecoration({
Color color,
DecorationImage image,
BoxBorder border,
BorderRadiusGeometry borderRadius,
List<BoxShadow> boxShadow,
Gradient gradient,
BlendMode backgroundBlendMode,
BoxShape shape: BoxShape.rectangle
})
color
和color一樣，沒啥說的。
image
背景圖，可以和背景色一起使用。
decoration: BoxDecoration(
image: DecorationImage(
//這里先用網(wǎng)圖，怎么加載本地資源以后再細(xì)說
image: new NetworkImage('https://cdn.jsdelivr.net/gh/flutterchina/website@1.0/images/flutter-mark-square-100.png')
)
)
border
邊框，在container內(nèi)部，和margin/padding類似，可以單獨(dú)設(shè)置也可以設(shè)置為統(tǒng)一樣式。
decoration: BoxDecoration(
//border: Border.all(width: 2.0, color: Colors.blue) 設(shè)置為相同樣式
top: BorderSide(width: 2.0, color: Colors.blue),
left: BorderSide(width: 4.0, color: Colors.yellow),
right: BorderSide(width: 8.0, color: Colors.green),
bottom: BorderSide(width: 16.0, color: Colors.purple)
)
borderRadius
*圓角不能和border同時設(shè)置，同時存在時可以運(yùn)行但是會拋出一個異常
decoration: new BoxDecoration(
borderRadius: BorderRadius.only( //only對每個角單獨(dú)設(shè)置
bottomLeft: Radius.circular(20.0), //圓角值為20.0
topLeft: Radius.zero, //圓角為0
bottomRight: Radius.elliptical(20.0, 40.0) //圓角x方向?yàn)?0.0，y方向?yàn)?0.0
)
)
Radius.all：四個角同時設(shè)置，參數(shù)和但方向的參數(shù)相同（borderRadius: new BorderRadius.all(Radius.circular(20.0))）。
Radius.lerp: 做動畫用的多一點(diǎn)暫時先不深入。
boxShadow
容器陰影
decoration: new BoxDecoration(
boxShadow: [
new BoxShadow(
color: Colors.red, //陰影顏色
offset: Offset(10.0, 20.0), //偏移量x, y
blurRadius: 10.0, //模糊
spreadRadius: 10.0 //延伸
),
]
)
gradient
背景色漸變
//徑向漸變
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [Colors.red, Colors.blue], //漸變顏色
center: Alignment.topLeft, //漸變中心點(diǎn)，可以設(shè)具體數(shù)值（center: const Alignment(0.7, -0.6)）
radius: 5.0 //漸變半徑
stops: [0.4, 1.0], //漸變顏色的比例
),
)
//線性漸變
gradient: LinearGradient(
begin: Alignment.topLeft, //漸變起始點(diǎn)
end: Alignment(0.1, 0.1), //結(jié)束點(diǎn)
colors: [Colors.red, Colors.blue],
tileMode: TileMode.mirror //模式有三個值（mirror：鏡像，clamp: 單純的單次漸變不做其他處理，repeated: 重復(fù)）
)
//扇形漸變
gradient: SweepGradient(
center: FractionalOffset.center, //漸變的圓心
startAngle: 0.0, //漸變的起始角度
endAngle: math.pi * 2, //漸變的角度范圍
colors: const <Color>[
Colors.blue,
Colors.green,
Colors.red,
Colors.yellow,
Colors.pink
],
stops: const <double>[0.0, 0.25, 0.5, 0.75, 1.0], //每種顏色所占的比例，總數(shù)為2，多出部分被初始顏色覆蓋
)
扇形漸變每種顏色的基準(zhǔn)線為改顏色的中心線（不理解的自己試一下就知道了）。
tileMode是這三種漸變都有的屬性，不僅限于線性漸變。
徑向漸變、扇形漸變的圓心位置和線性漸變的起始/結(jié)束坐標(biāo)都是可以設(shè)置具體數(shù)值的。
backgroundBlendMode
圖像混合模式，這個東西有點(diǎn)多，要單開一篇。
shape
當(dāng)前Container的形狀
decoration: BoxDecoration(
shape: BoxShape.rectangle
)
有兩個值
rectangle：矩形
circle：圓形，不會出現(xiàn)橢圓的情況，寬高不同時直徑按小的那個值算。
5、width&height
這倆放一起，double類型，寬高。
6、constraints
對Container的尺寸約束
constraints: new BoxConstraints(
minWidth: 200.0,
maxWidth: 300.0,
minHeight: 200.0,
maxHeight: 300.0
)
7、transform
對Container進(jìn)行變換操作，和css的transform類似，值是一個矩陣(Matrix4)。
這里暫時跳過，開一篇單獨(dú)說。
8、child
子節(jié)點(diǎn)，只能有一個子節(jié)點(diǎn)，沒有children。
關(guān)于Container的特性
關(guān)于尺寸的自我調(diào)節(jié)
1、如果設(shè)置了width/height/constraints，并且尺寸小于父組件的尺寸，則為設(shè)置的寬高，如果大于父組件的尺寸則為父組件的寬高，如果父組件有padding，或當(dāng)前組件有margin需要減去padding/margin。
2、如果沒有子節(jié)點(diǎn)并且沒有width/height以及constraints約束，Container的尺寸會撐到最大，盡可能占滿父節(jié)點(diǎn)。
2、如果有子節(jié)點(diǎn)并且沒有width/height以及constraints約束，Container會盡量縮小。
關(guān)于渲染過程
生成節(jié)點(diǎn)：
padding > decoration > constraints (width/height) > margin
繪制節(jié)點(diǎn)：
transform > decoration > foregroundDecoration
Container差不多就這些東西，不是太深入，深入的東西就需要自己在項(xiàng)目或者demo中嘗試了，還有一些即使是粗略的說也不少，放這里感覺不太合適，后邊單獨(dú)分析。
