認識Flutter組件篇之Container組件

Container容器組件視圖佈局必不可少的組件,是一個能夠繪製，定位，調整大小的組件，相似於html中的div

Container

它有幾個經常使用屬性:

1. alignment 用於定位子元素(child)的位置 Alignment.topLeft 頂部居左對齊

   Alignment.topCenter 頂部居中對齊

   Alignment.topRight 頂部居右對齊

   Alignment.center 橫縱雙向居中對齊

   Alignment.centerLeft 縱向居中橫向居左對齊

   Alignment.centerRight 縱向居中橫向居右對齊

   Alignment.bottomCenter 下部居中對齊

   Alignment.bottomLeft 下部左對齊

   Alignment.bottomRight 下部右對齊

2. constraints 約束

   constraints: new BoxConstraints(
       maxHeight: 123,
       maxWidth: 123,
       minHeight: 123,
       minWidth: 123
   ),
   複製代碼

   用來限制最大寬高，最小寬高

3. padding 內邊距 跟前端的padding差很少

   padding: const EdgeInsets.all(10.0) 上下左右內邊距距離

   padding: const EdgeInsets.fromLTRB(left, top, right, bottom) 左上右下內邊距距離

   padding: const EdgeInsets.only(
       left: 10.0, 
       top: 10.0,
       right: 10.0,
       bottom: 10.0
   ),
   複製代碼

   左上右下內邊距距離 能夠想設置那邊設置那邊

   const EdgeInsets.symmetric(
       vertical = 0.0,
       horizontal = 0.0 
   )
    left = horizontal, top = vertical, right = horizontal, bottom = vertical;    
   複製代碼

   設置水平 垂直的內邊距距離

4. margin 外邊距 參數跟padding內邊距同樣

5. decoration decoration是container的裝飾器 能夠設置邊框，邊框圓角，陰影，背景圖，漸變色，形狀，背景色等等舉例幾個其他望讀者去看文檔 thanks~

   decoration: new BoxDecoration(
       color: Colors.black,
   ),
   複製代碼

   注意這塊設置顏色外面container就不要設置color了否則會報錯

   decoration: new BoxDecoration(
       border: Border.all(width: 2.0,color: Colors.green)
   )
   複製代碼

   設置上下左右邊的寬度跟顏色

   decoration: const BoxDecoration(
       border: Border(
           top: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
           left: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),
           right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
           bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),
       ),
   ),
   複製代碼

   本身選擇設置上下左右邊的寬度顏色

   borderRadius:  new BorderRadius.all(Radius.circular(10))
   複製代碼

   邊框的四個角畫一個圓

   borderRadius:  new BorderRadius.all(Radius.elliptical(10, 20))
   複製代碼

   邊框的四個角畫一個橢圓

   borderRadius:  new BorderRadius.circular(10)
   複製代碼

   邊框的四個角畫一個圓

   borderRadius:  new BorderRadius.horizontal(
       left: Radius.circular(10),
       right: Radius.circular(10)
   )
   topLeft: left,
   topRight: right,
   bottomLeft: left,
   bottomRight: right,
   複製代碼

   邊框的水平方向設置圓角

   borderRadius: new BorderRadius.only(
       topLeft: Radius.circular(10),
       topRight: Radius.circular(10),
       bottomLeft: Radius.circular(10),
       bottomRight: Radius.circular(10)
   ),
   複製代碼

   本身設置左上右上左下右下的圓角

   borderRadius: new BorderRadius.vertical(
       top: Radius.circular(10), 
       bottom: Radius.circular(10)
   ),
   topLeft: top,
   topRight: top,
   bottomLeft: bottom,
   bottomRight: bottom,
   複製代碼

   邊框的垂直方向設置圓角

6. transform 容器的轉換 具體細節 看文檔吧 transform

container組件差很少就這些經常使用的屬性 還有一些鄙人不熟悉也沒用過望大佬給予補充~