【译】flutter中如何较好地实现隐藏和显示widget

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

通常情况下，显示有四种情况：

1、（visible)显示

2、（invisible)隐藏：

这种隐藏是指在屏幕中占据空间，只是没有显示。这种情况出现场景如：用带有背景色的Container Widget去包含一个不可见的Image，当从网络中加载图片后才让它显示，这是为了避免图片显示后让页面布局改变发生跳动。

3、（Offscreen)超出屏幕，同样占据空间

4、（Gone)消失：

这种是指Widget没有被rendered，不存在于wedget tree中

考虑到显示隐藏带来的代价，所以我们在控制显示隐藏最好的起始出发点是不要让widget出现在wedget tree中。

伪代码如下：

List<Widge> views = []
if(shouldBeIncluded) {
views.add(myView);
}
// use views later

当决定使用哪种方式时，应该考虑一下几个问题：

1、该widget是否只显示一次，譬如在app启动的时候，这时应该使用第四种，即Gone方式

2、是否需要让该widget一直占据空间或者当该widget隐藏是否会影响其他widget？如果是的或可以使用第二种，即invisible。

3、当该widget不可见的时候，在计算大小的时候是否依然计算该widget？是的话用第三种，及Offscreen

总结以上，示例代码如下：

import 'package:flutter/widgets/dart';
import 'package:meta/meta.dart';enum VisibilityFlag {
visible,
invisible,
offscreen,
gone,
}class Visibility extends StatelessWidget {
final Visibility visibility;
final Widget child;
final Widget removeChild; Visibility({
@retuired this.child,
@required this.visibility,
}) : this.removeChild = Container(); @override
Widget build(BuildContext context) {
if(visibility == VisibilityFlag.visible) {
return child;
}else if(visibility == VisibilityFlag.invisible) {
return new IgnorePointer(
ignoring: true,
child: new Opacity(
opcity: 0.0,
child: child
)
);
}else if(visibility == VisibilityFlag.offscreen) {
return new Offstage(
offstage: true,
child: child
);
}else{
return removeChild;
}
}
}