自定义Widget

2020-07-18

前面讲了很多理论知识，现在我们可以开始实战，去自定义一个自己的Widget。

自定义Widget布局肯定需要三个部分：Widget、Element和RenderObject，而核心在于自定义RenderObject。对于单child来说我们可以继承SingleChildRenderObjectWidget实现，多child Widget一般通过继承MultiChildRenderObjectWidget和RenderBox实现，而MultiChildRenderObjectElement默认不需要自定义，它会负责将MultiChildRenderObjectWidget和RenderBox进行关联。

在flutter提供的组件中，常见的 SingleChildRenderObjectWidget 有 Clip、Opacity、Padding、Align等。

class MySingleChildWidget extends SingleChildRenderObjectWidget {
  final Widget child;
  MySingleChildWidget({this.child}): super(child: child);
  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderMySingleChildWidget();
  }
}

自定义单child Widget时，需要继承SingleChildRenderObjectWidget并实现createRenderObject方法，SingleChildRenderObjectWidget实现了默认的 createElement方法，所以一般情况下不需要我们自定义。

class RenderMySingleChildWidget extends RenderBox with RenderObjectWithChildMixin<RenderBox> {
  @override
  void paint(PaintingContext context, Offset offset) {
    if (child == null) {
      Paint _paint = Paint();
      var canvas = context.canvas;
      Rect rect = Rect.fromCenter(center: Offset(100, 100), width: 100, height: 100);
      _paint.color = Colors.red;
      canvas.drawRect(rect, _paint);
    } else {
      context.paintChild(child, offset);
    }
  }

  @override
  void performLayout() {
    final BoxConstraints constraints = this.constraints;
    if (child == null) {
      size = constraints.biggest;
      return;
    }

    child.layout(constraints, parentUsesSize: true);
    final BoxParentData childParentData = child.parentData as BoxParentData;
    size = child.size;
    childParentData.offset = Offset(0, 0);
  }
}

上面是我们自定义的renderObject，主要是职责是计算出空间自身最大、最小宽高，通过 performLayout 结合得到child大小返回Size，最后通过paint绘制。
RenderObjectWithChildMixin是flutter提供的mixin，给只有一个child的RenderObject使用，提供child属性以及一些child的相关操作。
在上面代码中，如果有child，我们就直接paintchild(context.paintChild)，否则我们就自己画一个矩形。所有绘画的逻辑都在paint中。
performLayout负责child的布局，通过size属性的设置大小，对parentData.offset的设置来控制child的位置。由此可看出，parent的size会根据child的size来计算，而child的位置完全由parent决定，并且parent会将constriain传递给child，由此child决定自己的size。

多child Widget自定义需要继承MultiChildRenderObjectWidget，比如我们常用的Row，它的RenderFlex在布局时需要计算各个child的大小并排布，之后决定自身的宽高是充满parent还是根据child进行调整。

在使用MultiChildRenderObjectWidget时，有几个关键的辅助类

ContainerRenderObjectMixin

是一个mixin类，主要作用是维护和提供一个双链表的children，通过在RenderBox里混入ContainerRenderObjectMixin，就可以得到一个双链表额children，方便在布局时可以正向或反向获取和管理children。

RenderBoxContainerDefaultsMixin

对上述ContainerRenderObjectMixin进行拓展，对ContainerRenderObjectMixin内的children提供常用的默认行为和管理

// 返回第一个child的基线，与child位置顺序有关
double defaultComputeDistanceToFirstActualBaseline(TextBaseline baseline)
// 返回所有child中最小的基线
double defaultComputeDistanceToHighestActualBaseline(TextBaseline baseline)
// 触摸碰撞测试
bool defaultHitTestChildren(BoxHitTestResult result, { Offset position })
// 默认绘制方法
void defaultPaint(PaintingContext context, Offset offset)
// 以数组方式返回child链表
List<ChildType> getChildrenAsList()

ContainerBoxParentData

BoxParentData的子类，主要关联了上述RenderBoxContainerDefaultsMixin和BoxParentData，一起提供RenderBox需要的BoxParentData。

实现自定义布局的主要流程为：

1 自定义自己的ParentData继承ContainerBoxParentData

class MyParentData extends ContainerBoxParentData<RenderBox> {
  double width;
  double height;
}

2 继承RenderBox，同时混入ContainerRenderObjectMixin、RenderBoxContainerDefaultsMixin

class RenderMyMultiChildWidget extends RenderBox with ContainerRenderObjectMixin<RenderBox, MyParentData>, RenderBoxContainerDefaultsMixin<RenderBox, MyParentData> {

RenderMyMultiChildWidget({
  List<RenderBox> children,
}) {
  addAll(children);
}


}

3 继承MultiChildRenderObjectWidget，实现createRenderObject和updateRenderObject方法，关联我们自定义的RenderBox和更新状态信息

class MyMultiChildWidget extends MultiChildRenderObjectWidget {
  final List<Widget> children;
  MyMultiChildWidget({this.children}): super(children: children);
  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderMyMultiChildWidget();
  }
}

4 override RenderBox的performLayout和setupParentData等方法，实现自定义布局。

@override
void setupParentData(RenderObject child) {
  if (child.parentData is! MyParentData) {
    child.parentData = MyParentData();
  }
}

@override
void performLayout() {
  // 没有child不计算
  if (childCount == 0) {
    size = constraints.smallest;
  }

  // 第一个child
  RenderBox child = firstChild;

  // 遍历child
  while(child != null) {
    // 提出parentData
    MyParentData childParentData = child.parentData;

    child.layout(BoxConstraints(
      maxHeight: double.infinity,
      maxWidth: double.infinity
    ), parentUsesSize: true);
    // layout之后才可以得到child的size
    Size childSize = child.size;
    // 记录数据
    childParentData.width = childSize.width;
    childParentData.height = childSize.height;

    child = childParentData.nextSibling;
  }

  child = firstChild;
  double height = 0;
  // 根据child高度计算位置
  while(child != null) {
    MyParentData childParentData = child.parentData;
    // childParentData的offset决定child的位置
    childParentData.offset = Offset(0, height);
    height += child.size.height + 10;
    child = childParentData.nextSibling;
  }

  size = constraints.biggest;
}

@override
void paint(PaintingContext context, Offset offset) {
  defaultPaint(context, offset);
}

上面代码的关键就在于怎么设置child.parentData的offset来控制位置。

这就是自定义一个Widget的基本流程。

向.

自定义Widget

单child Widget自定义

多child Widget自定义

实现一个自定义Widget