Flutter Visibility控件详解

1. Visibility 的基本定义

Visibility 控件用于包装子控件，通过控制 visible 参数来决定子控件是否可见。该控件的最大特点是：即使子控件被隐藏，它仍然会占据布局中的空间，除非你显式地设置 maintainSize、maintainAnimation 和 maintainState 等参数。

构造函数：

Visibility({
  Key? key,
  this.visible = true,               // 控制是否显示子控件
  this.maintainSize = false,         // 是否保持子控件的空间
  this.maintainAnimation = false,    // 是否保持子控件的动画
  this.maintainState = false,        // 是否保持子控件的状态
  this.maintainSemantics = false,    // 是否保持子控件的语义
  required this.child,               // 需要控制显示与隐藏的子控件
})

主要参数：

• visible: 控制子控件是否可见。如果设置为 true，子控件会显示；如果设置为 false，子控件会隐藏，但仍然占用布局空间，默认值为 true。
• maintainSize: 设置为 true 时，即使控件不可见，仍会保持其大小。这意味着即使控件隐藏了，它仍然会占用其原本的位置和空间。
• maintainAnimation: 设置为 true 时，隐藏控件时，控件的动画（如 Opacity 或 Slide）会继续运行，即使控件不可见。
• maintainState: 设置为 true 时，子控件的状态（如 StatefulWidget 的状态）将保持，即使控件被隐藏。
• maintainSemantics: 控制隐藏时是否保持语义，默认情况下，子控件隐藏时会移除语义信息，设置为 true 会保留。

2. 基本用法

示例 1：简单的 Visibility 使用

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Visibility Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Visibility(
                visible: _isVisible,  // 控制文本显示与隐藏
                child: Text('This text is visible or hidden'),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isVisible = !_isVisible;  // 切换文本可见性
                  });
                },
                child: Text(_isVisible ? 'Hide Text' : 'Show Text'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释：

• _isVisible 控制 Visibility 控件的可见性，点击按钮切换文本的显示与隐藏。

3. maintainSize 使用场景

当你希望控件隐藏时仍然保留原来的布局空间时，可以使用 maintainSize 参数。

示例 2：使用 maintainSize 保留空间

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Visibility with maintainSize')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Visibility(
                visible: _isVisible,
                maintainSize: true, // 保持空间
                child: Container(
                  width: 200,
                  height: 100,
                  color: Colors.blue,
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isVisible = !_isVisible; // 切换可见性
                  });
                },
                child: Text(_isVisible ? 'Hide Container' : 'Show Container'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释：

• 即使容器不可见，maintainSize: true 会保持容器的大小和位置，从而让其占用空间。

4. maintainAnimation 和 maintainState 使用场景

• maintainAnimation: 当隐藏一个控件时，默认控件的动画也会停止。如果你希望控件的动画在隐藏时继续进行，可以设置为 true。
• maintainState: 当控件隐藏时，StatefulWidget 的状态会被保留，不会被销毁。这样当控件重新显示时，它会恢复到原来的状态。

示例 3：使用 maintainAnimation 和 maintainState

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isVisible = true;
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Visibility with Animation and State')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Visibility(
                visible: _isVisible,
                maintainAnimation: true, // 保持动画
                maintainState: true, // 保持状态
                child: AnimatedOpacity(
                  opacity: _opacity,
                  duration: Duration(seconds: 1),
                  child: Container(
                    width: 200,
                    height: 100,
                    color: Colors.blue,
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isVisible = !_isVisible;
                    _opacity = _isVisible ? 1.0 : 0.0;  // 动画改变透明度
                  });
                },
                child: Text(_isVisible ? 'Hide Container' : 'Show Container'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释：

• 使用 AnimatedOpacity 控件来控制容器的透明度，并通过按钮来切换透明度和可见性。
• 设置 maintainAnimation: true，即使容器不可见，动画依然会继续。
• 设置 maintainState: true，即使容器被隐藏，控件的状态也会被保留。

5. Visibility 和 Offstage 的区别

• Visibility: 控件被隐藏时依然占据布局空间，可以选择是否保留动画、状态等信息。
• Offstage: 另一个用于隐藏控件的控件。当控件被隐藏时，它不仅不显示，也不占据任何空间。

Visibility 更加灵活，允许控制隐藏控件时是否占据空间，而 Offstage 适合不想占用空间的情况。

6. 总结

• Visibility 控件用于控制子控件的显示与隐藏，可以保持布局空间，控制动画、状态和语义信息。
• 通过设置 maintainSize、maintainAnimation、maintainState 等参数，可以更加精细地控制控件隐藏时的行为。
• 适用于动态控制 UI 中某些元素的可见性，常用于表单输入、加载提示等场景。

Visibility 是 Flutter 中非常实用的控件，帮助我们根据需求灵活管理子控件的可见性和布局行为。

结束语
Flutter是一个由Google开发的开源UI工具包，它可以让您在不同平台上创建高质量、美观的应用程序，而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧，从UI设计到性能优化，欢饮关注一起讨论学习，共同进入Flutter的精彩世界！