在页面渲染的过程中,有时候我们需要让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("两者兼顾"),
),
),