【譯】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