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 组件用于操控其子组件是否显现在屏幕上,它提供了一种简略的方法来操控其子组件是否在屏幕上制作,同时坚持子组件的活动状况。
当 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 都能够于操控组件可见性的组件,但它们的工作原理和运用场景有所不同。这里进行一些比较:
-
Offstage:Offstage 组件经过改动其子组件的 RenderObject 的
offstage
特点来操控其子组件是否在屏幕上制作。
当offstage
特点为true
时,子组件不会在屏幕上制作,也不会占用任何空间,但它依然是活动的,能够接纳焦点和键盘输入,其状况目标和动画也会被保存。
因此,Offstage 适用于需求暂时躲藏但仍需求坚持活动状况的组件; -
Opacity:Opacity 组件经过改动其子组件的通明度来操控其可见性。当通明度为
0.0
时,子组件完全不行见;当通明度为1.0
时,子组件完全可见。
Opacity 会将其子组件制作到一个中心缓冲区,然后将这个中心缓冲区以指定的通明度混合到场景中,因此,假如通明度不是0.0
或1.0
,Opacity 可能会比较昂贵。
相比而言,Opacity 适用于需求改动组件通明度的场景; -
Visibility:Visibility 组件的内部实际上是经过组合运用 Offstage 和 Opacity等组件来完成其功用的。
当visible
特点为false
时,Visibility 组件会依据其他的maintain
特点来决定怎么躲藏其子组件。
例如,假如maintainState
为true
,Visibility 组件会运用 Offstage 组件来躲藏子组件,这姿态组件的状况就会被坚持;
假如maintainState
为false
,Visibility 组件会直接将子组件替换为replacement
组件,这姿态组件就会被完全从 组件树 中移除,其状况也会被丢弃。
Visibility适用于需求更灵敏地操控组件可见性的场景。
在功用方面,在大多数情况下,Offstage 和 Visibility 的功用耗费要低于Opacity。
由于 Opacity 需求将其子组件制作到一个中心缓冲区。但是,假如你需求改动组件的通明度,或许需求在widget不行见时坚持其状况、动画、尺度、交互性和语义信息,Opacity 和 Visibility 可能是更好的挑选。