【译】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;
    }
  }
}

 以上代码的解释如下：

1、对于visible: 什么也不做

2、对于Invisible: 用IgnorePointer 和Opacity widget包裹，并将opacity的值设置为0

3、对于offscreen：用Offstage widget包裹使得widget在屏幕外显示

4、直接返回没有大小初始值container widget，可以根据需要自行更改另外的widget