1. Container組件的了解
關于container組件的介紹:
- Container是一個組合類的容器，本身并不對應具體的
RenderObject - Container是
DecorationBox,Padding,Align,Align等一些組建的組合 - 因此可以通過
Container組件實現同時需要裝飾,變換,限制等場景
1.1 Container源碼中的參數
Container({
Key key,
this.alignment,
this.padding, //容器內補白，屬于decoration的裝飾范圍
this.color, // 背景色
this.decoration, // 背景裝飾
this.foregroundDecoration, // 前景裝飾
double width, //容器的寬度
double height, //容器的高度
BoxConstraints constraints, //容器大小的限制條件
this.margin, //容器外補白，不屬于decoration的裝飾范圍
this.transform, //變換
this.child,
this.clipBehavior = Clip.none,
})
1.2 Container 容器組件常用參數
| 名稱 | 功能 |
|---|---|
| alignment | topCenter 頂部居中對齊<br />topLeft: 頂部左對齊<br />topRight: 頂部右對齊<br />center: 水平垂直居中對齊<br />centerLeft: 垂直居中,水平左對齊<br />centerRight: 垂直居中,水平右對齊<br />bottomCenter: 底部居中對齊<br />bottomLeft: 底部左對齊<br />bottomRight: 底部有對齊 |
| decoration | decoration: BoxDecoration(<br /> color: Colors.blue,<br /> border: Border.all(<br /> color: Colors.red,<br /> width: 2.0<br /> )<br /> BorderRadius.all(<br /> Radius.circular(8.0)<br /> )<br /> ) |
| width | 容器的寬度 double值 |
| height | 容器的高度 double值 |
| margin | margin 屬性表示Container與外部的其他組件的距離<br />EdgeInsets.all(20.0) |
| padding | padding 就是Container的內邊距,指Container邊緣與child之間的距離<br />padding: EdgeInsets.all(10.0) |
| transform | 讓Container容易進行一些轉換之類的 |
| child | 子組件 |
1.3 容器參數注意項
- 容器大小可以通過
width,height指定,也可通過constraints指定 - 如果同時存在,
width,height優先 -
color和decoration是互斥的,同時存在會報錯 - 因為指定color時,
Container內部會自動創建decoration
1.4 Container組件使用示例
在示例中,同時復習了一下Text組件所學內容
class Home extends StatelessWidget{
@override
Widget build(BuildContext content){
return Center(
child: Container(
child: Text(
"你好,Flutter", // 文本內容
// 關于Text組件參數的復習
style: TextStyle(
fontSize: 30.0, // 字體大小
height: 2, // 行高
color: Colors.white, // 文字顏色
fontWeight: FontWeight.bold, // 文字粗體
fontStyle: FontStyle.italic, // 文字斜體
letterSpacing: 6, // 字間距
decoration: TextDecoration.underline, // 下劃線
)
),
width: 300, // 容器寬度
height: 300, // 容器的高度
// 容器的背景顏色color, 不能與decoration同時使用
// color: Colors.blue,
padding: EdgeInsets.all(10), // 容器的padding
transform: Matrix4.rotationZ(0.1), // X軸旋轉0.1弧度
decoration: BoxDecoration( //容器的描述
color: Colors.green, // decoration中也有color,背景顏色
)
)
);
}
}
顯示結果
container容器組件_圖1.png
在Container組件的使用過程中,我們會發現很多屬性需要其他組件來修飾,
接下來,我們看看其他的組件信息
2. Padding 填充
Padding可以給其子節點添加填充（留白），也就是我們通常所說的內邊距
Container組件中的padding參數是有EdgeInsets類(組件)進行修飾
2.1 EdgeInsets
先看一下EdgeInsets修飾值的方法
formLTRB(double left, double top, double right, double bottom)分別指定四個方向
all(double value), 所有方向設置相同值的padding
only({left ,top, right ,bottom}), 可以設置具體某個發方向的填充
-
symmetric({vertical,horizontal}) 用于設置對稱方向的填充
vertical 指的是top和bottom , horizontal 指的是left和right
2.2 示例代碼
class Home extends StatelessWidget{
@override
Widget build(BuildContext content){
return Center(
child: Container(
child: Text(
"你好,Flutter", // 文本內容
style: TextStyle(
fontSize: 30.0, // 字體大小
color:Colors.white,
height: 2, // 行高
letterSpacing: 6, // 字間距
)
),
width: 300, // 容器寬度
height: 300, // 容器的高度
// padding值設置的四種方法:
// 1.all方法: 四個方向的padding都是10
//padding: EdgeInsets.all(10),
// 2.fromLTRB: 左上右下paddin值為10,20,30,0
//padding: EdgeInsets.fromLTRB(10,20,30,0),
// 3.only: 值是可選參數, 只有left有20px的padding
//padding: EdgeInsets.only(left: 20),
// 4.symmetric: 值是可選參數, 只有左右有30px的padding
padding: EdgeInsets.symmetric(horizontal: 30),
decoration: BoxDecoration(
color: Colors.green, // decoration中也有color,背景顏色
)
)
);
}
}
顯示結果:
padding填充_圖2.png
3. DecoratedBox 裝飾容器
DecoratedBox可以在其子組件繪制前(或后)繪制一些裝飾（Decoration），如背景、邊框、漸變等。DecoratedBox定義如下：
const DecoratedBox({
Decoration decoration,
DecorationPosition position = DecorationPosition.background,
Widget child
})
decoration：代表將要繪制的裝飾，它的類型為Decoration。Decoration是一個抽象類.
但是我們通常使用BoxDecoration,BoxDecoration是Decoration的一個子類
3.1 BoxDecoration
BoxDecoration用來實現了常用的裝飾元素的繪制
參數
BoxDecoration({
Color color, //顏色
DecorationImage image, //圖片
BoxBorder border, //邊框
BorderRadiusGeometry borderRadius, //圓角
List<BoxShadow> boxShadow, //陰影,可以指定多個
Gradient gradient, //漸變
BlendMode backgroundBlendMode, //背景混合模式
BoxShape shape = BoxShape.rectangle, //形狀
})
3.2 示例代碼
Widget build(BuildContext content){
return Center(
child: Container(
child: Text(
"按鈕", // 文本內容
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0, // 字體大小
color:Colors.white,
height: 2, // 行高
letterSpacing: 6, // 字間距
)
),
width: 100, // 容器寬度
height: 50, // 容器的高度
decoration: BoxDecoration(
// 背景漸變
gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]),
borderRadius: BorderRadius.circular(10.0), // 10像素圓角
)
)
);
}
}
結果
裝飾容器_圖3.png
4. 變換 Transform
Transform可以在其子組件繪制時對其應用一些矩陣變換來實現一些特效。
Matrix4是一個4D矩陣，通過它我們可以實現各種矩陣操作，
至于矩陣變換,不是我們的重點, 矩陣是線性代數的概念,我們只需要了解Flutter中如何使用就OK了
4.1 變換示例:
class Home extends StatelessWidget{
@override
Widget build(BuildContext content){
return Center(
child: Container(
child: Text(
"按鈕", // 文本內容
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0, // 字體大小
color:Colors.white,
height: 2, // 行高
letterSpacing: 6, // 字間距
)
),
width: 100, // 容器寬度
height: 50, // 容器的高度
decoration: BoxDecoration(
color: Colors.green, // decoration中也有color,背景顏色
),
// transform的變化
// 變化位移
//transform: Matrix4.translationValues(10, 100, 0),
// 旋轉
//transform: Matrix4.rotationZ(0.3),
// 縮放
transform: Matrix4.diagonal3Values(0.5, 1, 1) ,
)
);
}
}
