目錄

參數詳解

代碼示例

效果圖

完整代碼

---

Container 官網簡介：一個便利的小部件，結合了常見的繪畫，定位和大小調整小部件。

其實就是一個容器組件，既然是容器，那么，就一定可以裝很多東西，而Container裝的東西就是Flutter 其他組件。

參數詳解

屬性	說明
alignment	topCenter：頂部居中對齊 topLeft：頂部左對齊 topRight：頂部右對齊 center：水平垂直居中對齊 centerLeft：垂直居中水平居左對齊 centerRight：垂直居中水平居右對齊 bottomCenter 底部居中對齊 bottomLeft：底部居左對齊 bottomRight：底部居右對齊
padding	內邊距
margin	外邊距
color	背景色
decoration	裝飾??BoxDecoration類型
foregroundDecoration	前景裝飾
width	容器寬
height	容器高
constraints	應用于子元素的附加約束
transform	Container 容器進行一些旋轉、移動之類的操作
child	容器子元素

在這里對decoration屬性進行詳解，先看代碼：

Container(decoration: BoxDecoration(//背景涂顏色color: Colors.yellow,border: Border.all(//邊框顏色color: Colors.blue,//邊框寬width: 2.0,),borderRadius: BorderRadius.all(//圓角角度Radius.circular(10))), ),

以上介紹了decoration的簡單使用，以下介紹以下BoxDecoration的屬性：

屬性	說明
color	顏色
image	圖片
border	邊框
borderRadius	邊框圓角度
boxShadow	陰影? 可以多色混合
gradient	漸變
backgroundBlendMode	背景
shape	容器形狀，BoxShape.rectangle? 矩形；BoxShape.circle 圓形

以上屬性遵循原則：

1、gradient? >??image >? color? ? 就是說 他們同時使用時 會優先顯示gradient定義內容

2、shape不能同borderRadius一起使用? 沖突，編譯錯誤

?

代碼示例

Center(child: Container(child: Text('位于右側的文本',textAlign: TextAlign.right,style: TextStyle(backgroundColor: Colors.blueAccent),//文字背景),//容器高height: 300.0,//容器寬width: 300.0,//內邊距padding: EdgeInsets.all(10),//裝飾decoration: BoxDecoration(//顏色color: Colors.yellow,//邊框border: Border.all(// 邊框顏色color: Colors.blue,//邊框寬度width: 2.0,),//邊框圓角度 borderRadius: BorderRadius.all(Radius.circular(10)),//容器形狀 默認矩形// shape: BoxShape.circle//陰影 可以多色混合boxShadow:[BoxShadow(color: Colors.green,blurRadius: 50.0,),BoxShadow(color: Colors.red,blurRadius: 50.0,),],//背景漸變 可以多色漸變gradient: LinearGradient(colors: [Colors.red,Colors.blue]),),),);

效果圖

請注意? ?混合顏色? 和? 漸變顏色 的區別

完整代碼

查看完整代碼

總結

以上是生活随笔為你收集整理的Flutter Container 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。