Flutter 详解（八、深入了解布局）

Widget、Element、RenderObject 三者之间的关系在<<六、深入了解绘制原理>>已经讲解过，其中我们最为熟知的 Widget ，究竟是通过什么样的方式来实现代码搭积木实现建造房子呢？

单子元素布局–SingleChildRenderObjectWidget

Container

Container是继承StatelessWidget,那么build是构建布局关键函数，在Container中build中，掺杂了很多其他的部件，Align、Padding、ColoredBox、DecorateBox、Transform…等等，每个关于布局或者样式的属性，最后都被转化成其他的box来呈现。看下官方源码：

@override
Widget build(BuildContext context) {
  Widget current = child;

  if (child == null && (constraints == null || !constraints.isTight)) {
    current = LimitedBox(
      maxWidth: 0.0,
      maxHeight: 0.0,
      child: ConstrainedBox(constraints: const BoxConstraints.expand()),
    );
  }
/// 封装 Align
  if (alignment != null)
    current = Align(alignment: alignment, child: current);

  final EdgeInsetsGeometry effectivePadding = _paddingIncludingDecoration;
  if (effectivePadding != null)
  /// 封装 Padding
    current = Padding(padding: effectivePadding, child: current);

  if (color != null)
    /// 封装 ColoredBox
    current = ColoredBox(color: color, child: current);
/// 封装DecoratedBox
  if (decoration != null)
    current = DecoratedBox(decoration: decoration, child: current);
/// 封装 DecoratedBox
  if (foregroundDecoration != null) {
    current = DecoratedBox(
      decoration: foregroundDecoration,
      position: DecorationPosition.foreground,
      child: current,
    );
  }
/// 封装 ConstrainedBox
  if (constraints != null)
    current = ConstrainedBox(constraints: constraints, child: current);
/// 封装 Padding
  if (margin != null)
    current = Padding(padding: margin, child: current);
/// 封装 Transform
  if (transform != null)
    current = Transform(transform: transform, child: current);
/// 封装 ClipPath
  if (clipBehavior != Clip.none) {
    current = ClipPath(
      clipper: _DecorationClipper(
        textDirection: Directionality.of(context),
        decoration: decoration
      ),
      clipBehavior: clipBehavior,
      child: current,
    );
  }
  return current;
}

Padding/Transform/ConstraineBox...都是继承SingleChildRenderObjectWidget,通过SingleChildRenderObjectWidget实现的布局。

Padding通过创建渲染实例RenderPadding,在更新实例的时候，更新该实例的属性。Align通过创建RenderPositionedBox来实现渲染实例，其他的如下表所示：

部件	渲染对象
Padding	RenderPadding
Align	RenderPositionedBox
ColoredBox	_RenderColoredBox
DecoratedBox	RenderDecoratedBox
ConstrainedBox	RenderConstrainedBox
Transform	RenderTransform
ClipPath	RenderClipPath

…

他们有一个共同点都是继承SingleChildRenderObjectWidget,而createRenderObject返回了不同的渲染对象RenderBox,RenderBox最终实现位置偏移和大小，都是通过RenderBox来实现的，所以找每个组件的RenderBox的实现就可以看到他们是怎么布局的。

Padding是一个继承RenderPadding，RenderPadding继承了RenderShiftedBox,RenderShiftedBox继承了RenderBox，那么我们就拿Padding举例子讲解下。

在RenderShiftedBox实现了获取组件的宽度和高度，子组件为空，则返回0.0,这里实现了computeMinIntrinsicWidth、computeMaxIntrinsicWidth、computeMinIntrinsicHeight、computeMaxIntrinsicHeight和最终绘画函数paint(PaintingContext context, Offset offset),把UI绘画出来。

abstract class RenderShiftedBox extends RenderBox with RenderObjectWithChildMixin<RenderBox> {
  /// Initializes the [child] property for subclasses.
  RenderShiftedBox(RenderBox child) {
    this.child = child;
  }

  @override
  double computeMinIntrinsicWidth(double height) {
    if (child != null)
      return child.getMinIntrinsicWidth(height);
    return 0.0;
  }

  @override
  double computeMaxIntrinsicWidth(double height) {
    if (child != null)
      return child.getMaxIntrinsicWidth(height);
    return 0.0;
  }

  @override
  double computeMinIntrinsicHeight(double width) {
    if (child != null)
      return child.getMinIntrinsicHeight(width);
    return 0.0;
  }

  @override
  double computeMaxIntrinsicHeight(double width) {
    if (child != null)
      return child.getMaxIntrinsicHeight(width);
    return 0.0;
  }

