??【Flutter】學習養成記，【程序員必備小知識】
?? 今日小知識——【Flutter】基礎組件【02】Container！
1. 寫在前面
在上篇文章中介紹了Flutter中的基礎組件Text，今天繼續來學習下Container組件。
- 【基礎語法合集】
【Flutter】Dart中的var、final 和 const基本使用
【Flutter】Dart的數據類型list&Map(數組和字典)
【Flutter】Dart的方法中的可選參數、方法作為參數傳遞
【Flutter】Dart的工廠構造方法&單例對象&初始化列表
【Flutter】Dart中的Mixins混入你知道是什么嗎？
- [基礎組件合集]
【Flutter】基礎組件【01】Text
2. 什么是Container？
Container是一個容器類，一個擁有繪制、定位、調整大小的 widget，在Flutter中萬物皆widget，widget是小部件的意思。
2.1 Container組成
Container的最里層的是child元素，child元素首先會被padding包著，然后添加額外的constraints限制，最后添加margin。
Container自身尺寸的調節分兩種情況：
Container在沒有子節點（children）的時候，會試圖去變得足夠大。除非constraints是unbounded限制，在這種情況下，Container會試圖去變得足夠小。
帶子節點的Container，會根據子節點尺寸調節自身尺寸，但是Container構造器中如果包含了width、height以及constraints，則會按照構造器中的參數來進行尺寸的調節。
2.2 Container布局
Container會遵循如下順序去嘗試布局：
對齊（
alignment），調節自身尺寸適合子節點，采用width、height以及constraints布局，擴展自身去適應父節點，調節自身到足夠小。進一步說：如果沒有子節點、沒有設置
width、height以及constraints，并且父節點沒有設置unbounded的限制，Container會將自身調整到足夠小。如果沒有子節點、對齊方式（
alignment），但是提供了width、height或者constraints，那么Container會根據自身以及父節點的限制，將自身調節到足夠小。
2.3 Container屬性
- key：
Container唯一標識符，用于查找更新。 - alignment：控制
child的對齊方式，如果container或者container父節點尺寸大于child的尺寸，這個屬性設置會起作用，有很多種對齊方式。 - padding：
decoration內部的空白區域，如果有child的話，child位于padding內部。padding與margin的不同之處在于，padding是包含在content內，而margin則是外部邊界，設置點擊事件的話，padding區域會響應，而margin區域不會響應。 - color：用來設置
container背景色，如果foregroundDecoration設置的話，可能會遮蓋color效果。
2.4 舉例
void main(){
runApp(
Container(
margin: EdgeInsets.all(10),
color: Colors.red,
alignment: Alignment(0,0),
child: Container(
margin: EdgeInsets.all(10),
color: Colors.brown,
width: 250,
height: 250,
child: Text(
'Hello World',
textDirection: TextDirection.ltr,
style: TextStyle(fontSize: 26,color: Colors.blue,backgroundColor: Colors.white),
),
),
),
);
}
- 代碼運行效果
更多內容去這里https://api.flutter.dev/flutter/widgets/Container-class.html
3. 寫在后面
關注我，更多內容持續輸出
?? 喜歡就點個贊吧????
?? 覺得有收獲的，可以來一波 收藏+關注，以免你下次找不到我????
??歡迎大家留言交流，批評指正，
轉發請注明出處，謝謝支持！??
