自定义SBox仅设宽/高时子组件消失问题排查

问题场景 #

为实现响应式设计，基于原生SizedBox封装了自定义SBox组件，使用Screenutil的.h/.w扩展做尺寸适配，但遇到异常：

• 仅传入width或height其中一个参数包裹子组件时，子组件直接消失，控制台无报错
• 同时传入宽高参数时，组件及子组件显示正常
• 原生SizedBox仅传宽或高时，子组件能正常显示

自定义组件代码：

class SBox extends StatelessWidget {
  const SBox({Key? key, this.h, this.w, this.child}) : super(key: key);
  final double? h;
  final double? w;
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: (h ?? 0.0).h,
      width: (w ?? 0.0).w,
      child: child,
    );
  }
}

现象原因 #

核心问题是你给未传入的参数设置了默认值0.0：

• 当只传width时，h为null，会被默认成0.0，经.h转换后还是0高度，SizedBox高度为0会把垂直方向的子组件完全挤压消失
• 同理只传height时，width被默认成0，水平方向子组件被挤压消失
• 原生SizedBox的宽高参数默认是null，而非0——当参数为null时，SizedBox会自动适配子组件的对应方向尺寸，不会挤压子组件

自定义SBox的问题 #

组件存在明显逻辑错误，完全违背了原生SizedBox的设计逻辑：

• 原生SizedBox的宽高为null时，表示「在该方向上不限制尺寸，跟随子组件或父容器自适应」
• 你把未传入的参数强制设为0，相当于强制把未指定的方向尺寸固定为0，直接破坏了自适应布局的逻辑

潜在问题 #

除了当前的子组件消失问题，还会引发其他适配异常：

• 用该组件做布局间隔（比如仅传h做垂直间距）时，会因为宽度为0导致周围布局错位
• 嵌套使用时，父组件的自适应布局逻辑会被打乱，出现意料之外的空白或挤压
• 后续维护时，其他开发者会误以为该组件和原生SizedBox行为一致，引发更多布局bug

修复方案 #

将默认值逻辑改为仅在参数不为null时才做响应式转换，未传入的参数保持null，和原生SizedBox行为对齐：

class SBox extends StatelessWidget {
  const SBox({Key? key, this.h, this.w, this.child}) : super(key: key);
  final double? h;
  final double? w;
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: h?.h,
      width: w?.w,
      child: child,
    );
  }
}

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