FittedBox

一、源码解读

//  FittedBox 继承于 SingleChildRenderObjectWidget 
class FittedBox extends SingleChildRenderObjectWidget {
  /// 创建一个根据 fit 在其内部缩放和定位子组件的组件
  const FittedBox({
    Key? key, 
    this.fit = BoxFit.contain,
    this.alignment = Alignment.center,
    this.clipBehavior = Clip.none,
    Widget? child,
  }) : assert(fit != null),
       assert(alignment != null),
       assert(clipBehavior != null),
       super(key: key, child: child);

  ///  设置将子组件在父组件中分配形式
  /// BoxFit 的简介:
  /// fill : 通过扭曲源的纵横比,来填充父空间
  /// contain: 不改变源的纵横比,尽可能大的填充父空间
  /// cover:  显示可能拉伸,可能裁剪,以最小区域充满父空间(可能是源的某部分)
  /// fitWidth: 确保显示源的全宽,无论这是否意味着源垂直溢出目标框。
  /// fitHeight: 确保显示源的全高,无论这是否意味着源水平溢出目标框。
  /// none: 在目标框内对齐源(默认情况下,居中)并丢弃源中位于框外的任何部分。
  /// scaleDown: 在目标框中对齐源(默认情况下,居中),如果必要,缩小源以确保源适合框。
  final BoxFit fit;

  ///  设置子组件在父组件内的对齐方式
  final AlignmentGeometry alignment;

  /// 裁剪的形似,包括(none: 不裁剪;hardEdge:裁剪,不使用抗锯齿;antiAlias:裁剪,使用抗锯齿;antiAliasWithSaveLayer: 使用抗锯齿同时使用 saveLayer 裁剪)
  final Clip clipBehavior;
  
  /// 创建渲染对象 RenderFittedBox
  @override
  RenderFittedBox createRenderObject(BuildContext context) {
    return RenderFittedBox(
      fit: fit,
      alignment: alignment,
      // 获取系统文字方向
      textDirection: Directionality.maybeOf(context), 
      clipBehavior: clipBehavior,
    );
  }
  
  /// 更新渲染对象的参数
  @override
  void updateRenderObject(BuildContext context, RenderFittedBox renderObject) {
    renderObject
      ..fit = fit
      ..alignment = alignment
      ..textDirection = Directionality.maybeOf(context)
      ..clipBehavior = clipBehavior;
  }
  
  /// Debug 模式,属性的填充
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(EnumProperty<BoxFit>('fit', fit));
    properties.add(DiagnosticsProperty<AlignmentGeometry>('alignment', alignment));
  }
}

二、 总结

  • FittedBox 主要是 fit 参数,该参数决定子组件在父组件中的渲染展示形式
  • FittedBox 的子组件的定位是有参数 alignment 决定的,默认居中。

三、实例

FittedBox(
  alignment: Alignment.centerLeft,
  fit: BoxFit.fill,
  child: Container(
    height: 100,
    width: 60,
    color: Colors.red,
    child: Text('我是一种大大大'),
  ),
)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容