Flutter隐藏控件不占用UI空间无空白实现方法

编写Flutter布局时，期望通过if条件判断控制subTitle副标题的显示与隐藏，但实际运行时出现异常：当subTitle为null被隐藏时，标题下方仍残留多余空白占位；只有直接移除subTitle相关代码，布局显示才符合预期。

问题效果截图：

Column(
  children : [
    SizedBox(height: AppTheme.space1),
    Image.asset(
      image,
      width: 128,
      height: 128,
    ),
    SizedBox(height: AppTheme.space2),
    Text(
      title,
      style: Theme.of(context).textTheme.headline2,
      textAlign: TextAlign.center,
    ),
    if (subTitle != null)
      SizedBox(height: AppTheme.space0),
    if (subTitle != null)
      Text(
        subTitle ?? '',
        style: Theme.of(context).textTheme.bodyText1,
      ),
    SizedBox(height: AppTheme.space3),
    Button(
      onPressed: () {
        Navigator.pop(context, returnTextYes);
        onTapPrimaryButton?.call();
      },
      text: textYes,
    ),
  ]
)

现有代码的判断逻辑存在三个漏洞，会导致多余占位：

• 判断条件只校验了subTitle != null，如果实际传入的是空字符串''，判断条件依然成立，会渲染出无文字但保留默认字体行高的Text组件，形成空白占位
• 间距SizedBox和副标题Text拆成了两个独立的if判断块，后续代码迭代时很容易出现判断条件不一致的问题，导致副标题不显示但间距单独渲染
• Text组件写了subTitle ?? ''的兜底逻辑，就算后续逻辑异常导致subTitle为空，也会渲染出空文本组件占位

将副标题和对应的前置间距合并为一个逻辑块，统一判断渲染条件，同时兼容null和空字符串两种场景，修复代码如下：

Column(
  children : [
    SizedBox(height: AppTheme.space1),
    Image.asset(
      image,
      width: 128,
      height: 128,
    ),
    SizedBox(height: AppTheme.space2),
    Text(
      title,
      style: Theme.of(context).textTheme.headline2,
      textAlign: TextAlign.center,
    ),
    // 间距与副标题作为整体判断，同步显示/隐藏
    if (subTitle?.isNotEmpty ?? false) ...[
      SizedBox(height: AppTheme.space0),
      Text(
        subTitle!,
        style: Theme.of(context).textTheme.bodyText1,
      ),
    ],
    SizedBox(height: AppTheme.space3),
    Button(
      onPressed: () {
        Navigator.pop(context, returnTextYes);
        onTapPrimaryButton?.call();
      },
      text: textYes,
    ),
  ]
)

修复点说明：

• 判断条件改为subTitle?.isNotEmpty ?? false，同时覆盖subTitle为null、subTitle为空字符串两种场景，从根源避免空文本组件渲染
• 使用Dart的spread运算符...将间距和Text作为一组插入Column的children列表，两个组件始终同步渲染/隐藏，不会出现单独留间距的问题
• 进入判断块后subTitle必然为非空有效值，直接使用subTitle!传值即可，去掉?? ''的空字符串兜底，避免异常场景下渲染空文本占位

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