Flutter入門 佈局Container、Padding、Align、Center

Flutter入門-佈局Container、Padding、Align、Center

Container

Container的尺寸大小

Container自身尺寸變化的兩種狀況，如下兩種狀況皆不考慮父節點設置constraints和Container自身設置的width、height：

• 第一種是Container沒有子節點的狀況下，Container會將本身變得極小，這裏咱們只要考慮到存在這個Container，但不顯示
• 第二種是Container有子節點的狀況下，Container的大小會隨着子節點的大小而變化。
  這裏咱們能夠這樣去理解它：你去裁縫店讓裁縫給你作一件衣服，可是你不告訴裁縫你的size或者說你不讓裁縫測量你的size，那麼他只能表示我知道了你要作一件衣服，而後就沒有而後了；可是你讓裁縫給你測量size，或者告訴告訴裁縫我想要一件多大的衣服，那麼他就會給你作出一件讓你看得見的衣服出來; 這裏的衣服就是Container，而裁縫給你測量的size就是子節點的大小，你告訴裁縫size就是表明着設置Container的width、height；
  父節點的constraints這個參數咱們能夠考慮爲給裁縫裝衣服的袋子，若是你不告訴他衣服的大小，只給他一個袋子，那麼他就會按照袋子的大小給你作一件衣服.
  這裏的constraints咱們仍是不按照父節點的constraints來想，咱們就以Container來講，給他設置一個constraints時就是表示限定當前的Container的最大最小值，這裏的最大最小值比直接設置width、height優先級還更大，若是設置的width、height超出了constraints的值，那就會按照constraints的最大值來算。
  如下代碼中的寬高只會按照constraints的最大值來算

Container(
  constraints: BoxConstraints(maxWidth: 200.0,maxHeight: 100.0),
  width: 500.0,
  height: 500.0,
)
複製代碼

Container的一些經常使用的參數說明：

alignment ：設置子節點的對齊方式，這裏咱們得考慮到Container的大小須要比子節點的大小更大，否則這裏的對齊咱們是看不到效果的，對齊的方式有不少種

padding ：設置padding，設置內邊距，和Android的是同樣的,用法以下：

padding: const EdgeInsets.all(10.0),
複製代碼

color : 設置背景顏色，該參數與foregroundDecoration、decoration不能共用，否則會被遮蓋或報錯

decoration ： 設置背景裝飾，處於child的後面，這裏的裝飾能夠設置圓角、邊框、背景色、背景圖片等等之類的，功能比較強大，好比說咱們用BoxDecoration就有這麼多選項能夠設置,還有其餘的Decoration能夠供咱們選擇

const BoxDecoration({
  this.color,
  this.image,
  this.border,
  this.borderRadius,
  this.boxShadow,
  this.gradient,
  this.backgroundBlendMode,
  this.shape = BoxShape.rectangle,
})
複製代碼

foregroundDecoration ：設置背景裝飾，處於child的前面，此處的裝飾和上面的是同樣的

width、 height ：設置寬與高，這裏咱們若是想要將寬或高撐滿能夠用double.infinity來達到目的

width: double.infinity,
複製代碼

constraints ：這個參數咱們上面說過了，就是設置當前的Container的最大值，或者叫作約束

margin ：外邊距，和Android的margin同樣的效果，代碼以下

margin: const EdgeInsets.all(10.0),
複製代碼

transform :設置Container的變換矩陣，用法以下

child : 子節點

Padding

Padding這個最容易理解了，咱們在Container中不是說過一個padding這個參數嗎？就是這個，其實Container中的padding這個參數也是調用的Padding這個widget來達到目的的，padding就是設置內邊距，他的用法很容易，以下所示,簡單的用就是設置一個內邊距，而後child設置一個子節點；

Padding(padding: const EdgeInsets.all(10.0),child: Text("title"),)
複製代碼

Align

咱們在Container的時候用過一個alignment參數，設置對齊方式，這個Align就是對齊佈局，他的用法以下

Align(
  alignment: Alignment.center,
  widthFactor: 2.0,
  heightFactor: 2.0,
  child: Text("XXX")
)
複製代碼

參數說明：

alignment：這個不用解釋了吧，上面已經說了，是用來控制他的對齊方式了，有不少種對齊方式

widthFactor: 寬度因子，若是設置了寬度因子，則寬度會按照子節點的寬度*寬度因子數

heightFactor：高度因子，這個和寬度因子是同樣的做用

chaild：子節點

Center

Center他是繼承自Align，其內部就是幫咱們設定了對齊方式爲Alignment.center,其餘的參數與Align同樣，可是缺乏了對齊方式的設定，由於這裏的對齊方式已經設定死了