Flutter-DevFest2021.md · tanht/GSYFlutterBook

> hello 大家好，我是《Flutter开发实战详解》的作者郭树煜，看标题就知道今天我要给大家分享的是 Flutter 相关的主题，分享内容是也比较直接简单，就是关于 **Flutter 布局相关的知识点**。

相信大家可能都听说过或者用过 Flutter ，对这部分内容可能有一定了解，但是正如标题所示，本次的主题是带你了解不一样的 Flutter ，**或者说经常性被萌新忽略的东西** ，所以这次将通过不一样的角度，带你看看 Flutter 的尺寸布局有趣的地方。

## 一、开始之前

在聊 Flutter 的布局之前，*首先大家觉得 Flutter 是什么？*

**Flutter 其实主要是跨平台的 UI 框架，它核心能力是解决 UI 的跨平台**，和别的跨平台框架不一样的地方在于：**它在性能接近原生的同时，做到了控件和平台无关的实现**。

但如果大家用过 Flutter ，应该知道 Flutter 里的我们写的界面都是通过 `Widget` 完成，并且可能会看起来嵌套得很多层，为什么呢？

这里就要先简单说一下 Flutter 的一些基础信息，**在 Flutter 里有 `Widget` 、 `Element`、 `RenderObject` 、 `Layer` 等关键的核心设定**。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image1)

其中我们最常写的 **`Widget` 并不是真正的 View 实例**，它需要转化为对应的 `RenderObject ` 才能绘制，而 `Element` 是 `Widget` 和 `RenderObject` 关键的中间实例，我们日常 Flutter 开发里用到的 **`BuildContext` 就是 `Element` 的抽象对象**。

> 也就是大致 `Widget` -> `Element` -> `RenderObject` 这样的过程。

**所以在 Flutter 里 `Widget` 代码只是“配置文件”的作用，真正工作的实例是它内部对应的 `Element` 和 `RenderObject` 实体**。

这也是 `Widget` 为什么可以是不可变的原因，它可以在使用时的被频繁构建，因为它不是真正干活的，**`Widget` 承载的是 `RenderObject` 里绘制时需要的各种状态信息**。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image2)

这里举个简单例子，如图代码所示，我们定义了一个 text 的 Widget，然后分别在 4 个地方添加，并成功运行，如果是一个真正的 View ，是不可以同时在 4 个地方被加载。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image3)

通过这个例子可以看到 `Widget` 并不是真正干活的，而主要负责绘制和布局的逻辑都在 `RenderObject` 。 **因为布局和绘制的主要逻辑都在 `RenderObject` ，所以今天我们主要的内容也是在 `RenderObject`**。

在 Flutter 里 `RenderObject` 作为绘制和布局的实体，主要可以分为两大子类：`RenderBox` 和 `RenderSliver` ，其中 `RenderSliver` 主要是在可滑动列表这种场景中使用，所以本次我们主要讨论的是 `RenderBox` 这种布局场景。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image4)

## 二、Flutter 的布局

**一般情况 Flutter 里的大小布局是从上往下传递 `Constraints` ，从下往上返回 `Size` 这样的流程**。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image5)

简单理解这句话就是：父容器根据布局需要往下传递一个约束信息，而最子容器会根据自己的状态返回一个明确的大小，如果自己没有就继续往下的 child 递归。

> 更粗旷一些说就是：从上往下传递约束，传入的约束一般是有 `minHeight`、 `maxHeight` 、 `minWidth` 和 `maxWidth` 等等，但是从下往上返回的 size 时，就会是一个固定 `width` 和 `height` 尺寸。

而对于 Flutter ，**布局的逻辑主要在对应 `RenderObject` 的 `performLayout`**。

> 所以一般如果对于 `Widget` 的布局感兴趣或者有疑惑，就可以先找到这个 `Widget` 的 `RednerObject` ，看这个 `RednerObject` 的 `performLayout` 逻辑是怎么实现。

