Flutter SizedBox.shrink() 使用笔记

SizedBox.shrink() 是 Flutter 中很有意思的函数,它会创建一个宽度和高度都为 0 的 SizedBox。其实就是一个占用控件无限小的 Widget 占位符。

使用 SizedBox.shrink() 的一个最常见场景就是在条件渲染中。比如,我们可能想要根据某个条件显示一个 Widget,而在其他情况下什么也不显示。在这种情况下,就可以使用 SizedBox.shrink() 作为占位符。

 Widget _buildConditionalWidget(bool condition) {
    if (condition) {
      return Text("Condition is true");
    } else {
      return SizedBox.shrink();
    }
  }

上面代码中,我们要根据 condition 来创建返回 Widget ,当条件成立 为 true 时,我们返回一个 Text Widget。当条件为 false 返回一个不占空间的占位符。

可能你会觉得,为什么一定要返回,去掉条件为 false 的代码可以吗?或者直接返回 null 。这样做是不行的,一定要返回一个 Widget 才行。

在之前我都是使用 container。虽然效果都是一样的,但相对来说 SizedBox.shrink() 显得更专业。

 Widget _buildConditionalWidget(bool condition) {
    if (condition) {
      return Text("Condition is true");
    } else {
      return Container();
    }
  }

还有个事要注意,SizedBox.shrink() 被用作 GridView 的子项时,它会占用一个单元格,但实际上不显示任何内容,导致网格中出现空白单元格。这个问题也在 Stack Overflow 上有讨论 SizedBox.shrink() or Container() not returning empty Widget?

但是在 ListView Column …其他布局不会出现这种情况,只是 GridView 特殊,因为 GridView 会按照指定的 crossAxisCount创建固定数量的网格单元格。要解决这个问题,大概思路是通过条件过滤数据(where 操作 List),不要将 SizedBox.shrink() 当做子项在 GridView 中使用。基本就这样。

本文由老郭种树原创,转载请注明:https://guozh.net/flutter-sizedbox-shrink/

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注