Flutter笔记：Opacity、Offstage和Visibility可见性的比较

Flutter笔记 Flutter笔记：Opacity、Offstage和Visibility可见性的比较

---

作者：李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263

邮箱 ：291148484@163.com

本文地址：https://blog.csdn.net/qq_28550263/article/details/134354929

---

目 录

---

• 1. 概述
• 2. Opacity 组件回顾
• 3. Offstage 组件回顾
• 4. Visibility 组件回顾
• 4. 比较

  ---

  1. 概述

  在Flutter中，有多种方式可以控制组件的可见性。这包括使用Opacity，Offstage和Visibility等组件。这些组件都可以用来控制其子组件的可见性，但它们的工作原理和使用场景有所不同。在本文中，我们将首先回顾这三个组件的基本用法和工作原理，然后我们将比较这三个组件的性能和适用场景，以帮助你选择最适合你需求的组件。

  2. Opacity 组件回顾

  Opacity组件用于改变其子组件的透明度，从而实现部分透明的效果。它的构造函数如下：

  const Opacity({  Key? key,  required double opacity, // 必需参数，用于设置子组件的透明度，取值范围为0.0到1.0，其中0.0表示完全透明，1.0表示完全不透明。  bool alwaysIncludeSemantics = false, // 可选参数，用于控制是否始终包含子组件的语义信息。默认值为false。  Widget? child, // 可选参数，用于设置需要改变透明度的子组件。})

  例如：

  Opacity(  opacity: 0.5, // 设置子组件的透明度为50%  child: Text('Hello, World!'), // 需要改变透明度的子组件)

  这个示例中，文本’Hello, World!'将以50%的透明度被绘制。

  Opacity 组件会将其子组件绘制到一个中间缓冲区，然后将这个中间缓冲区以指定的透明度混合到场景中。这意味着，如果 opacity 的值不是0.0或1.0，Opacity 可能会比较昂贵，因为它需要将子组件绘制到一个中间缓冲区。如果opacity 的值是0.0，子组件将不会被绘制。如果 opacity 的值是1.0，子组件将直接被绘制，不需要中间缓冲区。

  3. Offstage 组件回顾

  Offstage 组件用于控制其子组件是否显示在屏幕上，它提供了一种简单的方式来控制其子组件是否在屏幕上绘制，同时保持子组件的活动状态。

  当 Offstage 的 offstage 参数为 true 时，其子组件将被隐藏，不会被绘制到屏幕上，也不会占用任何空间，同时也不会响应点击事件。但是，这个子组件仍然是活动的，可以接收焦点和键盘输入。

  Offstage 的构造函数如下：

  const Offstage({  Key? key, // 可选参数，用于控制如何替换树中的其他widget。  bool offstage = true, // 可选参数，用于控制子组件是否隐藏。默认值为true，表示隐藏子组件。  Widget? child, // 可选参数，用于设置需要隐藏或显示的子组件。})

  例如：

  Offstage(  offstage: _offstage, // 根据_offstage变量的值来控制子组件是否隐藏  child: Text('Hello, World!'), // 需要隐藏或显示的子组件)

  在这个例子中，文本’Hello, World!'的显示或隐藏将由_offstage变量的值来控制。需要注意的是，即使子组件被隐藏，它仍然是活动的，可以接收焦点和键盘输入。

  Offstage组件的工作原理相对简单。它通过改变其子组件的RenderObject的offstage属性来控制其子组件是否在屏幕上绘制。

  当Offstage的offstage属性为true时，它会将其子组件的RenderObject的offstage属性设置为true。这会导致在布局阶段，子组件的RenderObject的performLayout方法将其尺寸设置为0，并且在绘制阶段，子组件的RenderObject的paint方法不会被调用。这样，子组件就不会在屏幕上绘制，也不会占用任何空间。

  然而，即使子组件的RenderObject的offstage属性为true，子组件仍然是活动的。它仍然会参与widget树的更新和构建过程，它的状态对象（如果有的话）仍然会被保留，它的动画（如果有的话）仍然会运行，它仍然可以接收焦点和键盘输入。

  4. Visibility 组件回顾

  Visibility组件用于控制其子组件是否可见。它的默认构造函数如下：

  const Visibility({  Key? key, // 可选参数，用于控制如何替换树中的其他widget。  required Widget child, // 必需参数，用于设置需要隐藏或显示的子组件。  Widget replacement = const SizedBox.shrink(), // 可选参数，用于设置当子组件不可见时的替换组件。默认值为一个零尺寸的盒子。  bool visible = true, // 可选参数，用于控制子组件是否可见。默认值为true，表示子组件可见。  bool maintainState = false, // 可选参数，用于控制当子组件不可见时是否保持其状态。默认值为false，表示不保持状态。  bool maintainAnimation = false, // 可选参数，用于控制当子组件不可见时是否保持其动画。默认值为false，表示不保持动画。  bool maintainSize = false, // 可选参数，用于控制当子组件不可见时是否保持其尺寸。默认值为false，表示不保持尺寸。  bool maintainSemantics = false, // 可选参数，用于控制当子组件不可见时是否保持其语义信息。默认值为false，表示不保持语义信息。  bool maintainInteractivity = false // 可选参数，用于控制当子组件不可见时是否保持其交互性。默认值为false，表示不保持交互性。})

  Visibility还有一个名为maintain的构造函数，它等同于主构造函数，但所有的"maintain"字段都被设置为true。这个构造函数应该在Opacity组件只接受0.0或1.0的值时使用，因为它可以在完全不透明时避免额外的合成。其构造函数如下：

  const Visibility.maintain({  Key? key, // 可选参数，用于控制如何替换树中的其他widget。  required Widget child, // 必需参数，用于设置需要隐藏或显示的子组件。  bool visible = true // 可选参数，用于控制子组件是否可见。默认值为true，表示子组件可见。})

  例如：

  Visibility(  visible: _visible, // 根据_visible变量的值来控制子组件是否可见  child: Text('Hello, World!'), // 需要隐藏或显示的子组件)

  在这个例子中，文本’Hello, World!'的显示或隐藏将由_visible变量的值来控制。

  isibility组件的内部实际上是通过组合使用 Offstage 和 Opacity 等组件来实现其功能的。当visible属性为false时，Visibility组件会根据其他的 maintain 属性来决定如何隐藏其子组件。

  • 如果 maintainState 为true，Visibility组件会使用Offstage组件来隐藏子组件，这样子组件的状态就会被保持。如果 maintainState 为false，Visibility组件会直接将子组件替换为replacement组件，这样子组件就会被彻底从 组件树 中移除，其状态也会被丢弃；

    ---

    • 如果maintainAnimation为true，Visibility组件会保持子组件的动画运行。这需要maintainState也为true，因为动画的运行依赖于状态。

      ---

      • 如果maintainSize为true，Visibility组件会保持子组件的尺寸，即使子组件不可见。

        （这需要maintainAnimation和maintainState都为true，因为有些动画可能会影响到子组件的尺寸。）

        ---

        • 如果maintainInteractivity为true，Visibility组件会保持子组件的交互性，即使子组件不可见。

          （这需要maintainSize、maintainAnimation和maintainState都为true，因为交互性依赖于子组件的尺寸和状态。）

          ---

          • 如果 maintainSemantics 为 true，Visibility 组件会保持子组件的语义信息，即使子组件不可见。

            （当然，这需要maintainSize、maintainAnimation和maintainState都为true，因为语义信息依赖于子组件的尺寸和状态。）

            通过这种方式，Visibility 组件可以灵活地控制子组件的可见性，同时保持子组件的状态、动画、尺寸、交互性和语义信息。

            4. 比较

            在Flutter中，Offstage，Opacity 和 Visibility 都可以于控制组件可见性的组件，但它们的工作原理和使用场景有所不同。这里进行一些比较：

            1. Offstage：Offstage 组件通过改变其子组件的 RenderObject 的 offstage 属性来控制其子组件是否在屏幕上绘制。

               当 offstage 属性为 true 时，子组件不会在屏幕上绘制，也不会占用任何空间，但它仍然是活动的，可以接收焦点和键盘输入，其状态对象和动画也会被保留。

               因此，Offstage 适用于需要临时隐藏但仍需要保持活动状态的组件；

            2. Opacity：Opacity 组件通过改变其子组件的透明度来控制其可见性。当透明度为 0.0 时，子组件完全不可见；当透明度为 1.0 时，子组件完全可见。

               Opacity 会将其子组件绘制到一个中间缓冲区，然后将这个中间缓冲区以指定的透明度混合到场景中，因此，如果透明度不是 0.0 或 1.0，Opacity 可能会比较昂贵。

               相比而言，Opacity 适用于需要改变组件透明度的场景；

            3. Visibility：Visibility 组件的内部实际上是通过组合使用 Offstage 和 Opacity等组件来实现其功能的。

               当 visible 属性为 false 时，Visibility 组件会根据其他的 maintain 属性来决定如何隐藏其子组件。

               例如，如果 maintainState 为 true，Visibility 组件会使用 Offstage 组件来隐藏子组件，这样子组件的状态就会被保持；

               如果 maintainState 为 false，Visibility 组件会直接将子组件替换为 replacement 组件，这样子组件就会被彻底从 组件树 中移除，其状态也会被丢弃。

               Visibility适用于需要更灵活地控制组件可见性的场景。

            在性能方面，在大多数情况下，Offstage 和 Visibility 的性能消耗要低于Opacity。

            因为 Opacity 需要将其子组件绘制到一个中间缓冲区。然而，如果你需要改变组件的透明度，或者需要在widget不可见时保持其状态、动画、尺寸、交互性和语义信息，Opacity 和 Visibility 可能是更好的选择。