基本組件 -- Container
容器，一個(gè)常用的組件咧栗，是一個(gè)方便繪制、定位和調(diào)整子組件大小的組件.
負(fù)責(zé)創(chuàng)建矩形的可視元素圆丹，可以用BoxDecoration來設(shè)計(jì)樣式居凶，比如背景虫给、邊框和陰影，Container也有邊距侠碧、填充和大小限制抹估。
構(gòu)造方法
Container({
Key key,
this.alignment,//控制child的對齊方式
this.padding, //設(shè)置內(nèi)邊距
Color color, //設(shè)置背景顏色
Decoration decoration,//繪制在child下層的裝飾，不能與color同時(shí)使用
this.foregroundDecoration,//繪制在child上層的裝飾
double width, //寬
double height, //高
BoxConstraints constraints,添加到child上額外的約束條件
this.margin,//外邊距
this.transform,//設(shè)置container的變換矩陣弄兜，類型為Matrix4
this.child, //子組件
}) : assert(margin == null || margin.isNonNegative),
assert(padding == null || padding.isNonNegative),
assert(decoration == null || decoration.debugAssertIsValid()),
assert(constraints == null || constraints.debugAssertIsValid()),
assert(color == null || decoration == null,
'Cannot provide both a color and a decoration\n'
'The color argument is just a shorthand for "decoration: new BoxDecoration(color: color)".'）
常用屬性
| 屬性名 | 功能 | 值所屬類型 |
|---|---|---|
| alignment | topCenter：頂部居中對齊 topLeft：頂部左對齊 topRight：頂部右對齊 center：水平垂直居中對齊 centerLeft：垂直居中水平居左對齊 centerRight：垂直居中水平居右對齊 bottomCenter 底部居中對齊bottomLeft：底部居左對齊 bottomRight：底部居右對齊 | Alignment |
| decoration | 容器的修飾器药蜻，用于背景或者border | BoxDecoration |
| margin | Container與外部其他組件的距離 | 值為一個(gè) EdgeInsets 對象。EdgeInsets 對象即可調(diào)用EdgeInsets.all() 方法統(tǒng)一設(shè)置左上右下四條邊的邊距替饿，也可以調(diào)用 EdgeInsets.fromLTRB() 分別設(shè)置左上右下四條邊的邊距 |
| padding | Container邊緣與Child之間的距離 | 值為一個(gè) EdgeInsets 對象语泽。EdgeInsets 對象即可調(diào)用EdgeInsets.all() 方法統(tǒng)一設(shè)置左上右下四條邊的邊距，也可以調(diào)用 EdgeInsets.fromLTRB() 分別設(shè)置左上右下四條邊的邊距 |
| transform | 調(diào)整旋轉(zhuǎn)的角度 | Matrix4 |
| height | 容器高度 | double |
| width | 容器寬度 | double |
| child | 容器子元素 | Widget |
BoxDecoration 的構(gòu)造方法
const BoxDecoration({
this.color,
this.image,
this.border,
this.borderRadius,
this.boxShadow,
this.gradient,
this.backgroundBlendMode,
this.shape = BoxShape.rectangle,
}) : assert(shape != null),
assert(
backgroundBlendMode == null || color != null || gradient != null,
'backgroundBlendMode applies to BoxDecoration\'s background color or '
'gradient, but no color or gradient was provided.'
);
代碼
/*
* Container 組價(jià)
*/
class ContainerView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 200.0,
width: 200.0,
// color: Colors.blueGrey,
alignment: Alignment.centerLeft, // 相對子元素對齊方式
child: Text("zhangssr"),
margin: EdgeInsets.all(30.0), //外邊距
padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0), //內(nèi)間距
transform: Matrix4.skewY(0.3),
decoration: BoxDecoration(
//裝飾视卢，背景邊框等踱卵，不能與 color 屬性同時(shí)設(shè)置，會(huì)繪制在 child 之下据过，也就是會(huì)被 child 覆蓋
color: Colors.blue,
//背景邊框
border: Border.all(
//邊框顏色
color: Colors.blue,
//邊框?qū)挾? width: 5),
// 邊框圓角
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(15.0),
bottomRight: Radius.circular(20.0)),
//漸變效果惋砂，會(huì)覆蓋 color
gradient: LinearGradient(
colors: [Color(0xFFFFDEAD), Color(0xFF98FB98), Color(0xFF6495ED)]),
//陰影效果
boxShadow: [BoxShadow(color: Color(0xFFFF0000), blurRadius: 5.0)],
//應(yīng)該是背景混合模式，這個(gè)應(yīng)該比較復(fù)雜绳锅，后面再研究
backgroundBlendMode: BlendMode.color,
),
);
}
}
image.png