  @override
  double computeDistanceToActualBaseline(TextBaseline baseline) {
    double result;
    if (child != null) {
      assert(!debugNeedsLayout);
      result = child.getDistanceToActualBaseline(baseline);
      final BoxParentData childParentData = child.parentData as BoxParentData;
      if (result != null)
        result += childParentData.offset.dy;
    } else {
      result = super.computeDistanceToActualBaseline(baseline);
    }
    return result;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    if (child != null) {
      final BoxParentData childParentData = child.parentData as BoxParentData;
      context.paintChild(child, childParentData.offset + offset);
    }
  }

  @override
  bool hitTestChildren(BoxHitTestResult result, { Offset position }) {
    if (child != null) {
      final BoxParentData childParentData = child.parentData as BoxParentData;
      return result.addWithPaintOffset(
        offset: childParentData.offset,
        position: position,
        hitTest: (BoxHitTestResult result, Offset transformed) {
          assert(transformed == position - childParentData.offset);
          return child.hitTest(result, position: transformed);
        },
      );
    }
    return false;
  }

}

我们通过Padding来看下源码如何实现布局的：

  @override
  double computeMinIntrinsicWidth(double height) {
    _resolve();
    final double totalHorizontalPadding = _resolvedPadding.left + _resolvedPadding.right;
    final double totalVerticalPadding = _resolvedPadding.top + _resolvedPadding.bottom;
    if (child != null) // next line relies on double.infinity absorption
      return child.getMinIntrinsicWidth(math.max(0.0, height - totalVerticalPadding)) + totalHorizontalPadding;
    return totalHorizontalPadding;
  }

这里通过getMinIntrinsicWidth()来获取最小宽度。

@override
double computeMaxIntrinsicWidth(double height) {
_resolve();
final double totalHorizontalPadding = _resolvedPadding.left + _resolvedPadding.right;
final double totalVerticalPadding = _resolvedPadding.top + _resolvedPadding.bottom;
if (child != null) // next line relies on double.infinity absorption
  return child.getMaxIntrinsicWidth(math.max(0.0, height - totalVerticalPadding)) + totalHorizontalPadding;
return totalHorizontalPadding;
}

通过getMaxIntrinsicWidth获获得最大宽度,通过computeMaxIntrinsicHeight获取最大高度，通过computeMinIntrinsicHeight最小高度，当高度和宽度都计算了之后，然后进行布局。

那么作为开发者可以自己通过RenderBox来实现一个新的布局组件吗？**当然是可以的，只要你觉得有必要的话。**否则官方提供的布局组件足够满足我们的使用了。

其实官方已提供一个抽象接口SingleChildLayoutDelegate，让开发者自己实现一个布局。

abstract class SingleChildLayoutDelegate {
 
/// 监听
 final Listenable _relayout;
  /// 获取大小
 Size getSize(BoxConstraints constraints) => constraints.biggest;
/// 获取子部件的约束
 BoxConstraints getConstraintsForChild(BoxConstraints constraints) => constraints;
/// 获取子部件的位置
 Offset getPositionForChild(Size size, Size childSize) => Offset.zero;

/// 是否需要更新
 bool shouldRelayout(covariant SingleChildLayoutDelegate oldDelegate);
}

多子元素 MultiChildRenderObjectWidget

多子元素和单子元素基本一致，多子元素的Row、Column继承了Flex，Flex继承了MultiChildRenderObjectWidget,MultiChildRenderObjectWidget中的RenderFlex是继承了RenderBox来实现的布局样式。

widget	RenderBox
Column/Row/Flex	RenderFlex
Stack	RenderStack
Flow	RenderFlow
Wrap	RenderWrap

同样的 多子元素也提供了供开发者自己实现布局的抽象接口CustomMultiChildLayout和MultiChildLayoutDelegate.

滑动 多子布局

作为多子布局的另外一个分支如各种ListView、GridView、Pageview他们在实现过程很复杂，从下面的一个流程我们可以大致了解他们的关系。

由上图我们可以知道，流程最终回产生两个 RenderObject ：

并且从 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'),
          );
        },
      ),
    ),
  ],
)

文章汇总

Dart 异步与多线程

Flutter 详解（一、深入了解状态管理–ScopeModel

Flutter 详解(二、深入了解状态管理–Redux)

Flutter 详解（三、深入了解状态管理–Provider)

Flutter 详解（四、深入了解状态管理–BLoC)

Flutter 详解 (五、深入了解–Key)

Flutter 详解 （六、深入了解–Stream

Flutter 详解（七、深入了解绘制原理

Flutter 详解（八、深入了解布局）