flutter 系列之:flutter 中常用的 container layout 详解
简介
在上一篇文章中,我们列举了 flutter 中的所有 layout 类,并且详细介绍了两个非常常用的 layout:Row 和 Column。
掌握了上面两个基本的 layout 还是不够的,如果需要应付日常的 layout 使用,我们还需要掌握多一些 layout 组件。今天我们会介绍一个功能强大的 layout:Container layout。
Container 的使用
Container 是一个空白的容器,通常可以用 Container 来封装其他的 widget。那么为什么还需要把 widget 封装在 Container 中呢?这是因为 Container 中包含了一些特殊的功能。
比如 Container 中可以设置背景颜色或者背景图片,并且可以设置 padding, margins 和 borders。这就为组件的自定义提供了诸多空间。
首先看一下 Container 的定义和构造函数:
可以看到 Container 是一个 StatelessWidget,它的构造函数可以传入多个非常有用的属性,用来控制 Container 的表现。
Container 中有 padding,decoration,constraints 和 margin 这些和位置相关的一些属性,他们有什么关系呢?
container 首先将 child 用 padding 包裹起来,padding 可以用 decoration 进行填充。
填充后的 padding 又可以应用 constraints 来进行限制(比如 width 和 height),然后这个组件又可以使用 margin 空白包裹起来。
接下来我们看一个简单的 Container 中包含 Column 和 Row 的例子。
首先构造一个 container widget,它包含一个 Column:
这里给 Container 设置了一个 BoxDecoration,用于指定 Container 的背景颜色。
在 Child 中给定了一个 Column widget,它的 child 是一个 Row 对象。
这里的 Row 中又是一个包含了 Image 的 Container 对象。
最后运行,我们可以得到下面的界面:
![](https://static001.geekbang.org/infoq/d0/d0e1d8db328cd7826d2aed39406db3ad.png)
Container 中包含两行,每行包含一个 Image 对象。
旋转 Container
默认情况下 Container 是一个正常布局的 widget,但是有时候我们可能需要实现一些特殊效果,比如说组件的旋转,Container 提供的 transform 属性可以很方便的做到这一点。
对于 Container 来说,transform 是在组件绘制中最先被应用的,transform 之后会进行 decoration 的绘制,然后进行 child 的绘制,最后进行 foregroundDecoration 的绘制。
还是上面的例子,我们试一下 transform 属性是如何工作的,我们在包含 image 的 container 中加入 transform 属性:
最后生成的 APP 如下:
![](https://static001.geekbang.org/infoq/e7/e7f22984ef2ba8a141a7a6937512349a.png)
可以看到图片已经沿 Z 轴进行了旋转。
这里的旋转使用的是 Matrix4.rotationZ,也就是沿 Z 轴选择,当然你可以可以使用 rotationX 或者 rotationY,分别沿 X 轴或者 Y 轴旋转。
如果选择 rotationX,那么看起来的图像应该是这样的:
![](https://static001.geekbang.org/infoq/53/537066599e3a53940aad9c52f724060e.png)
事实上,Matrix4 不仅仅可以沿单独的轴进行旋转,还可以选择特定的向量方向进行选择。
比如下面的两个方法:
Matrix4 还可以沿三个方向进行进行放大缩写,如下面的方法:
感兴趣的朋友可以自行尝试。
Container 中的 BoxConstraints
在 Container 中设置 Constraints 的时候,我们使用的是 BoxConstraints。BoxConstraints 有四个包含数字的属性,分别是 minWidth,maxWidth,minHeight 和 maxHeight。
所以 BoxConstraints 提供了这四个值的构造函数:
BoxConstraints 还有两个构造函数分别是 loose 和 tight:
这两个有什么区别呢?如果一个 axis 的最小值是 0 的话,那么这个 BoxConstraints 就是 loose。
如果一个 axis 的最大值和最小值是相等的情况,那么这个 BoxConstraints 就是 tight。
BoxConstraints 中还有一个非常常用的方法如下:
expand 的意思就是最大值和最小值都是 infinity 的,具体的定义可以从方法的实现中看出:
总结
Container 是一个非常常用的 layout 组件,大家可以熟练的使用起来。
本文的例子:https://github.com/ddean2009/learn-flutter.git
更多内容请参考 http://www.flydean.com/08-flutter-ui-layout-container/
最通俗的解读,最深刻的干货,最简洁的教程,众多你不知道的小技巧等你来发现!
欢迎关注我的公众号:「程序那些事」,懂技术,更懂你!
版权声明: 本文为 InfoQ 作者【程序那些事】的原创文章。
原文链接:【http://xie.infoq.cn/article/c3cb82c1d28a45eeda21590f5】。文章转载请联系作者。
评论