Flutter中可以经常看到的控件Container,所以我们这篇文章开始细致介绍一下Container.
1 简介
A convenience widget that combines common painting, positioning, and sizing widgets.
Container在Flutter开发中非常常见,官方给出的简介是一个结合了绘制(painting),定位(positioning),以及尺寸(sizing)widget的widget.
通过官方的描述可以得出几个信息，它是一个组合的widget，内部有绘制widget、定位widget、尺寸widget。后续看到的不少widget，都是通过一些更基础的widget组合而成的。
1.1 Container的组成
Container的组成:
- 最里面的是child元素;
- child元素首先会被padding包裹着;
- 然后添加额外的constrainits限制;
- 最后添加margin;
Container的绘制过程:
- 首先会绘制transform效果;
- 接着绘制decoration;
- 然后绘制child;
- 最后绘制foregroundDecoration;
Container自身尺寸的调节分两种情况:
- Container再看没有子节点(children)的时候,会试图去变得足够大.除非constraints是unbounded限制,在这种情况下,Container会试图变得足够小.
- 带子节点的Container,会根据子节点尺寸调节自身尺寸,但是Container构造器中如果包含了width、height以及constraints,则会按照构造器中的参数来进行尺寸调节.
1.2 布局
Container组合了一系列的widget,这些widget都有自己的布局行为,因此Container的布局行为会比较复杂.
一般情况下，Container会遵循如下顺序去尝试布局：
- 对齐(alignment);
- 调节自身尺寸适合子节点;
- 扩展自身去适应父节点;
- 调节自身到足够小;
进一步说:
- 如果没有子节点、没有设置width、height以及constraints，并且父节点没有设置unbounded的限制，Container会将自身调整到足够小.
- 如果没有子节点、对齐方式（alignment），但是提供了width、height或者constraints，那么Container会根据自身以及父节点的限制，将自身调节到足够小.
- 如果没有子节点、width、height、constraints以及alignment，但是父节点提供了bounded限制，那么Container会按照父节点的限制，将自身调整到足够大.
- 如果有alignment，父节点提供了unbounded限制，那么Container将会调节自身尺寸来包住child.
- 如果有alignment，并且父节点提供了bounded限制，那么Container会将自身调整的足够大（在父节点的范围内），然后将child根据alignment调整位置.
- 含有child，但是没有width、height、constraints以及alignment，Container会将父节点的constraints传递给child，并且根据child调整自身.
1.3 继承关系
Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container
从继承关系可以看出，Container是一个StatelessWidget。Container并不是一个最基础的widget，它是由一系列的基础widget组合而成。
2. 源码解析
构造函数如下：
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,
})
2.1 属性解析
- key：Container唯一标识符，用于查找更新.
- alignment：控制child的对齐方式，如果container或者container父节点尺寸大于child的尺寸，这个属性设置会起作用，有很多种对齐方式.
- padding：decoration内部的空白区域，如果有child的话，child位于padding内部。padding与margin的不同之处在于，padding是包含在content内，而margin则是外部边界，设置点击事件的话，padding区域会响应，而margin区域不会响应.
- color：用来设置container背景色，如果foregroundDecoration设置的话，可能会遮盖color效果.
- decoration：绘制在child后面的装饰，设置了decoration的话，就不能设置color属性，否则会报错，此时应该在decoration中进行颜色的设置.
- foregroundDecoration：绘制在child前面的装饰.
- width：container的宽度，设置为double.infinity可以强制在宽度上撑满，不设置，则根据child和父节点两者一起布局.
- height：container的高度，设置为double.infinity可以强制在高度上撑满.
- constraints：添加到child上额外的约束条件.
- margin：围绕在decoration和child之外的空白区域，不属于内容区域.
- transform：设置container的变换矩阵，类型为Matrix4.
- child：container中的内容widget.
例如:
new Container(
constraints: BoxConstraints.expand(
height:Theme.of(context).textTheme.display1.fontSize * 1.1 + 200.0,
),
decoration: BoxDecoration(
border: Border.all(width: 2.0, color: Colors.red),
color: Colors.grey,
borderRadius: BorderRadius.all(new Radius.circular(20.0)),
image: DecorationImage(
image: NetworkImage('http://h.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'),
centerSlice: Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
),
//这是一个渐变颜色的属性,在使用时注意不能设置container的color,否则会报错.
//gradient: const LinearGradient(
// colors: [Colors.purple,Colors.green,Colors.cyanAccent],
// ),
),
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
child: Text('Hello World',
style: Theme.of(context).textTheme.display1.copyWith(color: Colors.black)),
transform: Matrix4.rotationZ(0.3),
)
其中decoration可以设置边框、背景色、背景图片、圆角等属性，非常实用。对于transform这个属性，一般有过其他平台开发经验的，都大致了解，这种变换，一般不是变换的实际位置，而是变换的绘制效果，也就是说它的点击以及尺寸、间距等都是按照未变换前的.
实际效果.png
想了解更多Flutter学习知识请联系:QQ(814299221)
网友评论