Flutter 嵌套地狱？不存在的，ConstraintLayout 来解救！（一）

从 Android 转向 Flutter 后，受不了没有 ConstraintLayout 的日子，更反感嵌套地狱，网上的优化方法都治标不治本。于是继 2016 年开源 MagicIndicator（9100+ star） 以后，我只能再次发力了。

点击阅读原文进入 GitHub 主页。

Flutter ConstraintLayout

一个超级强大的 Stack，使用约束构建极为灵活的布局，和 Android 下的 ConstraintLayout 和 iOS 下的 AutoLayout 类似。但代码实现却高效得多，它具有 O(n) 的布局时间复杂度，无需线性方程求解。

它是一个布局，也是一个更现代化的通用布局框架。

大幅提高 Flutter 的开发体验和效率，并提升应用性能

不管布局有多复杂，约束有多深，它始终有媲美单一 Flex 或 Stack 的性能，在面对复杂的布局时，它能提供更好的性能，更大的灵活性，更少的代码，以及非常扁平的代码层次结构，大大提升代码的可维护性。对”嵌套地狱“说不。

总之一句话，用了就回不去了。

改善”嵌套地狱“是我开发 Flutter ConstraintLayout 的初衷之一，但我不推崇极致地追求一层嵌套，这是不必要的。因此像链这种特性，Flex 本身已经很好的支持了，因此 ConstraintLayout 不会积极支持它。

查看 Flutter Web 在线示例

Flutter ConstraintLayout 有极高的布局性能。它不基于 Cassowary 算法，无需线性方程求解。 任何时候，每一个子元素都只会被 layout 一次，当自身的宽或高被设置为 wrapContent 时，部分子元素可能会计算两次 offset。约束布局的布局过程包含以下三个步骤：

1. 约束计算
2. 布局
3. 绘制
其中布局和绘制的性能几乎与单一 Flex 或 Stack 相当，约束计算的性能大致为 0.01 毫秒（一般复杂度的布局，20 个子元素）。只有在约束变化后才会重新计算约束。

约束布局自身可以被任意嵌套而不带来性能问题，渲染树中的每个子元素都只会被 layout 一次，时间复杂度为 O(n)，而不是 O(2n) 或更糟糕的复杂度。

更小的 Widget 树带来了更少的 build 耗时和更小的 Element 树。非常扁平的布局结构带来了更小的 RenderObject 树和更少的渲染耗时。大多数人容易忽略的事情是复杂嵌套导致 build 耗时有时甚至超过渲染耗时。

推荐在顶层使用 ConstraintLayout。对于极端复杂的布局（1000 个子元素，2000 个约束），非首帧布局和绘制的总耗时在 5 毫秒内（在 Windows 10 调试模式下，发布模式耗时更少），理论上首帧优势会更明显。对于常规复杂布局（50 个子元素，100 个约束），帧率可轻松达到 200 fps。

如非必要，尽量相对于 parent 布局，这样可以定义更少的 id，或者使用相对 id。

警告: 为了布局性能的考虑，约束总是单向的，不允许存在两个子元素相互约束对方（比如 A 的右边约束在 B 的左边，而 B 的左边又反过来约束在 A 的右边）。每一个约束都应该确切地描述子元素是如何定位的。尽管约束只能单向，但你仍然能更好的处理以前双向约束才能做到的事情，比如链（暂时还未支持，请结合 Flex 使用）。

特性

