Flutter隐藏控件方法介绍

Posted 2022-06-13 一叶飘舟

一、说明

在 android 开发中，我们如果想隐藏一个控件只需要设置 visibility 属性为 inVisible 和 gone 即可，因为这个是基类 View 自带的属性，所有子 View 都通用。而 Flutter 的开发却不能如此直接，由于 Flutter 本着“一切皆组件”的原则，这类型的设置基本上只能通过组件去设置，下面总结一下隐藏控件的几种方法。

二、具体方法

方法1：Visibility 组件
Widget getWidget()
  return Visibility (
    visible: false, // 设置是否可见：true:可见 false:不可见
    child: Text('Hello World')
  );

方法2：OffStage 组件
Widget getWidget()
  return Offstage (
    offstage: true, // 设置是否可见：true:不可见 false:可见
    child: Text('Hello World')
  );

方法3：Opacity 组件
Widget getWidget()
  return Opacity (
    opacity: 0.0, // 设置是否可见：0:不可见 1:可见
    child: Text('Hello World')
  );

方法4：设置 size
Widget getWidget4()
  return Container (
    height: 0.0, // 设置是否可见：0:不可见 指定尺寸:可见
    child: Text('Hello World')
  );

方法5：空组件占位
bool isHideWidget = true;
getWidget()
  return isHideWidget ? Container() : Text('Hello World');

三、问题

问题1：Offstage 和 Visibility 有什么区别，分别的应用场景是什么？

其实大多时候感觉区别不是很大，Offstage 提供的属性比较少，感觉是专门用来做简单的显示和隐藏的， Visibility 会提供较多的一些特性：

看完属性介绍有所了解：我们一般的需求用哪个都可以，如果有一些类似“不可见时展示一个默认的组件”等这类型需求，可以用 Visibility 组件实现。

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系