Flutter 布局详解

本文主要介绍了Flutter布局相关的内容，对相关知识点进行了梳理，并从实际例子触发，进一步讲解该如何去进行布局。

1. 简介

在介绍Flutter布局以前，咱们得先了解Flutter中的一些布局相关的特性。

1.1 边界约束（box constraints）

box constraints有人也翻译为盒约束、箱约束，我我的仍是以为边界约束可能更直观一些。

Flutter中的边界约束，是指widget能够按照指定限定条件，来决定自身如何占用布局空间。Flutter借鉴了不少React相关的东西，包括一些布局思想，可是它自身没有抽离出布局样式，而是用不一样的widget去实现不一样的布局，将样式嵌入widget中，用户能够像搭积木同样写布局，写法上跟React很像，只不过没了样式的设定。

这样作的好处，我以为多是为了统一的渲染。加入样式，会让布局复杂很多，在渲染层面会下降不少性能。所以，Flutter在大的方向上，加入不一样类型的布局widget。在小的方向上，只给出不多的定制化的东西，将布局限定在有限的范围内，在完成布局的同时，让整个渲染可以统一，加快了更新和渲染。

可是，缺点也是一样明显，少了不少灵活性，不一样的布局方式都被抽离出了widget，你们须要了解的widget很是多，增长了学习成本。

1.2 约束种类

在Flutter中，widget是由其底层的RenderBox渲染，渲染边界的约束（Constraints）由父级给出，widget在这些约束下调整自身尺寸。约束包括最小最大宽高，尺寸则是具体的宽高。

在Android中，布局的宽高限定有三种，match_parent、wrap_content以及具体尺寸。在Flutter中，也有这三种约束。

• 尽量大的约束，例如Center、ListView等；
• 跟随内容大小的约束，例如Transform、Opacity等；
• 指定尺寸的约束，例如Image、Text等；

可是，Flutter并无把widget处理的这么绝对，这些约束条件包含在widget里，不像Android能够在外面去指定。所以，一些widget，例如Container，会根据参数的不一样，约束条件也不一样。Container默认是尽量大的，可是给定尺寸的话，就会优先使用具体值。不一样的widget可能设置条件不一样、其子widget不一样，约束条件也会不同。Flutter将每种widget限制在不一样的约束范围里，实际布局的时候，还须要综合去考虑。

2. 分类

按照约束条件来分类，不少widget不太好区分开来，官方也是根据其子元素的个数来分类。

• 单个子元素（child）的布局，包括Container、Padding等18种（目前是2018年5月25日，后续我想确定会增长的，下面相似）；
• 多个子元素（children）的布局，包括Row、Column等11种；
• layout helper，例如ListView.Builder，在元素多的时候，用这种方式更加的高效，相似Android的RecyclerView，有自动的回收机制。这种严格意义上不能算是一个种类，我以为这种helper会愈来愈多。

2.1 优缺点

其中平常中用的多的，例如Container、Padding、Center、Align、Row、Column、Stack、ListView等也有上十种。

Flutter提供接近30多种不一样的布局widget，仍是源于其对widget的定位（在此处再也不阐述，想了解的，能够翻看笔者以前文章的介绍）。对比其余移动端的开发平台，能够看出Flutter的布局widget是巨多，这也是为何Flutter如今学习曲线很长的一个缘由。

先来讲下优势，统一渲染，更新效率更高。可是，对于普通开发者而言，是不会去太在意这些的。性能高原本就是平台应该提供的最基本的能力，难道不是你应该提供的吗？

而后说下缺点吧，掌握起来仍是很是费事的，布局起来也是挺蛋疼的。常规的布局还好，一到复杂的布局，以为这个也能实现，那个也能实现，最后不知道哪一个能够实现。

2.2 我的见解

