Align

一、解读

// Align 继承于 SingleChildRenderObjectWidget
class Align extends SingleChildRenderObjectWidget {
  // 创建对其小部件
  const Align({
    Key? key, 
    this.alignment = Alignment.center, // 默认参数，子组件在父组件中间
    this.widthFactor,
    this.heightFactor,
    Widget? child,
  }) : assert(alignment != null),// alignment 参数不能为空
       assert(widthFactor == null || widthFactor >= 0.0), // 子组件的宽度因子，可为空；如果不为空必须大于等于零。
       assert(heightFactor == null || heightFactor >= 0.0),
       super(key: key, child: child);

  /// 该参数是设置如何对其子组件
  final AlignmentGeometry alignment;

  ///  当前组件的宽度和子组件的宽度比的因子
  /// 
  /// 注意: 该因子不能为负数
  final double? widthFactor;

  /// 当前组件的高度和子组件的高度比的因子
  ///
  /// 注意: 该因子不能为负数
  final double? heightFactor;
  
  // 重写了 SingleChildRenderObjectWidget 的父组件 RenderObjectWidget 的 createRenderObject 方法
  @override
  RenderPositionedBox createRenderObject(BuildContext context) {
    // 返回一个对子组件定位的组件
    return RenderPositionedBox(
      alignment: alignment, //  位置
      widthFactor: widthFactor, // 宽度因子
      heightFactor: heightFactor, // 高度因子
      textDirection: Directionality.maybeOf(context), // 获取文字的方向
    );
  }

  // 重写了 SingleChildRenderObjectWidget 的父组件 RenderObjectWidget 的 updateRenderObject 方法
  @override
  void updateRenderObject(BuildContext context, RenderPositionedBox renderObject) {
    //  直接更新赋值
    renderObject
      ..alignment = alignment
      ..widthFactor = widthFactor
      ..heightFactor = heightFactor
      ..textDirection = Directionality.maybeOf(context);
  }
  
  // 调试填充属性
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    // 先调用父类的属性填充
    super.debugFillProperties(properties); 
    // 第一个参数是要填充属性的名字；第二个参数是填充属性的值
    properties.add(DiagnosticsProperty<AlignmentGeometry>('alignment', alignment));
    properties.add(DoubleProperty('widthFactor', widthFactor, defaultValue: null));
    properties.add(DoubleProperty('heightFactor', heightFactor, defaultValue: null));
  }
}

二、总结

• 该类继承 SingleChildRenderObjectWidget 抽象类。
• 该类的方法都是重写父类 SingleChildRenderObjectWidget 类的父类 RenderObjectWidget 的方法。
• 该类的 updateRenderObject 方法调用时使用级联直接赋值。

三、应用

// 默认
Align(
  child: Text('Align测试'),
)

// 设置位置
Align(
  alignment: Alignment.centerLeft,
  child: Text('Align测试'),
)

// 设置因子
Align(
  widthFactor: 3,
  heightFactor: 2,
  child: Text('Align测试'),
)