Flutter基础组件之Container
官⽅简介中，说 Container 组件是⼀个⽅便绘制、定位和调整⼦组件⼤⼩的组件。
⾸先 Container 会在 child ⼦组件周围填充 padding（包括 decoration 中存在的 border），然后会根据约束 constraints 来决定⼦组件的宽⾼，最后 Container 会根据 margin 来添加周围的空⽩空间。
在绘制过程中，Container 先会应⽤矩阵变换 transform，然后绘制 decoration，然后绘制 child ⼦组件，最后绘制foregroundDecoration。
Container 如果没有⼦组件的话会尝试尽可能地⼤，除⾮传⼊的约束 constraints 是⽆限的，如果是这种情况，Container 会尽可能地⼩。Containers with children size themselves to their children. The width, height, and  arguments to the constructor override this.（这句话看不懂了，T_T）。
总的来说，Container 是⼀种很常⽤的组件，我们可以⽤它来包裹任意组件，之前说Text 组件⾥⾯设置 backgroundColor 会让有的⽂字显⽰有问题，如果⽤ Container 来包裹 Text 再设置背景就很⽅便了，⽽且包括圆⾓等样式都可以轻松设置，再也不⽤ Android 那样定义许多⼤同⼩异的 xml 了。
1 构造⽅法
Container({Key key, AlignmentGeometry alignment, EdgeInsetsGeometry padding, Color color, Decoration decoration, Decoration foregroundDecoration, double width, double height, BoxConstraints constraints, EdgeInsetsGeometry margin, Matrix4 transform, Widget child })
Container 只有这⼀个构造⽅法，并没有必传的参数，但是⼀般我们都会⽤它来包裹⼦组件，也就是⼀般都会设置 child 属性。
2 常⽤属性
width 和 height：宽和⾼，这个不⽤赘述。
color：背景⾊，值为⼀个 Color 对象，不能与 decoration 属性同时设置。
margin：外边距，值为⼀个 EdgeInsets 对象。EdgeInsets 对象即可调⽤EdgeInsets.all() ⽅法统⼀设置左上右下四条边的边距，也可以调⽤ EdgeInsets.fromLTRB() 分别设置左上右下四条边的边距。
padding：内间距，值同 margin。
alignment：对齐⽅式，可选值（看字⾯意思就很好理解）有：
<：垂直和⽔平居中都对齐。
Alignment.bottomLeft：垂直靠底部⽔平靠左对齐。
Alignment.bottomCenter：垂直靠底部⽔平居中对齐。
Alignment.bottomRight：垂直靠底部⽔平靠右对齐。
除了上⾯的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量。
decoration：装饰，背景边框等，不能与 color 属性同时设置，会绘制在 child 之下，也就是会被 child 覆盖，具体 API 参考 2.1
BoxDecoration。
foregroundDecoration：也是装饰，但是会绘制在 child 之上，也就是会覆盖 child。
constraints：约束，这个规则貌似挺复杂的，后⾯详细研究。
transform：形状变换，这个⽤得应该⽐较少，可能会在做动画的时候⽤到，后⾯详细研究。
child：⼦组件。
2.1 BoxDecoration
⾸先 BoxDecoration 只是 Decoration 的⼀个实现类，其他实现类还有 FlutterLogoDecoration、ShapeDecoration、UnderlineTabIndicator，这⾥只是介绍⼀下常⽤的 BoxDecoration。
color：背景填充颜⾊，值为⼀个 Color 对象。
border：值为⼀个 BoxBorder 对象，该对象可以设置边框颜⾊、边框宽度、边框样式等。
borderRadius：边框圆⾓，可以调⽤ BorderRadius.all() 统⼀设置四个⾓的圆⾓，也可以调⽤ ly() 分别设置四个⾓的
圆⾓。
gradient：设置成渐变效果的背景，会覆盖 color。
boxShadow：阴影效果，值为⼀个 BoxShadow 集合。
backgroundBlendMode：应该是背景混合模式，这个应该⽐较复杂，后⾯再研究。
image：使⽤图⽚作为装饰。
下⾯是⼀个设置了上述属性的 demo：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
var imgUrl =
"timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1545122324077&di=1b5986ad937c81c41f4c135ea1a9a026&imgtype=0&src=ht    return MaterialApp(
//是否显⽰ debug 标签
debugShowCheckedModeBanner: false,
title: "Container",
home: Scaffold(
appBar: new AppBar(
title: new Text("Container"),
),
body: new Container(
//      color: new Color(0xFFFF0000),
//外边距，值为⼀个 EdgeInsets 对象
margin: EdgeInsets.all(30.0),
//内间距，值为⼀个 EdgeInsets 对象
padding: EdgeInsets.fromLTRB(30.0, 0, 0, 0),
//对齐⽅式，可选值有：
//pLeft：垂直靠顶部⽔平靠左对齐。
//pCenter：垂直靠顶部⽔平居中对齐。
//pRight：垂直靠顶部⽔平靠右对齐。
//Left：垂直居中⽔平靠左对齐。
//：垂直和⽔平居中都对齐。
//Right：垂直居中⽔平靠右对齐。
/
/Alignment.bottomLeft：垂直靠底部⽔平靠左对齐。
//Alignment.bottomCenter：垂直靠底部⽔平居中对齐。
//Alignment.bottomRight：垂直靠底部⽔平靠右对齐。
//除了上⾯的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量
alignment: Left,
//装饰，背景边框等，不能与 color 属性同时设置，会绘制在 child 之下，也就是会被 child 覆盖
decoration: new BoxDecoration(
//背景填充颜⾊
color: new Color(0xFFFF0000),
color: new Color(0xFFFF0000),
//背景边框
border: new Border.all(
//边框颜⾊
color: new Color(0xFFFFFF00),
//边框宽度
width: 5),
//边框圆⾓
borderRadius: ly(
borderboxtopLeft: new Radius.circular(5.0),
topRight: new Radius.circular(10.0),
bottomLeft: new Radius.circular(15.0),
bottomRight: new Radius.circular(20.0)),
/
/渐变效果，会覆盖 color
gradient: new LinearGradient(colors: [
new Color(0xFFFFDEAD),
new Color(0xFF98FB98),
new Color(0xFF6495ED)
]),
//阴影效果
boxShadow: [new BoxShadow(color:Color(0xFFFF0000),blurRadius: 5.0)],              //应该是背景混合模式，这个应该⽐较复杂，后⾯再研究
backgroundBlendMode: lor,
//图⽚
//              image: new DecorationImage(image: new NetworkImage(imgUrl))
),
//也是装饰，但是会绘制在 child 之上，也就是会覆盖 child
//          foregroundDecoration: new BoxDecoration(
//              image: new DecorationImage(image: new NetworkImage(imgUrl))
//          ),
//约束，这个规则貌似挺复杂的，后⾯详细研究
constraints: new BoxConstraints(maxWidth: 300.0, maxHeight: 400.0),
//形状变换，这个⽤得应该也⽐较少，可能会在做动画的时候⽤到，后⾯详细研究          transform: new Matrix4.skewY(0.3),
//⼦组件
child: new Text(
"Hello World",
textDirection: TextDirection.ltr,
style: new TextStyle(color: new Color(0xFFFFFFFF), fontSize: 40.0),
),
),
),
);
}
}
运⾏效果如下：
可以看到我们给 Container 设置了 margin 属性，所以上下左右有⼀些外边距，然后虽然设置了对齐⽅式 alignment 为 centerLeft，但是⼜设置了左边距为 100，所有左边⼜有⼀些内间距，同时设置了约束 constraints 最⼤宽度为 300，所有它的宽度⽐全屏减去外边距还要⼩⼀些，我们还设置了边框、圆⾓、渐变背景、矩阵变换等⼀系列让其效果更丰富的属性，这些设置也并不⿇烦，最终就是上⾯这个效果。
3 总结
在学习 Text 组件的时候觉得想给它设置圆⾓背景什么的⽆从下⼿，但是如果⽤ Container ⼀包裹的话简直不要太简单，⽽且 Flutter 实现圆⾓的⽅式⽐起 Android 那种写很多 xml ⽂件的⽅式，让我⼀下就爱上它了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。