当前位置：首页 > article >正文

Flutter Visibility控件详解

article 2024/12/24 7:22:09

在这里插入图片描述

文章目录

- - 1. `Visibility` 的基本定义
  - - 构造函数：
    - 主要参数：
  - 2. 基本用法
  - - 示例 1：简单的 `Visibility` 使用
    - 解释：
  - 3. `maintainSize` 使用场景
  - - 示例 2：使用 `maintainSize` 保留空间
    - 解释：
  - 4. `maintainAnimation` 和 `maintainState` 使用场景
  - - 示例 3：使用 `maintainAnimation` 和 `maintainState`
    - 解释：
  - 5. **`Visibility` 和 `Offstage` 的区别**
  - 6. **总结**

Visibility 是 Flutter 中用于控制子控件显示与隐藏的控件。它的作用是控制某个子控件是否在界面上显示，并且可以选择是否保留该控件占用的空间。这个控件非常适合需要动态展示或隐藏内容的场景，比如表单的输入字段、弹出提示、加载指示器等。

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