1. 基本约束
1. toTop
2. toCenter(默认偏移量为 0.5，代表中心)
3. toBaseline
4. toBottom
1. toTop
2. toCenter(默认偏移量为 0.5，代表中心)
3. toBottom
1. toTop
2. toCenter(默认偏移量为 0.5，代表中心)
3. toBottom
1. toLeft
2. toCenter(默认偏移量为 0.5，代表中心)
3. toRight
1. toLeft
2. toCenter(默认偏移量为 0.5，代表中心)
3. toRight
1. left
2. right
3. top
4. bottom
5. baseline
2. margin and goneMargin（当依赖的元素的可见性为 gone 或者其某一边的实际大小为 0 时，goneMargin 就会生效，否则 margin 会生效，即便其自身的可见性为 gone）
3. clickPadding（ 快速扩大子元素的点击区域而无需改变子元素的实际大小。这意味着你可以完全遵照视觉稿来布局，而不用为了考虑点击区域而做额外的事情，这会提升一定的开发效率。这也意味着子元素之间可以在不增加嵌套的情况下共享点击区域，有时可能需要结合 e-index 使用）
4. 可见性控制
1. visible
2. invisible
3. gone（有时更好的做法是使用条件表达式来避免创建子元素，使用 gone 的好处是可以保留状态）
5. 完善的约束缺失、非法、冗余提示
6. 偏移（当同时设置了上下或左右约束时，可以使用 horizontalBias 和 verticalBias 来调整偏移。默认值是 0.5，代表居中）
7. z-index（绘制顺序，默认是子元素的顺序）
8. 平移、旋转
9. 百分比布局（当大小被设置为 matchConstraint 时，就会启用百分比布局，默认的百分比是 1（100%）。相关的属性是 widthPercent，heightPercent，widthPercentageAnchor，heightPercentageAnchor）
10. 引导线
11. 约束和 Widget 分离
12. 栅栏
13. 比例布局
1. widthHeightRatio: 1 / 3,
2. ratioBaseOnWidth: true, （默认值是 null，代表自动推断，未确定边的大小会根据确定边的大小和 widthHeightRatio 计算出来。未确定边的大小必须设置为 matchConstraint，确定边的大小可以为 matchParent，固定大小（>=0），matchConstraint）
14. 相对 id（这是为懒癌患者设计的，因为命名是个麻烦事。如果已经为子元素定义了 id，则不能再使用相对 id 来引用他们）
1. rId(3) 代表第三个子元素，以此类推
2. sId(-1) 代表上一个兄弟元素，以此类推
3. sId(1) 代表下一个兄弟元素，以此类推
15. 包装约束，是对基本约束的封装，便于使用，最终会转化成基本约束
1. topLeftTo
2. topCenterTo
3. topRightTo
4. centerLeftTo
5. centerTo
6. centerRightTo
7. bottomLeftTo
8. bottomCenterTo
9. bottomRightTo
10. centerHorizontalTo
11. centerVerticalTo
12. outTopLeftTo
13. outTopCenterTo
14. outTopRightTo
15. outCenterLeftTo
16. outCenterRightTo
17. outBottomLeftTo
18. outBottomCenterTo
19. outBottomRightTo
20. centerTopLeftTo
21. centerTopCenterTo
22. centerTopRightTo
23. centerCenterLeftTo
24. centerCenterRightTo
25. centerBottomLeftTo
26. centerBottomCenterTo
27. centerBottomRightTo
16. 瀑布流、网格、列表（列表是一个特殊的瀑布流，网格也是一个特殊的瀑布流）
17. 圆形定位
18. 图钉定位
19. 随意定位
20. e-index（事件分发顺序，默认是 z-index，一般用来处理点击区域）
21. 子元素的大小可以被设置为：
1. 固定大小（>=0）
2. matchParent
3. wrapContent（默认值，支持最大、最小设置）
4. matchConstraint
22. 自身的大小可以被设置为：
1. 固定大小（>=0）
2. matchParent（default）
3. wrapContent（暂不支持最大、最小设置）
23. 布局调试
1. showHelperWidgets
2. showClickArea
3. showZIndex
4. showChildDepth
5. debugPrintConstraints
6. showLayoutPerformanceOverlay
后续开发计划:

1. 链
2. 约束可视化
3. 提供可视化编辑器，通过拖拽创建布局
4. 更多...
支持的平台:

1. Android
2. iOS
3. Mac
4. Windows
5. Linux
6. Web

导入

支持空安全

dependencies:
  flutter_constraintlayout:
    git:
      url: 'https://github.com/hackware1993/Flutter-ConstraintLayout.git'
      ref: 'v1.5.1-stable'

dependencies:
  flutter_constraintlayout: ^1.5.1-stable

import 'package:flutter_constraintlayout/flutter_constraintlayout.dart';

示例 Flutter Web Online Example
 effect.gif

class SummaryExampleState extends State<SummaryExample> {
  double x = 0;
  double y = 0;

