Flutter Dart如何为已创建的Container实例设置child子组件

实现方案 #

Flutter 中所有 Widget 都是不可变类型，属性默认用 final 修饰，无法直接修改已创建的 Container 实例的 child 属性，我们可以通过扩展方法为 Container 增加 copyWith 能力，拷贝原有实例的所有属性，仅替换 child 字段即可。 #

方案1：通过扩展方法实现（推荐） #

首先添加 Container 的 copyWith 扩展，后续其他场景也可以复用：

extension ContainerCopyWith on Container {
  Container copyWith({
    Key? key,
    AlignmentGeometry? alignment,
    EdgeInsetsGeometry? padding,
    Color? color,
    Decoration? decoration,
    Decoration? foregroundDecoration,
    double? width,
    double? height,
    BoxConstraints? constraints,
    EdgeInsetsGeometry? margin,
    Matrix4? transform,
    AlignmentGeometry? transformAlignment,
    Widget? child,
    Clip? clipBehavior,
  }) {
    return Container(
      key: key ?? this.key,
      alignment: alignment ?? this.alignment,
      padding: padding ?? this.padding,
      color: color ?? this.color,
      decoration: decoration ?? this.decoration,
      foregroundDecoration: foregroundDecoration ?? this.foregroundDecoration,
      width: width ?? this.width,
      height: height ?? this.height,
      constraints: constraints ?? this.constraints,
      margin: margin ?? this.margin,
      transform: transform ?? this.transform,
      transformAlignment: transformAlignment ?? this.transformAlignment,
      clipBehavior: clipBehavior ?? this.clipBehavior,
      child: child ?? this.child,
    );
  }
}

之后改造你的 myBuilder 函数：

Widget myBuilder({
  required Widget child,
  Container? container,
}) {
  if (container == null) return child;
  // 保留container原有所有配置，仅替换child为传入的参数
  return container.copyWith(child: child);
}

原有调用逻辑完全兼容，不需要额外修改：

var widget = myBuilder( child: Button(), container: Container() )

方案2：手动构造新Container（无需额外扩展） #

如果不想单独定义扩展，也可以直接在函数内手动拷贝原有Container的所有属性：

Widget myBuilder({
  required Widget child,
  Container? container,
}) {
  if (container == null) return child;
  return Container(
    key: container.key,
    alignment: container.alignment,
    padding: container.padding,
    color: container.color,
    decoration: container.decoration,
    foregroundDecoration: container.foregroundDecoration,
    width: container.width,
    height: container.height,
    constraints: container.constraints,
    margin: container.margin,
    transform: container.transform,
    transformAlignment: container.transformAlignment,
    clipBehavior: container.clipBehavior,
    child: child,
  );
}

内容的提问来源于stack exchange，提问作者oravecz