Flutter 布局(一)- Container详解
本文主要介绍flutter中非常常见的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的组成如下:
- 最里层的是child元素;
- child元素首先会被padding包着;
- 然后添加额外的constraints限制;
- 最后添加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布局;
- 扩展自身去适应父节点;
- 调节自身到足够小。
进一步说:
- 如果没有子节点、没有设置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调整自身。
另外,margin以及padding属性也会影响到布局。
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, })
平时使用最多的,也就是padding、color、width、height、margin属性。
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。
2.2 一个例子
new container( constraints: new boxconstraints.expand( height:theme.of(context).texttheme.display1.fontsize * 1.1 + 200.0, ), decoration: new boxdecoration( border: new border.all(width: 2.0, color: colors.red), color: colors.grey, borderradius: new borderradius.all(new radius.circular(20.0)), image: new decorationimage( image: new networkimage('http://h.hiphotos.baidu.com/zhidao/wh%3d450%2c600/sign=0d023672312ac65c67506e77cec29e27/9f2f070828381f30dea167bbad014c086e06f06c.jpg'), centerslice: new rect.fromltrb(270.0, 180.0, 1360.0, 730.0), ), ), padding: const edgeinsets.all(8.0), alignment: alignment.center, child: new text('hello world', style: theme.of(context).texttheme.display1.copywith(color: colors.black)), transform: new matrix4.rotationz(0.3), )
这是官方文档给出例子的一个变种,包含属性比较全,可以看下其用法。实际运行效果如下:
其中decoration可以设置边框、背景色、背景图片、圆角等属性,非常实用。对于transform这个属性,一般有过其他平台开发经验的,都大致了解,这种变换,一般不是变换的实际位置,而是变换的绘制效果,也就是说它的点击以及尺寸、间距等都是按照未变换前的。
2.3 源码
decoration = decoration ?? (color != null ? new boxdecoration(color: color) : null),
可以看出,对于颜色的设置,最后都是转换为decoration来进行绘制的。如果同时包含decoration和color两种属性,则会报错。
@override widget build(buildcontext context) { widget current = child; if (child == null && (constraints == null || !constraints.istight)) { current = new limitedbox( maxwidth: 0.0, maxheight: 0.0, child: new constrainedbox(constraints: const boxconstraints.expand()) ); } if (alignment != null) current = new align(alignment: alignment, child: current); final edgeinsetsgeometry effectivepadding = _paddingincludingdecoration; if (effectivepadding != null) current = new padding(padding: effectivepadding, child: current); if (decoration != null) current = new decoratedbox(decoration: decoration, child: current); if (foregrounddecoration != null) { current = new decoratedbox( decoration: foregrounddecoration, position: decorationposition.foreground, child: current ); } if (constraints != null) current = new constrainedbox(constraints: constraints, child: current); if (margin != null) current = new padding(padding: margin, child: current); if (transform != null) current = new transform(transform: transform, child: current); return current; }
container的build函数不长,绘制也是一个线性的判断的过程,一层一层的包裹着widget,去实现不同的样式。
最里层的是child,如果为空或者其他约束条件,则最里层包含的为一个limitedbox,然后依次是align、padding、decoratedbox、前景decoratedbox、constrainedbox、padding(实现margin效果)、transform。
container的源码本身并不复杂,复杂的是它的各种布局表现。我们谨记住一点,如果内部不设置约束,则按照父节点尽可能的扩大,如果内部有约束,则按照内部来。
2.4 使用场景
container算是目前项目中,最经常用到的一个widget。在实际使用过程中,笔者在以下情况会使用到container,当然并不是绝对的,也可以通过其他widget来实现。
- 需要设置间隔(这种情况下,如果只是单纯的间隔,也可以通过padding来实现);
- 需要设置背景色;
- 需要设置圆角或者边框的时候(cliprrect也可以实现圆角效果);
- 需要对齐(align也可以实现);
- 需要设置背景图片的时候(也可以使用stack实现)。
3. 例子
接下来我们试着去做一个圆角按钮,它包含以下特性:
- 支持设置按钮的三种状态(正常态、点击态、禁用态)的色值;
- 支持设置按钮标题;
- 支持设置宽高;
- 支持点击回调;
根据上面介绍,利用decoration这个属性,基本上就可以完成效果了,至于点击效果以及点击回调,则使用一个gesturedetector就可以完成了。实际的例子非常简单,在这里就不贴代码了。实际运行效果如下所示:
3.1 注意事项
这个小控件,写起来很简单,本身没有什么难度,只是纯粹的介绍了container的使用方法,但是有一个地方需要注意的。在控件的deactivate状态,我们需要将控件的属性初始到最开始的状态,例如在本例中,有如下代码:
@override void deactivate() { super.deactivate(); currentcolor = widget.backgroundcolor; }
这么做是为什么了?是因为在点击按钮进行页面跳转的时候,按钮处在点击态,当我们返回的时候,页面还是处在点击态,这显然就不正确了,因此需要我们手动的在deactivate状态下,将控件恢复到初始状态。但是呢,这个设置颜色,并不是说在deactivate的时候,就立马去刷新控件,而是在下次再进入这个页面的时候,再次运行build的时候,会按照这个初始值进行绘制,也就是恢复到了最开始的状态。
3.2 代码
代码github地址,这是一个系列的项目,如果不出意外,会将flutter中常见的二十多种布局widget都介绍一下。
4. 后话
笔者建了一个flutter学习相关的项目,,里面包含了笔者写的关于flutter学习相关的一些文章,会定期更新,也会上传一些学习demo,欢迎大家关注。
5. 参考
上一篇: 薛仁贵真的很厉害吗?三箭定天山!
下一篇: 朱元璋为什么不准蒲姓人当官?原因是什么
推荐阅读
-
使用Flutter实现一个走马灯布局的示例代码
-
Flutter 布局(二)- Padding、Align、Center详解
-
Flutter 布局(四)- Baseline、FractionallySizedBox、IntrinsicHeight、IntrinsicWidth详解
-
Flutter 布局(五)- LimitedBox、Offstage、OverflowBox、SizedBox详解
-
Flutter 布局(三)- FittedBox、AspectRatio、ConstrainedBox详解
-
Flutter 布局(一)- Container详解
-
Flutter常用的布局和事件示例详解
-
如何使用Flutter开发一款电影APP详解
-
Flutter 布局详解
-
element中el-container容器与div布局区分详解