Flutter对于性能的优化，把平台侧的一些成本转接到开发者身上，不过呢，如今也是Flutter的初期，能够看出，总体的设计思路仍是很是好的，也只有谷歌这种轮子大厂才敢这么干。可是，很明显少了些人为关怀，不一样widget间约束条件穿插着，也能够说Flutter布局控件种类的增长，是其不断的打补丁致使的，后续的各类helper，也是为了填坑，这一起Flutter显然没有处理的很好。

可是，凡事都有个过程，不能说Flutter这些地方作的很差，只是目前看起来比较混乱，理想的架构设计，落地下来，可能就不是那么简单，开发者的需求千差万别，有了生态，什么都好说，固然这个过程，预计是会很是的缓慢。

3. widget详解

在Flutter中，咱们平时自定义的widget，通常都是继承自StatefulWidget或StatelessWidget（并非只有这两种），这两种widget也是目前最经常使用的两种。若是一个控件自身状态不会去改变，建立了就直接显示，不会有色值、大小或者其余属性的变化，这种widget通常都是继承自StatelessWidget，常见的有Container、ScrollView等。若是一个控件须要动态的去改变或者相应一些状态，例如点击态、色值、内容区域等，那么通常都是继承自StatefulWidget，常见的有CheckBox、AppBar、TabBar等。其实单纯的从名字也能够看出这两种widget的区别，这两种widget都是继承自Widget类。

3.1 Widget类

Widget类在Flutter中是很是重要的，继承自Widget类的有PreferredSizeWidget、ProxyWidget、RenderObjectWidget、StatefulWidget、StatelessWidget。咱们平常使用的绝大部分widget都是继承自Widget类，

查看Widget类源码，内部实现很是简单，构造函数以下

const Widget({ this.key });
final Key key;
复制代码

这个key的做用，注视上写的很清楚，是用来控制在widget树中替换widget的时候使用的。其中Key类是Widget、Element以及SemanticsNode的惟一标识符，继承自Key的还有LocalKey以及GlobalKey。

3.2 State

在说到StatefulWidget以前，先说下State。State的做用有两点：

1. 在widget构建的时候能够被同步读取；
2. 在widget的生命周期中可能会被改变。

3.2.1 State生命周期

State的生命周期有四种状态：

• created：当State对象被建立时候，State.initState方法会被调用；
• initialized：当State对象被建立，但尚未准备构建时，State.didChangeDependencies在这个时候会被调用；
• ready：State对象已经准备好了构建，State.dispose没有被调用的时候；
• defunct：State.dispose被调用后，State对象不可以被构建。

完整生命周期以下：

• 建立一个State对象时，会调用StatefulWidget.createState；
• 和一个BuildContext相关联，能够认为被加载了（mounted）；
• 调用initState；
• 调用didChangeDependencies；
• 通过上述步骤，State对象被彻底的初始化了，调用build；
• 若是有须要，会调用didUpdateWidget；
• 若是处在开发模式，热加载会调用reassemble；
• 若是它的子树（subtree）包含须要被移除的State对象，会调用deactivate；
• 调用dispose,State对象之后都不会被构建；
• 当调用了dispose,State对象处于未加载（unmounted），已经被dispose的State对象没有办法被从新加载（remount）。

3.2.2 setState

State中比较重要的一个方法是setState，当修改状态时，widget会被更新。比方说点击CheckBox，会出现选中和非选中状态之间的切换，就是经过修改状态来达到的。

查看setState源码，在一些异常的状况下将会抛出异常：

• 传入的为null；
• 处在defunct阶段；
• created阶段尚未被加载（mounted）；
• 参数返回一个Future对象。

检查完一系列异常后，最后调用代码以下：

_element.markNeedsBuild();
复制代码

markNeedsBuild内部，则是经过标记element为diry，在下一帧的时候重建（rebuild）。能够看出setState并非当即生效，它只是将widget进行了标记，真正的rebuild操做，则是等到下一帧的时候才会去进行。

3.3 StatefulWidget和StatelessWidget

StatefulWidget和StatelessWidget以下所示

