container概述
Container是一個非常常用的容器元件，它包含了常規的Padding、BoxDecoration、DecorationImage、Border、BoxShaow、transform等等一系列Widgets。
建構函式
Container({
Key key,
this.alignment,
this.padding,
Color color,
Decoration decoration,
this.foregroundDecoration,
double width,
double height,
BoxConstraints constraints,
this.margin,
this.transform,
this.child,
})
複製程式碼- alignment child的對齊方式 Alignment(0.0,0.0)表示矩形的中心。從-1.0到+1.0的距離是矩形的一邊到另一邊的距離。因此，2.0單位水平(或垂直)等於矩形的寬度(或高度)。
- padding 在容器內填充，填充物為child 和alignment對齊會有衝突，但是最終還是padding主導 可以上下左右都可以填充 symmetric 垂直或水平的填充， only 填充一個方向
- color 容器背景顏色 此處是 decoration: new BoxDecoration(color: color) 簡寫，即不能同時decoration和color使用，衝突時當然是將color放在Boxdecoration中設定執行
- decoration 由此類提供所有裝飾的抽象介面定義，可以使用boxDEcoration，其提供了多種裝飾能力
boxDecoration 建構函式
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
})
複製程式碼- color 背景顏色
- image 背景圖片 使用DecorationImage定義：
DecorationImage建構函式
const DecorationImage({
@required this.image,
this.colorFilter,
this.fit,
this.alignment = Alignment.center,
this.centerSlice,
this.repeat = ImageRepeat.noRepeat,
this.matchTextDirection = false,
})
複製程式碼- image 即圖片源，可使用的子類： AssetBundleImageProvider FileImage MemoryImage NetworkImage 此處選擇網路圖片
NetworkImage建構函式
const NetworkImage(this.url, { this.scale = 1.0 , this.headers })
複製程式碼- url 即網路圖片地址
- scale 影象比例，數值越大圖片比例越小
- headrs 請求影象的頭資訊
- colorFilter 彩色濾鏡
- fit 怎麼將影象填充到容器中 比如contain 儘可能大，但將影象完全包含在目標框中
- alignment 在範圍對影象進行對齊操作
- repeat 圖片重複的方向，repeat 即x 軸和y 軸都重複 然後 repeatX 即在X方向重複
- matchTextDirection 是否在 TextDirection 方向繪圖
- border Border可以獨立繪製上下左右獨立邊框的顏色，寬度等 當然也可以使用封裝好的比如 all，直接繪製邊框
- borderRadius 圓角的繪製
- boxShadow 盒子的陰影列表，形狀隨盒子而變 BoxShadow定義
BoxShadow建構函式
const BoxShadow({
Color color = const Color(0xFF000000),
Offset offset = Offset.zero,
double blurRadius = 0.0,
this.spreadRadius = 0.0
複製程式碼- color 陰影顏色
- offset 陰影的相對盒子的偏移量
- blueRadius 陰影的模糊程度
- spreadRadius 類似陰影的膨脹程度，可以理解為陰影的大小
- gradient 漸變類，一般使用 LinearGradient
LinearGradient建構函式
const LinearGradient({
this.begin = Alignment.centerLeft,
this.end = Alignment.centerRight,
@required List<Color> colors,
List<double> stops,
this.tileMode = TileMode.clamp,
})
複製程式碼- begin 漸變數開始的位置
- end 漸變數結束的位置
- colors 漸變的基色
- tileMode 定義漸變梯度的邊緣 對比image的repeat
- shape 形狀
- foregroundDecoration 前景裝飾
- width 寬度
- height 高度
- constraints 限制容器大小 一般使用BoxConstraints
BoxConstraints建構函式
const BoxConstraints({
this.minWidth = 0.0,
this.maxWidth = double.infinity,
this.minHeight = 0.0,
this.maxHeight = double.infinity
});
複製程式碼- minWidth 最小寬度
- maxWidth 最大寬度
- minHeight 最小高度
- maxHeight 最大高度
- margin 容器外填充
- transform 對容器實現矩陣變換操作
- child 子元件
例項構造及註釋詳解
下面實現了一個傾斜的全面屏手機任務執行介面：
// container 詳解學習
import 'package:flutter/material.dart';
class ContainerLearn extends StatelessWidget {
final _textStyle = TextStyle(
color: Colors.white,
fontSize: 20,
letterSpacing: 4,
wordSpacing: 4,
shadows: [
Shadow(color: Colors.black87, offset: Offset(5, 5), blurRadius: 8)
]);
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: Text('Container'),
),
// 一個方便的小部件，它組合了常見的繪畫、定位和大小小部件。
body: new Container(
// 控制容器中child的位置，可以輸入座標引數，也可以設定預先設定的座標位置
// Aliment(0.0,0.0)表示矩形的中心。從-1.0到+1.0的距離是矩形的一邊到另一邊的距離。因此，2.0單位水平(或垂直)等於矩形的寬度(或高度)。
alignment: Alignment(0, 1),
// 在容器內填充，填充物為child 和alignment對齊會有衝突，但是最終還是padding主導 可以上下左右都可以填充 symmetric 垂直或水平的填充， only 填充一個方向
padding: EdgeInsets.symmetric(vertical: 60, horizontal: 75),
// 容器背景顏色 此處是 decoration: new BoxDecoration(color: color) 簡寫，即不能同時decoration和color使用，衝突時當然是將color放在Boxdecoration中設定執行
// color: Colors.blueAccent,
// 由此類提供所有裝飾的抽象介面定義，可以使用boxDEcoration，其提供了多種裝飾能力
decoration: BoxDecoration(
// 背景顏色
color: Colors.blueAccent,
// 背景影象
image: DecorationImage(
// 可使用的子類： AssetBundleImageProvider FileImage MemoryImage NetworkImage
image: NetworkImage(
'https://flutter.cn/assets/get-started/ios/hello-world-ed7cf47213953bfca5eaa74fba63a78538d782f2c63a7c575068f3c2f7298bde.png',
// 影象比例，數值越大圖片比例越小
scale: 3.0,
// 請求影象的頭資訊
headers: {
'User-Agent':
'Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'
}),
// 彩色濾鏡，此處為覆蓋一個black12濾鏡
colorFilter:
ColorFilter.mode(Colors.black12, BlendMode.srcOver),
// 怎麼將影象填充到容器中 比如contain 儘可能大，但將影象完全包含在目標框中
fit: BoxFit.none,
// 在範圍對影象進行對齊操作
alignment: Alignment.center,
// 對於可拉伸圖片的切片操作？ 不是很懂
// centerSlice: Rect.fromLTRB(3,3,3,3)
// 圖重複的方向，repeat 即x 軸和y 軸都重複 然後 repeatX 即在X方向重複
repeat: ImageRepeat.repeatX,
// 是否在 TextDirection 方向繪圖
matchTextDirection: false),
// 邊框 BoxDecoration 抽象類 使用子類有 Border BorderDirectional
// Border可以獨立繪製上下左右獨立邊框的顏色，寬度等 當然也可以使用封裝好的比如 all，直接繪製邊框
border: Border.all(
color: Colors.black87,
width: 2.0,
// 邊框樣式
style: BorderStyle.solid),
// 圓角
borderRadius: BorderRadius.circular(30),
// 盒子的陰影列表，形狀隨盒子而變
boxShadow: <BoxShadow>[
BoxShadow(
// color 陰影顏色 offset 陰影的相對盒子的偏移量， blueRadius 陰影的模糊程度 spreadRadius 類似陰影的膨脹程度，可以理解為陰影的大小
color: Colors.black45,
offset: Offset(8, 8),
blurRadius: 7,
spreadRadius: 7)
],
// Gradient 抽象類定義 漸變類 LinearGradient
gradient: LinearGradient(
// 漸變偏移量開始的位置
begin: Alignment(-1, 0),
// 漸變偏移結束的位置
end: Alignment(1, 0),
// 繪製的基色
colors: <Color>[Colors.purple, Colors.blue[900]],
// 建立一個線性梯度 0~1.0 這個不懂
// stops: <double>[0.6],
// 定義漸變梯度的邊緣 對比image的repeat
tileMode: TileMode.clamp),
// 形狀
shape: BoxShape.rectangle),
// 前景裝飾
foregroundDecoration: BoxDecoration(),
// 長度
width: 224,
// 高度
height: 486,
// 限制容器大小
constraints: BoxConstraints(
// 設定寬度儘可能大
// minWidth: double.infinity,
// 最小高度20
minHeight: 20,
// 最大寬度 300
maxWidth: 300,
),
// 容器外填充
margin: EdgeInsets.symmetric(vertical: 20, horizontal: 0),
// 對容器實現矩陣變換操作，Matrix是一個4D矩陣
transform: Matrix4.skewY(0.3)..rotateZ(-3.14 / 12.0),
child: Icon(
Icons.close,
color: Colors.white70,
semanticLabel: 'Close',
)),
);
}
}
複製程式碼構造效果
