Flutter开发 组件的隐藏与显示

在页面渲染的过程中，有时候我们需要让widget占位隐藏 & 直接隐藏，这也就是前端开发中常用的

visibility：hidden / visible ;
// 或者
display：none / block ;

在flutter中则可以通过布局的形式来实现这样的需求。

1、占位隐藏

Opacity(
   // 通过给opacity设置0或者1控制其隐藏显示，会一直保持占位
   opacity: tab_index == 1 ? 1 : 0,   
   child: GestureDetector(
       child: Text("占位隐藏"),
       onTap: () => print("占位隐藏"),
   ),
),

2、直接隐藏（不占位）

Offstage(
  // offstage为true时隐藏，为false时显示，不占位
  offstage: HiddenFlag,
  child: GestureDetector(
     child:Text("直接隐藏"),
       onTap: () => print("直接隐藏"),
     ),
),

3、两者兼顾

Visibility(
   // visible 为true时显示，为false时隐藏
   visible: top_toggle_index == 1,
   // 重点来了：
   // maintainSize 控制占位与否，为true时表示占位，但是需要同时maintainAnimation && 
   // maintainState 均为true
   maintainSize: true,
   maintainAnimation: true,
   maintainState: true,
   // 为false时表示不占位隐藏，其他两个参数不做要求
   child: GestureDetector(
          child: Text("两者兼顾"),
      ),
      onTap: () => print("两者兼顾"),
   ),
),