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. 概述

在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 可能是更好的选择。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/142209.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AtCoder ABC154

C - Distinct or Not 签到题,注意大小写和以前的不一样 D - Dice in Line 签到题2,用个窗口即可 E - Almost Everywhere Zero 数位DP(搜索)的例题 pos表示当前搜索到的位置(开始为0,结束为n) …

线性代数(四)| 解方程 齐次性 非齐次性 扩充问题

文章目录 1 方程解的个数2 解方程步骤2.1 齐次性方程组2.2 非齐次方程组 3 一些扩充问题 系数矩阵 增广矩阵 A m n X B A_{mn}XB Amn​XB 1 方程解的个数 m 代表有m个方程 n代表有n个未知数 系数矩阵的秩与增广矩阵的秩不同 无解 若相同 ,如系数矩阵的秩和未知…

数据结构前言(空间复杂度)

1.空间复杂度 空间复杂度也是一个数学表达式,是对一个算法在运行过程中临时占用存储空间大小的量度 。 空间复杂度不是程序占用了多少bytes的空间,因为这个也没太大意义,所以空间复杂度算的是变量的个数。 空间复杂度计算规则基本跟实践复杂…

27 微服务配置拉取

1&#xff09;引入nacos-config依赖 首先&#xff0c;在user-service服务中&#xff0c;引入nacos-config的客户端依赖&#xff1a; <!--nacos配置管理依赖--> <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-sta…

基于闪电搜索算法优化概率神经网络PNN的分类预测 - 附代码

基于闪电搜索算法优化概率神经网络PNN的分类预测 - 附代码 文章目录 基于闪电搜索算法优化概率神经网络PNN的分类预测 - 附代码1.PNN网络概述2.变压器故障诊街系统相关背景2.1 模型建立 3.基于闪电搜索优化的PNN网络5.测试结果6.参考文献7.Matlab代码 摘要&#xff1a;针对PNN神…

同为科技(TOWE)主副控智能自动断电桌面PDU插排

在这个快节奏的现代社会&#xff0c;我们越来越需要智能化的产品来帮助我们提高生活质量和工作效率&#xff0c;同时&#xff0c;为各种家用电器及电子设备充电成为不少消费者新的痛点。桌面插排如何高效、安全地管理这些设备&#xff0c;成为了一个亟待解决的问题。同为科技&a…

竞赛选题 深度学习的水果识别 opencv python

文章目录 0 前言2 开发简介3 识别原理3.1 传统图像识别原理3.2 深度学习水果识别 4 数据集5 部分关键代码5.1 处理训练集的数据结构5.2 模型网络结构5.3 训练模型 6 识别效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习…

Git 命令行使用指南

Git 命令行使用指南 第一部分&#xff1a;配置 Git 1.1 设置用户信息1.2 配置换行符处理 第二部分&#xff1a;创建和配置仓库 2.1 初始化仓库2.2 克隆仓库2.3 递归克隆2.4 深度克隆 第三部分&#xff1a;基本操作 3.1 添加文件3.2 提交更改3.3 查看状态和提交历史3.4 创建和切…

第十二届金鸡湖创新创业大赛总决赛圆满落幕!

精英汇聚,逐梦前行,11月14日,由中国创业人才投资中心、海外高层次人才专家联谊会主办,2023第十二届金鸡湖创新创业大赛总决赛在苏州工业园区圆满举办,21个来自海内外的科技企业经过层层选拔脱颖而出,最终致力于智能声音前端处理技术产业化的黄鹂智声拔得头筹。活动同期举行了第…

SAP:解决函数CONNE_IMPORT_WRONG_COMP_DECS CX_SY_IMPORT_MISMATCH_ERROR错误

用户反馈报表中取数异常&#xff0c;经检查发现SE37执行取数函数ZLY_R_CWFX03报以下错误。 Category ABAP Programming Error Runtime Errors CONNE_IMPORT_WRONG_COMP_DECS Except. CX_SY_IMPORT_MISMATCH_ERROR ABAP Program ZLY_R_CWFX03FT Application Component Not Assig…

【论文阅读】CTAB-GAN: Effective Table Data Synthesizing

