Flutter完整开发实战详解(7、深刻布局原理)

时间 2019-11-05

标签 flutter 完整开发实战详解深刻布局原理繁體版

原文原文链接

做为系列文章的第七篇，本篇主要在前文的基础上，再深刻了解 Widget 和布局中的一些常识性问题。git

前文：github

1、Dart语言和Flutter基础

2、快速开发实战篇

3、打包与填坑篇

4、 Redux、主题、国际化

5、深刻探索

6、深刻Widget原理

在第六篇中咱们知道了 Widget、Element、RenderObject 三者之间的关系，其中咱们最为熟知的 Widget ，做为“配置文件”的存在，在 Flutter 中它的功能都是比较单一的，属于 “颗粒度比较细的存在” ，写代码时就像拼乐高“积木”，那这“积木”究竟怎么拼的？下面就深刻去挖挖有意思的东西吧。(￣▽￣)markdown

1、单子元素布局

在 Flutter 单个子元素的布局 Widget 中，Container 无疑是被用的最普遍的，由于它在“功能”上并不会如 Padding 等 Widget 那样功能单一，这是为何呢？ide

究其缘由，从下图源码能够看出，Container 其实也只是把其余“单一”的 Widget 作了二次封装，而后经过配置来达到“多功能的效果”而已。布局

接着咱们先看 ConstrainedBox 源码，从下图源码能够看出，它是继承了 SingleChildRenderObjectWidget，关键是 override 了 createRenderObject 方法，返回了 RenderConstrainedBox 。post

这里体现了第六篇中的 Widget 与 RenderObject 的关系flex

是的，RenderConstrainedBox 就是继承自 RenderBox，从而实现RenderObject 的布局，这里咱们获得了它们的关系以下：ui

Widget	RenderObject
ConstrainedBox	RenderConstrainedBox

而后咱们继续对其余每一个 Widget 进行观察，能够看到它们也都是继承SingleChildRenderObjectWidget ，而“简单来讲”它们不一样的地方就是 RenderObject 的实现了：spa

Widget	RenderBox （RenderObject）
Align	RenderPositionedBox
Padding	RenderPadding
Transform	RenderTransform
Offstage	RenderOffstage

因此咱们能够总结：真正的布局和大小计算等行为，都是在 RenderBox 上去实现的。 不一样的 Widget 经过各自的 RenderBox 实现了“差别化”的布局效果。因此找每一个 Widget 的实现，找它的 RenderBox 实现就能够了。3d

这里咱们经过 Offstage 这个Widget 小结下，Offstage 这个 Widget 是经过 offstage 标志控制 child 是否显示的效果，一样的它也有一个 RenderOffstage ，以下图，经过 RenderOffstage 的源码咱们能够“真实”看到 offstage 标志位的做用：

因此大部分时候，咱们的 Widget 都是经过实现 RenderBox 实现布局的，那咱们可不可抛起 Widget 直接用 RenderBox呢？答案明显是能够的，若是你闲的🥚疼的话！

Flutter 官方为了治疗咱们“🥚疼”，提供了一个叫 CustomSingleChildLayout 的类，它抽象了一个叫 SingleChildLayoutDelegate 的对象，让你能够更方便的操做 RenderBox 来达到自定义的效果。

以下图三张源码所示，SingleChildLayoutDelegate 的对象提供如下接口，而且接口 前三个 是按照顺序被调用的，经过实现这个接口，你就能够轻松的控制RenderBox 的 布局位置、大小 等。

2、多子元素布局

事实上“多子元素布局”和单子元素相似，经过“触类旁通”咱们就能够知道它们的关系了，好比：

Row、Colum 都继承了 Flex，而 Flex 继承了MultiChildRenderObjectWidget 并经过 RenderFlex 建立了 RenderBox；
Stack 一样继承 MultiChildRenderObjectWidget 并经过 RenderStack 建立了 RenderBox；

Widget	RenderBox （RenderObject）
Row/Colum/Flex	RenderFlex
Stack	RenderStack
Flow	RenderFlow
Wrap	RenderWrap

一样“多子元素布局”也提供了 CustomMultiChildLayout 和 MultiChildLayoutDelegate 知足你的“🥚疼”需求。

3、多子元素滑动布局

滑动布局做为 “多子元素布局” 的另外一个分支，如 ListView 、GridView、Pageview ，它们在实现上要复杂的多，从下图一个的流程上咱们大体能够知道它们的关系：

由上图咱们能够知道，流程最终回产生两个 RenderObject ：

RenderSliver ：Base class for the render objects that implement scroll effects in viewports.
RenderViewport ：A render object that is bigger on the inside.

/// [RenderViewport] cannot contain [RenderBox] children directly. Instead, use
/// a [RenderSliverList], [RenderSliverFixedExtentList], [RenderSliverGrid], or
/// a [RenderSliverToBoxAdapter], for example.
复制代码

而且从 RenderViewport的说明咱们知道，RenderViewport内部是不能直接放置 RenderBox，须要经过 RenderSliver 你们族来完成布局。而从源码可知：RenderViewport 对应的 Widget Viewport 就是一个 MultiChildRenderObjectWidget。 （你看，又回到 MultiChildRenderObjectWidget 了吧。）

再稍微说下上图的流程：

ListView、Pageview、GridView 等都是经过 Scrollable 、 ViewPort、Sliver你们族实现的效果。这里简单不规范描述就是：一个“可滑动”的控件，嵌套了一个“视觉窗口”，而后内部经过“碎片”展现 children 。
不一样的是 PageView 没有继承 SrollView，而是直接经过 NotificationListener 和 ScrollNotification 嵌套实现。

注意 TabBarView 内部就是：NotificationListener + PageView

是否是以为少了什么？哈哈哈，有的有的，官方一样提供了解决“🥚疼”的自定义滑动 CustomScrollView ，它继承了 ScrollView，可经过 slivers 参数实现布局，这些 slivers 最终回经过 Scrollable 的 buildViewport 添加到 ViewPort 中，以下代码所示：

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('grid item $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('list item $index'),
          );
        },
      ),
    ),
  ],
)
复制代码