如果让你自己来实现仅包含一个子组件,并且提供了居中、左对齐、右对齐、底端对齐等可控制方向的布局容器组件,你该如何实现?
实现思路:
1.创建一个对外暴露的容器类,比如命名为类A。因为类A需要控制子组件的对齐方向,也就需要传递一个偏移值给子组件,让子组件明确自己在父容器中的位置。至于这个偏移值的计算,可通过外部传参来控制实现,比如:leftTop、rightBottom、center等等常量来控制。
2.类A应该实现RenderObjectWidget类,该类具备创建渲染对象的特性,渲染对象RenderObject具备布局和绘制的功能,类A的主要逻辑应该是实现布局这一块。至于绘制的逻辑,只要让子组件(在类A计算子组件偏移位置后)在画布上偏移具体位置进行绘制即可。
而以上的实现思路大致和Flutter的Align控件的实现思路一致。
1.Flutter的布局控件Align之子渲染对象的创建过程
class Align extends SingleChildRenderObjectWidget {
const Align({
Key key,
this.alignment = Alignment.center,
this.widthFactor,
this.heightFactor,
Widget child,
}) : super(key: key, child: child);
final AlignmentGeometry alignment;
final double widthFactor;
final double heightFactor;
@override
RenderPositionedBox createRenderObject(BuildContext context) {
return RenderPositionedBox(
alignment: alignment,
widthFactor: widthFactor,
heightFactor: heightFactor,
textDirection: Directionality.of(context),
);
}
@override
void updateRenderObject(BuildContext context, RenderPositionedBox renderObject) {
renderObject
..alignment = alignment
..widthFactor = widthFactor
..heightFactor = heightFactor
..textDirection = Directionality.of(context);
}
}
上面是Align类的具体代码逻辑,Align类是对外开放的配置类,外部使用者可通过alignment、widthFactor、heightFactor三个属性来配置子组件的对齐方向和其自身的大小。可以看到Align类继承自SingleChildRenderObjectWidget类,该类由名称可知为仅存在一个子渲染对象组件的widget。SingleChildRenderObjectWidget类对应的元素为SingleChildRenderObjectElement,下面来分析一下它们的源码:
abstract class SingleChildRenderObjectWidget extends RenderObjectWidget {
const SingleChildRenderObjectWidget({ Key key, this.child }) : super(key: key);
final Widget child;
@override
SingleChildRenderObjectElement createElement() => SingleChildRenderObjectElement(this);
}
SingleChildRenderObjectWidget类继承自RenderObjectWidget,所以Align是具备渲染特性的,该类很简单,其只创建了其对应的元素对象SingleChildRenderObjectElement:
class SingleChildRenderObjectElement extends RenderObjectElement {
SingleChildRenderObjectElement(SingleChildRenderObjectWidget widget) : super(widget);
@overrid