论文地址&#xff1a;[2102.08369] CTAB-GAN: Effective Table Data Synthesizing (arxiv.org) 介绍 虽然数据共享对于知识发展至关重要&#xff0c;但遗憾的是&#xff0c;隐私问题和严格的监管&#xff08;例如欧洲通用数据保护条例 GDPR&#xff09;限制了其充分发挥作用。…

“苹果定律”失效,2023是VR的劫点还是拐点?

因为Pico裁员的事情&#xff0c;VR行业又被讨论了。 Pico于2021年9月被字节跳动收购&#xff0c;当时是出货量排名全球第三的VR 头显生产商。 此前曾有国际机构预测&#xff0c;2023年随着Meta和Pico的硬件更新&#xff0c;苹果Vision Pro的推出&#xff0c;三星电子重新回归VR…

Java学习之路 —— Day3(内部类、枚举、泛型、API)

文章目录 1. 内部类2. 枚举3. 泛型 1. 内部类 成员内部类 就是类中的一个普通成员&#xff0c;类似普通的成员方法、成员变量。&#xff08;套娃&#xff09; public class Outer {public class Inner {private String name;public static String school;public String getNa…

map\set封装

目录 1. set和map的底层结构1.1 红黑树1.2 set1.3 map 2. 模拟实现2.1 红黑树2.1 map和set以及仿函数2.3 迭代器2.3.1 const迭代器 2.3 set和map封装 1. set和map的底层结构 1.1 红黑树 这两个容器底层都是对红黑树的封装&#xff0c;因此需要先看一下红黑树结构部分的底层源…

4.0 Linux进程前导知识

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 冯.诺依曼体系 CPU&#xff1a;运算器&#xff0c;控制器 输入设备&#xff1a;键盘&#xff0c;麦克风&#xff0c;摄像头&#xff0c;鼠标&#xff0c;网卡&#xff0c;磁盘等。 输出设备&#xff1a;显示器&#xff0…

都快2024年了,别只使用React,需要学习一下Vue,不然没出路了

最近&#xff0c;我的朋友因为不熟悉 Vue.js 而未能通过面试。 她平时工作中大部分时间都在使用React&#xff0c;所以也懒得去了解其他前端框架。 世界上所有的前端框架我们都应该熟悉吗&#xff1f; 不&#xff0c;这是极其不合理的。 但为了生存&#xff0c;朋友还是要学…

如何解决两个不同服务器,不同账户下的虚拟环境的克隆问题

目录 问题描述&#xff1a; 问题解决&#xff1a; 问题描述&#xff1a; 重新更换了一个服务器&#xff0c;账户也不相同。又不想重新配置完全一样的虚拟环境&#xff08;或者忘记之前的虚拟环境中的具体参数&#xff09;&#xff0c;该如何办呢&#xff1f; 问题解决&#x…

2023数字科技生态展,移远通信解锁新成就

11月10日&#xff0c;以“数字科技&#xff0c;焕新启航”为主题的中国电信2023数字科技生态大会暨2023数字科技生态展在广州盛大启幕。作为物联网行业的龙头标杆&#xff0c;同时更与中国电信连续多年维持稳定友好的合作关系&#xff0c;移远通信受邀参加本次展会。 在本次展会…

使用xlwings实现对excel表中指定列隔行求和

需要对上表中的营业额隔行求和&#xff0c;即橙色背景颜色的求和&#xff0c;无背景颜色的求和。 看了大佬的视频&#xff0c;有两种方法&#xff1a; 1.加辅助列 2.使用判断行的奇偶函数&#xff0c;然后在用sumproduct函数 在此&#xff0c;我使用xlwings对excel表中数据…

Java编程--单例模式(饿汉模式/懒汉模式)/阻塞队列

前言 逆水行舟&#xff0c;不进则退&#xff01;&#xff01;&#xff01; 目录 单例模式 饿汉模式&#xff1a; 懒汉模式&#xff1a; 什么是阻塞队列 什么是高内聚 低耦合 阻塞队列的实现 单例模式 单例模式&#xff08;Singleton Pattern&#xff09;是一种常见…