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来实现的布局样式。

部件	渲染对象
Column、Row、Flex	RenderFlex
Stack	RenderStack
Flow	RenderFlow
Wrap	RenderWrap

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

滑动 多子布局

滑动布局也是多子布局的一种，如各种ListView、GridView、Customview他们在实现过程很复杂，从下面的一个流程我们可以大致了解他们的关系。

由上图我们可以知道，最终会产生两个渲染对象RenderObject ：

并且从 RenderViewport的说明我们了解到，RenderViewport内部是不能直接放置 RenderBox，需要通过 RenderSliver让大家族来完成布局。而从源码可以了解到：RenderViewport 对应的 Widget Viewport 就是一个 MultiChildRenderObjectWidget。

再稍微说下上图的流程：

ListView、Pageview、GridView 等都是通过 Scrollable 、 ViewPort、Sliver大家族实现的效果。这里简单总结下就是：一个“可滑动”的控件，嵌套了一个“视觉窗口”，然后内部通过“碎片”展示 children 。 不同的是 PageView 没有继承 SrollView，而是直接通过 NotificationListener 和 ScrollNotification 嵌套实现。

官方同样提供的自定义滑动 CustomScrollView ，它继承了 ScrollView，可通过 slivers 参数实现子控件布局， slivers 是通过 Scrollable 的 buildViewport 添加到 ViewPort 中，如下代码所示：

CustomScrollView(
    slivers: <Widget>[
      SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return Text('$index');
        }, childCount: 10),
      ),
      SliverGrid(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
        ),
        delegate: SliverChildBuilderDelegate((context, index) {
          return Text('$index');
        }, childCount: 12),
      )
    ],
  )

推荐文章

Dart 异步与多线程

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

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

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

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

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

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

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

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

项目推荐

• 一个很酷炫的加载动画库
• Flutter100多个组件的使用例子
• Flutter 入门到进阶 电子书

公众号