在 Flutter 最常用的就是应是 `Container` 了， `Container` 作为 Flutter 里最常用的抽象配置模版，它在宽高布局这一块用的是 `ConstrainedBox`，而不管是 `ConstrainedBox` 还是  `SizedBox`， 他们对应的 `RenderObject` 都是 `RenderConstrainedBox`。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image6)

**所以我们就以 `RenderConstrainedBox` 相关的例子来举例**，看看 `ConstrainedBox` 是如何大小布局。

### 2.1、ConstrainedBox 的约束布局

如下代码所示，可以看到 `ColoredBox` 没有指定大小，但是运行后 `ColoredBox` 得到的是一个 100 x 100 的红色正方形， 因为它的父级 `ConstrainedBox` 往下传递的是 100 x 100 大小的 `ConstrainedBox` 约束。

```dart
Scaffold(
  body: Center(
    child: ConstrainedBox(
      constraints: BoxConstraints(
          maxHeight: 100, minHeight: 100, maxWidth: 100, minWidth: 100),
      child: ColoredBox(
        color: Colors.red,
      ),
    ),
  ),
)
```

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image7)

那如果这时候，把 `min` 的宽高改为 10 会发生什么事？

可以看到此时 `ColoredBox` 的大小变成和 `min` 的宽高一样大，为什么呢？

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image8)

首先 `ColoredBox` 并没有实现自己的 `performLayout`，而是通过继承了 `RenderProxyBox` 默认的逻辑来实现，这种情况在 Flutter 里比较常见，可以看到默认 `RenderProxyBox` 下：

- **在没有 child 的时候，用的是 `constraints.smallest`** ，也就是传递下来约束的最小值宽高；
- 在有 child 的时候使用 child 的大小；

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image9)

所以我们知道了，当控件没有实现自定义的 `performLayout` 时，并且没有 child 时，它很可能就是跟着父级约束的 smallest 走。

继续测试，如果这时候给 `ColoredBox` 增加一个 80 的 child ，可以看到红色框变了，变成了 `ColoredBox` 的 child 的大小 80 而不是 smallest，因为这时候 `ColoredBox` 有了 child， 用的是 child 的大小。

```dart
Scaffold(
  body: Center(
    child: ConstrainedBox(
      constraints: BoxConstraints(
          maxHeight: 100, minHeight: 10, maxWidth: 100, minWidth: 10),
      child: ColoredBox(
        color: Colors.red,
        child: SizedBox(
          width: 80,
          height: 80,
        ),
      ),
    ),
  ),
)
```

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image10)

那如果我把 `ColoredBox`  的 child 修改为 150 的大小呢？

可以看到运行后红色方块还是 100 的大小，并没有变成 150。

```dart
 Scaffold(
  body: Center(
    child: ConstrainedBox(
      constraints: BoxConstraints(
          maxHeight: 100, minHeight: 10, maxWidth: 100, minWidth: 10),
      child: ColoredBox(
        color: Colors.red,
        child: SizedBox(
          width: 150,
          height: 150,
        ),
      ),
    ),
  ),
)
```

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image11)

这是为什么呢？

我们通过 Flutter 的调试工具看，可以看到我们虽然给 `SizedBox` 配置了 150 的参数，但是实际 `RenderConstrainedBox` 最终渲染时输出是 100 。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image12)

这里有两点：

- 第一就是 `Widget` 仅仅是作为配置信息，我们配置的宽高是 150 ，而实际 `RenderObject` 输出的是 100 ，所以我们写的并不是真实的 `View`， 真正的布局效果还是要看 `RenderObject` 的脸色；

-  从 `SizedBox` 的 `RenderConstrainedBox` 看， 它的 `performLayout` 的实现在没有 child时， 150 的大小会被 `enforce` 成 parent 的 100

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image13)

对应 `enforce` 内部是通过 `clamp` 这个 API 完成， `enforce` 执行效果等同于  `150.clamp(10, 100)`，所以会得到 100 的结果。