  ConstraintId box0 = ConstraintId('box0');
  ConstraintId box1 = ConstraintId('box1');
  ConstraintId box2 = ConstraintId('box2');
  ConstraintId box3 = ConstraintId('box3');
  ConstraintId box4 = ConstraintId('box4');
  ConstraintId box5 = ConstraintId('box5');
  ConstraintId box6 = ConstraintId('box6');
  ConstraintId box7 = ConstraintId('box7');
  ConstraintId box8 = ConstraintId('box8');
  ConstraintId box9 = ConstraintId('box9');
  ConstraintId box10 = ConstraintId('box10');
  ConstraintId box11 = ConstraintId('box11');
  ConstraintId barrier = ConstraintId('barrier');

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const CustomAppBar(
        title: 'Summary',
        codePath: 'example/summary.dart',
      ),
      backgroundColor: Colors.black,
      body: ConstraintLayout(
        // Constraints can be separated from widgets
        childConstraints: [
          Constraint(
            id: box0,
            size: 200,
            bottomLeftTo: parent,
            zIndex: 20,
          )
        ],
        children: [
          Container(
            color: Colors.redAccent,
            alignment: Alignment.center,
            child: const Text('box0'),
          ).applyConstraintId(
            id: box0, // Constraints can be separated from widgets
          ),
          Container(
            color: Colors.redAccent,
            alignment: Alignment.center,
            child: const Text('box1'),
          ).apply(
            constraint: Constraint(
              // Constraints set with widgets
              id: box1,
              width: 200,
              height: 100,
              topRightTo: parent,
            ),
          ),
          Container(
            color: Colors.blue,
            alignment: Alignment.center,
            child: const Text('box2'),
          ).applyConstraint(
            // Constraints set with widgets easy way
            id: box2,
            size: matchConstraint,
            centerHorizontalTo: box3,
            top: box3.bottom,
            bottom: parent.bottom,
          ),
          Container(
            color: Colors.orange,
            width: 200,
            height: 150,
            alignment: Alignment.center,
            child: const Text('box3'),
          ).applyConstraint(
            id: box3,
            right: box1.left,
            top: box1.bottom,
          ),
          Container(
            color: Colors.redAccent,
            alignment: Alignment.center,
            child: const Text('box4'),
          ).applyConstraint(
            id: box4,
            size: 50,
            bottomRightTo: parent,
          ),
          GestureDetector(
            child: Container(
              color: Colors.pink,
              alignment: Alignment.center,
              child: const Text('box5 draggable'),
            ),
            onPanUpdate: (details) {
              setState(() {
                x += details.delta.dx;
                y += details.delta.dy;
              });
            },
          ).applyConstraint(
            id: box5,
            width: 120,
            height: 100,
            centerTo: parent,
            zIndex: 100,
            translate: Offset(x, y),
            translateConstraint: true,
          ),
          Container(
            color: Colors.lightGreen,
            alignment: Alignment.center,
            child: const Text('box6'),
          ).applyConstraint(
            id: box6,
            size: 120,
            centerVerticalTo: box2,
            verticalBias: 0.8,
            left: box3.right,
            right: parent.right,
          ),
          Container(
            color: Colors.lightGreen,
            alignment: Alignment.center,
            child: const Text('box7'),
          ).applyConstraint(
            id: box7,
            size: matchConstraint,
            left: parent.left,
            right: box3.left,
            centerVerticalTo: parent,
            margin: const EdgeInsets.all(50),
          ),
          Container(
            color: Colors.cyan,
            alignment: Alignment.center,
            child: const Text('child[7] pinned to the top right'),
          ).applyConstraint(
            width: 200,
            height: 100,
            left: box5.right,
            bottom: box5.top,
          ),
          const Text(
            'box9 baseline to box7',
            style: TextStyle(
              color: Colors.white,
            ),
          ).applyConstraint(
            id: box9,
            baseline: box7.baseline,
            left: box7.left,
          ),
          Container(
            color: Colors.yellow,
            alignment: Alignment.bottomCenter,
            child: const Text(
                'percentage layout\nwidth: 50% of parent\nheight: 30% of parent'),
          ).applyConstraint(
            size: matchConstraint,
            widthPercent: 0.5,
            heightPercent: 0.3,
            horizontalBias: 0,
            verticalBias: 0,
            centerTo: parent,
          ),
          Barrier(
            id: barrier,
            direction: BarrierDirection.left,
            referencedIds: [box6, box5],
          ),
          Container(
            color: const Color(0xFFFFD500),
            alignment: Alignment.center,
            child: const Text('align to barrier'),
          ).applyConstraint(
            width: 100,
            height: 200,
            top: box5.top,
            right: barrier.left,
          )
        ],
      ),
    );
  }
}

文章转自公众号：FlutterFirst