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


作者李俊才 (jcLee95)blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址blog.csdn.net/qq_28550263…


@[TOC](

目 录


)


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 组件用于操控其子组件是否显现在屏幕上,它提供了一种简略的方法来操控其子组件是否在屏幕上制作,同时坚持子组件的活动状况。
Offstageoffstage 参数为 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组件的内部实际上是经过组合运用 OffstageOpacity 等组件来完成其功用的。当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,由于交互性依赖于子组件的尺度和状况。)

  • 假如 maintainSemanticstrueVisibility 组件会坚持子组件的语义信息,即便子组件不行见。
    (当然,这需求maintainSize、maintainAnimation和maintainState都为true,由于语义信息依赖于子组件的尺度和状况。)

经过这种方法,Visibility 组件能够灵敏地操控子组件的可见性,同时坚持子组件的状况、动画、尺度、交互性和语义信息。

4. 比较

在Flutter中,OffstageOpacityVisibility 都能够于操控组件可见性的组件,但它们的工作原理和运用场景有所不同。这里进行一些比较:

  1. OffstageOffstage 组件经过改动其子组件的 RenderObjectoffstage 特点来操控其子组件是否在屏幕上制作。
    offstage 特点为 true 时,子组件不会在屏幕上制作,也不会占用任何空间,但它依然是活动的,能够接纳焦点和键盘输入,其状况目标和动画也会被保存。
    因此,Offstage 适用于需求暂时躲藏但仍需求坚持活动状况的组件;

  2. OpacityOpacity 组件经过改动其子组件的通明度来操控其可见性。当通明度为 0.0 时,子组件完全不行见;当通明度为 1.0 时,子组件完全可见。
    Opacity 会将其子组件制作到一个中心缓冲区,然后将这个中心缓冲区以指定的通明度混合到场景中,因此,假如通明度不是 0.01.0Opacity 可能会比较昂贵。
    相比而言,Opacity 适用于需求改动组件通明度的场景;

  3. VisibilityVisibility 组件的内部实际上是经过组合运用 OffstageOpacity等组件来完成其功用的。
    visible 特点为 false 时,Visibility 组件会依据其他的 maintain 特点来决定怎么躲藏其子组件。
    例如,假如 maintainStatetrueVisibility 组件会运用 Offstage 组件来躲藏子组件,这姿态组件的状况就会被坚持;
    假如 maintainStatefalseVisibility 组件会直接将子组件替换为 replacement 组件,这姿态组件就会被完全从 组件树 中移除,其状况也会被丢弃。
    Visibility适用于需求更灵敏地操控组件可见性的场景。

在功用方面,在大多数情况下,OffstageVisibility 的功用耗费要低于Opacity。
由于 Opacity 需求将其子组件制作到一个中心缓冲区。但是,假如你需求改动组件的通明度,或许需求在widget不行见时坚持其状况、动画、尺度、交互性和语义信息,OpacityVisibility 可能是更好的挑选。