Flutter隐藏组件

Flutter隐藏组件

在flutter里隐藏控件可以通过多种方式实现。Visibility和Offstage的区别就是保不保留空间，比如你控件设置了宽高，使用Visibility隐藏，但还会留有一块空白在那里。另外很多人常用的也有 if else 判断。

Offstage

Offstage({ 
  Key key, 
  this.offstage = true, // 子组件是否可见，默认true（隐藏）
  Widget child 
})

Visibility

Visibility({
  Key key,
  @required this.child,
  this.replacement = const SizedBox.shrink(),//不可见时显示的组件（当maintainState=false）
  this.visible = true,//子组件是否可见，默认true（可见）
  this.maintainState = false,//不可见时是否维持状态，默认为false
  this.maintainAnimation = false,//不可见时，是否维持子组件中的动画，默认false
  this.maintainSize = false,//不可见时是否留有空间，默认false，
  this.maintainSemantics = false,//不可见时是否维持它的语义，默认false
  this.maintainInteractivity = false,//不可见时是否具有交互性，默认false
})

Offstage 与 Visibility 比较：

Offstage是控制组件隐藏/可见的组件，如果感觉有些单调功能不全，我们可以使用Visibility，Visibility也是控制子组件隐藏/可见的组件。不同是的Visibility有隐藏状态是否留有空间、隐藏状态下是否可调用等功能。

Visibility 若想要在隐藏状态下还保留空间，需要同时设置 maintainAnimation、maintainSize 为 true。

if else

class Test extends StatelessWidget {
  bool isShow=false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: <Widget>[
          Visibility(child: null,visible:false,),
          Offstage(offstage:false,child:null),
          Opacity(opacity: 1,child:null),
          isShow?Text("显示"):SizedBox.shrink()
        ],
      ),
    );
  }
}