> `clamp` 便是如果数据时在区间内就返回该数值，否则返回离其最近的边界值。

**所以通过 enforce `RenderConstrainedBox` 不会超出父容器的大小。**

那么为了实验，我们接下来把 `SizeBox` 换成 `ConstrainedBox` ，并且调整为约束为 10 - 150  的大小。

```dart
Scaffold(
  body: Center(
    child: ConstrainedBox(
      constraints: BoxConstraints(
          maxHeight: 100, minHeight: 10, maxWidth: 100, minWidth: 10),
      child: ColoredBox(
        color: Colors.red,
        child: ConstrainedBox(
          constraints: BoxConstraints(
              maxHeight: 150, minHeight: 10, maxWidth: 150, minWidth: 10),
        ),
      ),
    ),
  ),
)
```

可以看到红色正方形又变成了 10 的大小，为什么呢？

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image14)

通过源码可以看到：

- 首先 `enforce` 执行是 `150.clamp(10, 100)` 和 `10.clamp(10, 100)` ，等到的自然就是 `10-100`；
- 之后再到 `constrain` 里 0.clamp(10, 100)，所以输出的是 10 这个最小值；

> 先前是 100.clamp(10, 100) 自然就是 100 的大小，而现在是 0.clamp(10, 100) ，自然就成了 10 。

从上面的例子，可以看到父布局约束影响 child 的大小的过程，甚至是变相局限住了 child 的大小返回，但是这都是在 `child.layout` 之后取得的大小。

**那如果想要在 child.layout 之前就获取到 child 的大小呢？也就是 child 布局之前就获取到 child 的大小？**

可以这样吗？当然可以！一般在官方的 RenderBox 都会有这四个方法：

- `computeMaxIntrinsicWidth`
- `computeMinIntrinsicWidth`
- `computeMaxIntrinsicHeight`
- `computeMinIntrinsicHeight`

为什么说一般呢？

因为你不写一般也不报错，并且这四个方法其实一般很少被调用，**官方对它的描述是开销昂贵**，并且我们调用时也不是直接调用它，而是通过对应的 get 方法：

- `getMaxIntrinsicWidth`
- `getMinIntrinsicWidth`
- `getMaxIntrinsicHeight`
- `getMinIntrinsicHeight`

在默认规范里，一般你只能 override `compute` 开头的 API 去实现需要的逻辑，然后调用只能通过 get 对应的方法去调用，最后会执行到 `compute` 开头的 API ，它们之间时一一对应的。

> 也就是通过 `getMinIntrinsicWidth` 来调用，比如：`child.getMinIntrinsicWidth` 最终调用到  `computeMinIntrinsicWidth`。

看到这里大家有没想过： **RenderBox 如何拿到 child ？child 如何从 Widget 变成 RenderObject?**

这里就是 Element 起到的作用，当 `Widget` 被加载时：

- 就会调用 `inflateWidget` 去创建它的 `Element`，然后通过 `mount` 用 `createRenderObject` 创建出它的 `RenderObject`；
- 之后再执行 `attachRenderObject `， 这时候这个 child 会通过  `_findAncestorRenderObjectElement` 去找到它的 parent ，也就是离他最近的一个 `RenderObjectElment`；
- 最后执行  parent  的 `insertRenderObjectChild` ，这时 child 就被插入进去 `RenderObject`，在 `RenderObject` 里就可以获取到 `Widget`；

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image15)

也就是 child 在 `Element` 里被加载后，创建出对应的 `RenderObject` ，并且找到自己的 parent 然后将自己加入进去。

> Flutter 既然有具备 `RenderObject` 的 `Element` ，那同样也就有没有  `RenderObject` 的 `Element` ，比如 `ComponentElement` ，也就是我们常用的  `StatelessWidget` 等。

**这里可以看到 Element 得连接作用**。

## 三、多个 Child 的布局

前面介绍了单个 Child 的布局，这里简单介绍下多个 Child 主要有什么不同。

