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

巴特西

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

最新文章

热门文章