是 Flutter 中很有意思的函数,它会创建一个宽度和高度都为 0 的 SizedBox
使用 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/