其实多个 Child 和单个一样，都会是从上往下传递 `Constraints` ，从下往上返回 `Size` 这样的流程。

比如下图，这是我们前面看到的例子，这里使用了 `Column` 控件对多个 `Text` 进行布局。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image16)

而其实 `Column` 和 `Row` 都是 `Flex` 的子类，我们按照思路去看 `RenderFlex` 的实现，就可以看到，对于多个 Child 的布局主要有这么几个关键点：

- `MultiChildRenderObjectWidget`；
- `MultiChildRenderObjectElement`；
- `ParentData`；

`Widget` 和 `Element` 的逻辑我们这里暂时不深入展开，主要讲解不同的就是在 `RenderBox` 的 `ParentData`。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image17)

如上图所示，基本上所有 Multi Child 的实现都有自己特有的 `ParentData` ，并且他们还不是直接继承 `ParentData`， 而是继承他们的子类 `ContainterBoxParentData`。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image18)

如图所示，他们的作用就是：

- `BoxParentData` 具备 `Offset` 参数，是用来觉得 Child 在控件的位置；
- `ContainterBoxParentData` 带有两个 `Sibling` 参数，主要是 `RenderBox` 里访问 children 就是通过这个双链表的方式访问的；
- `FlexParentData` 就是当前 `RenderFlex` 布局所需的参数；

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image19)

可以看到这就是 `RenderFlex` 布局时关键的参数所在，我们添加的 children `Widget`，在经过 `Element` 加载后，在前面说过的 `insert` 步骤会从一个 `List<Widget>` 变成通过 `ParentData` 的两个 `Sibling` 参数连接在一起的双向链表，访问时就是通过它进行访问的。

**所以在 children 布局时，我们通过对应的 `ParentData` 子类返回 child，然后通过给 `ParentData` 配置 `Offset` 来决定 child 的位置**。

> 官方提供了更方便的自定义布局 `CustomMultiChildLayout` ，不需要你一步一步实现，比如常用的默认页面脚手架 `Scaffold` 就是用它实现。

## 四、有趣的知识点

既然聊到这个，我们在深入聊聊一些有趣的知识点，比如前面代码里的一直出现的 Scaffold ，这个是我们 Flutter 开发里最常用到的页面脚手架，也是一个页面布局的开始。

如果这时候把 `Scaffold` 给去掉，运行最初的代码，可以看到整个屏幕都红了，也即是 `ConstrainedBox` 铺满了整个屏幕。

```dart
MaterialApp(
  title: 'GSY Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: ConstrainedBox(
    constraints: BoxConstraints(
        maxHeight: 100, minHeight: 10, maxWidth: 100, minWidth: 10),
    child: ColoredBox(
      color: Colors.red,
    ),
  ),
);
```

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image20)

为什么呢？

我们通过 Flutter 的调试工具可以看到，此时上级给你的约束就是屏幕大小，没有区间，而 `enforce` 等于 `10.clamp(392.72, 392.72)`

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image21)

看到了没有，你没得选，`clamp(392.72, 392.72)` 也就是强行都变成了屏幕的宽度。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image22)

那如果这时候，我们加了一个 `Center` 控件呢？

可以看到约束大小又有了！

```dart
MaterialApp(
  title: 'GSY Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Center(
	  child:ConstrainedBox(
	    constraints: BoxConstraints(
	        maxHeight: 100, minHeight: 10, maxWidth: 100, minWidth: 10),
	    child: ColoredBox(
	      color: Colors.red,
	    ),
	  )
  ),
);
```

可以看到约束变成了 `0-392.72` 的约束，也就是 `10.clamp(0, 392.72)`

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image23)

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image24)

为什么呢？

因为 `Center` 的 `RenderObject` 是 `RenderPositionedBox` ，**它在布局的时候会有一个 `constraints.loosen()` 的操作**，这也是为什么你有时候加多一个 `Center` 布局就突然生效的原因，因为 `loosen` 就成了 0-392.72 的约束。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image25)

