Flutter隐藏控件Offstage/Visibility/Opacity/ifelse

发表于 2020年09月24日
flutter

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

属性	说明
Offstage
offstage	子组件是否可见，默认true（隐藏）
child	子组件
Visibility
child	子组件
replacement	不可见时显示的组件（当maintainState = false）
visible	子组件是否可见，默认true（可见）
maintainState	不可见时是否维持状态，默认为false
maintainAnimation	不可见时，是否维持子组件中的动画
maintainSize	不可见时是否留有空间（设置为true，会报错。如果想隐藏并保留组件空间请使用Opacity）
maintainSemantics	不可见时是否维持它的语义（我也没搞明白是什么）
maintainInteractivity	不可见时是否具有交互性

代码示例

Offstage

Offstage(
  offstage:false,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
),

Offstage(

offstage:false,

child: Container(

width: 200,

height: 200,

color: Colors.red,

Visibility

Visibility(
  visible:_offstage,
  replacement:Text('data'),
  maintainState:true,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.yellow,
  ),
),

Visibility(

visible:_offstage,

replacement:Text('data'),

maintainState:true,

child: Container(

width: 200,

height: 200,

color: Colors.yellow,

if else

import 'package:flutter/material.dart';

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()
        ],
      ),
    );
  }
}