Flutter 布局之Container

最近新接触一个开发平台Flutter，它是谷歌在2018开发者大会上正式发布的一个全新开发工具，它最显著的特点就是一套源码两个平台（Android/iOS）公用。手上没有Mac电脑，所以就用它来尝试一下。
Flutter使用的开发语言是Dart。这个语言也是谷歌研发的，它与Java十分相似，有一定Java基础的更好上手，不过只要你了解过面向对象的编程语言，上手也很简单。Flutter的一个大的优点是它开发应用全部是由widget组成的，这也成了它的一个大的缺点，因为它的widge实在是太多了，必须要花费一定的时间去了解它。而且Flutter的布局在我看来并不是很理想，可能是我刚接触这个语言，在今后的学习中，还需要继续去巩固。
关于怎么在Windows/Mac上安装Flutter，百度上教程一大堆，唯一要注意的是，gradle要手动下载，手动解压。其实所有在AS中更新不了的SDK或者Plugins都需要手动下载手动解压到目录中。（我装了一个下午才装好，都是泪）

Container简介

Container在Flutter官方文档里的定义如下

A convenience widget that combines common painting, positioning, and sizing widgets.

其本质上是一个包含多个widget的widget，它内部有绘制widget、定位widget、尺寸widget。后续看到的不少widget，都是通过一些更基础的widget组合而成的。在iOS中没有给定这种控件，不过iOS中的View属性与其类似。有iOS开发经验的可以借鉴一下。

Container 组成

Container的组成如下：

1.最里层的是child元素；
2.child元素首先会被padding包着；
3.然后添加额外的constraints限制；
4.最后添加margin。

Container 绘制过程如下：

首先会绘制transform效果；
接着绘制decoration；
然后绘制child；
最后绘制foregroundDecoration。

Container尺寸调节

Container在没有子节点（children）的时候，会试图去变得足够大。除非constraints是unbounded限制，在这种情况下，Container会试图去变得足够小。
带子节点的Container，会根据子节点尺寸调节自身尺寸，但是Container构造器中如果包含了width、height以及constraints，则会按照构造器中的参数来进行尺寸的调节。

Container包含的widget各自拥有自己的属性，但是其布局规则大致如下

对齐（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调整自身。

如果没有子节点、对齐方式（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调整自身。

继承关系如下

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > Container

Container的构造

其构造函数如下：

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,})

属性介绍：

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: 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),
)

使用场景：
Container算是目前项目中，最经常用到的一个widget。在实际使用过程中，笔者在以下情况会使用到Container，当然并不是绝对的，也可以通过其他widget来实现。

需要设置间隔（这种情况下，如果只是单纯的间隔，也可以通过Padding来实现）；
需要设置背景色；
需要设置圆角或者边框的时候（ClipRRect也可以实现圆角效果）；
需要对齐（Align也可以实现）；
需要设置背景图片的时候（也可以使用Stack实现）。

今天就写到这里。

Flutter Container属性相关推荐

Flutter Container、Center设置控件居中背景及其他属性
Flutter Container.Center设置控件居中背景及其他属性 //控件可以居中Container(alignment: Alignment.bottomCenter,//设置控件内容的位 ...
android 容器圆角,flutter Container容器实现圆角边框
本文实例为大家分享了flutter Container容器实现圆角边框的具体代码,供大家参考,具体内容如下在这里使用 Container 容器来实现圆角矩形边框效果 1 圆角矩形边框 Contain ...
flutter TextField 属性详细分析
flutter TextField 属性简单的进行了归纳,有些是仅凭字面翻译. flutter TextField中的InputDecoration属性 TextField({Key key,thi ...
flutter Container 的decoration 属性
decoration: 背景装饰 decoration可以设置边框.背景色.背景图片.圆角等属性,非常实用.对于transform这个属性,一般有过其他平台开发经验的,都大致了解,这种变换,一般不是变 ...
Flutter Container 容器以及对齐方式 Alignment
Container 题记:不到最后时刻,千万别轻言放弃,无论结局成功与否,只要你拼博过,尽力过,一切问心无愧. 目前在西瓜视频上免费刊登 Flutter 系列教程,每日更新,欢迎关注接收提醒 [x1] ...
Flutter Container 组件
目录参数详解代码示例效果图完整代码 Container 官网简介:一个便利的小部件,结合了常见的绘画,定位和大小调整小部件. 其实就是一个容器组件,既然是容器,那么,就一定可以装很多东西,而C ...
Flutter Container 参数详解
1 基本内容 1.1 继续关系 Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget ...
Flutter PageView 属性使用详解
PageView.builder({Key? key,this.scrollDirection = Axis.horizontal,this.reverse = false,PageControlle ...
Flutter Container 设置最大最小宽高
Container 设置最大最小宽高: 需要添加 constraints 属性 constraints: constraints: BoxConstraints(maxWidth: 180, m ...

Flutter Container属性

FLUTTER 开发初识

Flutter 布局之Container

Container简介

Container 组成

Container的构造

Flutter Container属性相关推荐

最新文章

热门文章