【Flutter布局控件】Align详细讲解_flutter align-优快云博客

本文链接：https://blog.youkuaiyun.com/Mod_J/article/details/108243342

本文详细介绍了Flutter中的Align布局控件，包括其子渲染对象的创建过程和RenderPositionedBox的实现原理。通过创建类A模拟Align，讨论了如何控制子组件的对齐方向。同时，分析了Align类的构造、渲染对象创建、布局计算和子组件偏移位置的确定过程，揭示了Flutter布局的内在逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果让你自己来实现仅包含一个子组件，并且提供了居中、左对齐、右对齐、底端对齐等可控制方向的布局容器组件，你该如何实现？

实现思路：

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