Visibility

Visibility是控制组件隐藏/可见的组件。功能比Offstage多。其构造函数：

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

例子：

class _VisibilityPageState extends State<VisibilityPage> {
 bool _isShow = true;
 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(title: const Text('Visibility'),),
       body: Center(
         child: Column(
           children: [
             Visibility(
               visible: _isShow,
               child: Image.asset('images/logo.png',height: 300,width: 300,)
             ),
             const SizedBox(height: 30,),
             ElevatedButton(
               onPressed: (){
                 setState(() {
                   _isShow = !_isShow;
                 });
               },
               child: Text(
                 _isShow ? '隐藏':'显示',
                 style: const TextStyle(fontSize: 20),
               )
             )
           ],
         ),
       )
   );
 }
}

默认情况下 Visibility 小部件会从小部件树中删除子小部件。因此，子部件保留的空间得到释放并且 Button 被移动。那么隐藏时保持大小我们只需要添加maintainSize、maintainAnimation、maintainState参数，并将其值设置为true。

 Visibility(
    visible: _isShow,
    maintainSize: true,
    maintainAnimation: true,
    maintainState: true,
    child: Image.asset('images/logo.png',height: 300,width: 300,)
  ),

要显示替换小部件,添加替换参数replacement（在 Visibility 小部件内）并为其分配适当的小部件。

Visibility(
    visible: _isShow,
    replacement: Image.asset('images/avatar.jpg',height: 300,width: 300,),
    child: Image.asset('images/logo.png',height: 300,width: 300,),
    ),