```dart
BoxConstraints loosen() {
  assert(debugAssertIsValid());
  return BoxConstraints(
    minWidth: 0.0,
    maxWidth: maxWidth,
    minHeight: 0.0,
    maxHeight: maxHeight,
  );
}
```

如果不加 `Center`，像之前用的 `Scaffold` 为什么也能让  `BoxConstraints` 生效呢？

> 因为会出现虽然位置不对，所以这里调成了 100 比较好看到。

```dart
Scaffold(
  body: ConstrainedBox(
    constraints: BoxConstraints(
        maxHeight: 100, minHeight: 100, maxWidth: 100, minWidth: 100),
    child: ColoredBox(
      color: Colors.red,
    ),
  ),
)
```

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image26)

这其实是因为 `Scaffold` 的实现是一个叫 `CustomMultiChildLayout` 的控件。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image27)

**`Scaffold` 内的 `CustomMultiChildLayout` 布局时，对 `body` 使用了一个叫 `_BodyBoxConstraints` 的 `Constraints` 子类，这个类默认下所有 min 都是 0**。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image28)

所以对于 body 下的 child 而言，都会有 0 的 min 约束信息存在。

> 所以 10.clamp(0, 392.72) 可以生效。

**那可能还会有人就疑惑， child 返回的 size 是在哪里使用？**

答案肯定是在 `paint` 的时候了使用，那这个 `Offset` 又是什么？

举个例子，我们看之前用过的 `Center` 里面，它会在 `paintChild` 的时候，会添加 `Offset` 信息，所以 child 就会在绘制的时候有偏移，从而绘制到准确的地方。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image29)

所以最终如下图所示，**`ColoredBox` 在绘制 Rect 时，通过 `Offset` （决定位置） 和 `Size`（决定大小），而至绘制出对应位置的红色方框**。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image30)

那如果我画的时候不遵循这个 `Offset` 呢？

这里我们可以通过一个简单的例子，直接用 `CustomPaint` 画一个 Demo。

```dart
new Container(
  height: 200,
  width: 200,
  color: Colors.greenAccent,
  child: CustomPaint(
    ///直接使用值做动画
    foregroundPainter: _AnimationPainter(animation1),
  ),
)
```

可以看到，虽然 CustomPaint 是在 200 x 200 的大小下，但是动画绘制的圆可以很直接的超出这个大小。

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image31)

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image32)

**所以可以看到 Flutter 本质是一块画板，通过各种 `Layer` 分层，在每个 `Layer` 上又根据约定好的 `Size` 和  `Offset` 绘制控件**。

> Layer 就是一群 `RenderObject` 的集合。

其实只要你拿到这个 `Layer` 上的 `Canvas` ，就可以会知道这个 `Layer` 上的任意位置，当然一般情况下为了正确布局绘制，还是要遵循这个规则的。

> 常见的每个 `Route` 就是一个独立的 `Layer` 。

### 总结

最后做个总结：

- `Widget` 只是配置文件，它不可变，每次改变都会重构，它并不是真正的 `View `；
- 布局逻辑主要在 `RenderBox` 子类的 `performLayout`，并且可以提前获取 `child.size` ；
- `Element` 的连接作用，`Widget` 被首次加载会创建 `Element` 和 `RenderObject` ，并连接到一起；
- 多 `child` 布局里是通过 `ContainerBoxParentData` 来访问多个 child；
- 约束布局时  `smallest`  和有没有 0 值（区间最小值）会影响约束的效果；
- 控件绘制时遵循对应的 `Size` 和 `Offset` ，也可以超出 `Size` 绘制，具体看所在 `Layer` 的 `Canvas` ；

![](http://img.cdn.guoshuyu.cn/20220328_Flutter-DevFest2021/image33)

tanht/GSYFlutterBook

简介

发行版

贡献者

近期动态

tanht/GSYFlutterBook .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

tanht/GSYFlutterBook