一个StatelessWidget能够用多个不一样的BuildContext构建，而一个StatefulWidget会为每一个BuildContext建立一个State对象。

3.3.1 StatelessWidget

对于StatelessWidget，build方法会在以下三种状况下调用，

1. widget第一次被插入到树中；
2. widget的父节点更改了配置（configuration）；
3. widget依赖的InheritedWidget改变了。

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));
  }
}
复制代码

3.3.2 StatefulWidget

StatefulWidget的两个主要类别：

1. 在initState中建立资源，在dispose中销毁，可是不依赖于InheritedWidget或者调用setState方法，这类widget基本上用在一个应用或者页面的root；
2. 使用setState或者依赖于InheritedWidget，这种在营业生命周期中会被重建（rebuild）不少次。

class YellowBird extends StatefulWidget {
  const YellowBird({ Key key }) : super(key: key);

  @override
  _YellowBirdState createState() => new _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFFFFE306));
  }
}
复制代码

4. 如何布局

每一个页面设计都不同，相同页面可选择的布局方式也不同，若是单纯的说应该如何去布局，我以为不现实，你们能够参考下Flutter官方的布局教程。接下来，笔者，经过一个简单的页面，来一步一步的拆解布局的流程。整个过程，基本上按照拆解、组件封装、具体布局这三步来的。

4.1 拆解

4.1.1 总体拆解

根据设计图，能够看出总体时分行展现的，所以最外层是一个Column元素

• 第一行为标题，涉及到不对称的布局，能够用一个Stack或者Row来进行，用Row的话，则须要右边填上一个空白的widget占位。也可能会使用AppBar，将底部阴影去掉也能实现相同效果；
• 第二行能够看做一个Row，分两块布局。右边部分，涉及到叠加，会考虑Stack；
• 第三行比较复杂，总体看，也是一行一行进行展现的，所以最外层时一个Column。中间的文本部分须要根据个数自动换行，所以考虑使用Wrap。预习这个地方涉及到叠加，考虑Stack实现；
• 第四行能够看做一个Row，分三块进行布局；
• 第五行能够看做一个Row，分两块布局。

每一行之间的间隔，则能够考虑用Padding或者Container来设置。

经过上面这样一步一步的分析后，基本上对大体的布局有了一个了解，最外层的控件大体选对（只要能实现的话，就是复杂度以及效率的问题），而后一步一步的拆解每一行的元素，若是有重复的或者以为能够封装出来的部分，则进行下一步。

4.1.2 局部拆解

每一行的拆解，大体也是按照这个思路来进行，所以笔者在这里就不作讲解了。

4.2 组件封装

例如上面，笔者想对第四行的这种展现进行封装，以为从此的布局可能会用到，所以在这一步，能够先把这一起抽离出一个控件。利用Row的mainAxisAlignment以及Expanded来实现这种效果，具体的实现笔者再也不详细的描述了。

通过这一步，总体的规划设计图已经有了，各个组件也都有了，接下来的工做就是组装了。

4.3 具体布局

具体布局设计到一些细节的地方，例如间隔（Padding或者Container）、居左居右居中（Align）、点击事件（GestureDetector）以及圆角（ClipRRect）等一些特殊状况，基本上就是嵌套，一层一层去实现。

在实际布局中，笔者实际使用的是Scaffold，顶部的AppBar将阴影直接去掉便可实现效果，body部分则实现2-5行的内容。最外层套一个Column也能实现，本质上都没什么区别，运行效果图以下所示。

4.4 代码

代码Github地址

5. 后话

笔者建了一个flutter学习相关的项目，Github地址，里面包含了笔者写的关于flutter学习相关的一些文章，会按期更新，也会上传一些学习demo，欢迎你们关注。

6. 参考

1. Layout Widgets
2. Dealing with box constraints in Flutter
3. Flutter样式和布局控件简析(一)
4. widgets library
5. 在Flutter中构建布局