Flutter控制组件显示和隐藏三种方式详解

目录
  • 方式一：if语句控制
  • 方式二：Offstage组件
  • 方式三： Visibility
  • Offstage和Visibility的区别：

方式一：if语句控制

// 例如：
Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if(a=="显示")
              Text("显示"),
           Offstage(
             offstage: false,
             child: Text("显示"),
           ),
           Visibility(
               visible: true,
               child: Text("显示")
           )
          ],
        ),

方式二：Offstage组件

offstage属性控制控制child的显示和隐藏，true时：隐藏，false时：显示

Offstage(
             offstage: true,
             child: Text("显示"),
           )

方式三： Visibility

visible属性控制child的显示和隐藏，true时：显示，false时：隐藏

 Visibility(
               visible: true,
               child: Text("显示")
           )

Offstage和Visibility的区别：

1、Visibility 隐藏/可见，能保存组件的状态；Offstage不能保存组件的状态，组件重新加载。

2、当Offstage不可见（true）的时候，如果child有动画等，需要手动停掉，Offstage并不会停掉动画等操作。

3、Offstage隐藏时不占空间，Visibility可以设置隐藏时占据空间也可以不占据空间，默认不隐藏时不占据空间

备注：Visibility隐藏时占据空间如下：

Visibility(
  visible:false,
  maintainAnimation: true,
  maintainSize: true,
  maintainState: true,
  child: Text("显示"),
),

强调：maintainSize就是保持大小不变，如果只设置这个属性，会报错，另外两个属性：maintainAnimation和maintainState也必须同时设置。

以上就是Flutter控制组件显示和隐藏三种方式详解的详细内容，更多关于Flutter控制组件显示隐藏的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 混合栈跳转导致Flutter页面事件卡死问题解决

    混合栈跳转导致Flutter页面事件卡死问题解决

    目录 问题来源 问题难点 问题定位 问题确定 问题解决 总结 问题来源 在我们升级Flutter2.5后,测试在走整个业务流程中发现了有页面卡死现象,于是给我提了一个BUG. 在xx页面多次操作后,页面卡死,页面还可以滚动但是无法跳转,点击长按事件都失效了. 在我多次测试后发现,确实存在这个问题,而且老版本也都存在. 问题难点 复现难 问题定位 最开始,我先确定了失效情况下,事件源头有没有正确发送,所以,先在_dispatchPointerDataPacket方法上添加了断点.结果发现都是正常.

  • Flutter之PageView页面缓存与KeepAlive

    Flutter之PageView页面缓存与KeepAlive

    目录 正文 构造函数 页面缓存 KeepAlive KeepAliveWrapper 总结 正文 如果要实现页面切换和 Tab 布局,我们可以使用 PageView 组件.需要注意,PageView 是一个非常重要的组件,因为在移动端开发中很常用,比如大多数 App 都包含 Tab 换页效果.图片轮动以及抖音上下滑页切换视频功能等等,这些都可以通过 PageView 轻松实现. 构造函数 PageView({ Key? key, this.scrollDirection = Axis.horiz

  • Flutter使用 input chip 标签组件示例详解

    目录 前言 正文 类构造 属性 如何在 Dart 文件中实现代码 全部代码 结论 前言 这里有一些拥有属性的 chip,其中之一就是 input chip.input chip 通常用于以保守的结构处理客户端输入或向客户端提供想法.除了 label 和 avtar 之外,input chip 还可以有一个删除图标.在 Flutter 中,您可以利用 InputChip widget 制作这种 chip. InputChip 是一个 material widget ,它以保守的结构处理令人难以置信

  • Flutter之可滚动组件实例详解

    目录 正文 Scrollable 主轴和纵轴 Viewport Sliver 可滚动组件的通用配置 ScrollController 子节点缓存 Scrollbar 总结 正文 当内容超过显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误.为此,Flutter提供了多种可滚动widget(Scrollable Widget)用于显示列表和长布局. Flutter中有两种布局模型: 基于 RenderBox 的盒模型布局. 基于 Sliver ( Rend

  • Flutter添加页面过渡动画实现步骤

    Flutter添加页面过渡动画实现步骤

    目录 正文 使用插件探索不同的转换 步骤 1: 在 pubspec.yaml 中添加页面动画转换 步骤 2: 在 PageOne 上导入库 步骤3.添加以下导航代码行 其他类型转换的完整代码: 总结 正文 大家好,在这篇文章中,我们将学习如何添加动画,同时从一个页面到其他在 Flutter.我们将覆盖不同类型的动画和实现基本动画 Flutter 使用包页动画过渡. 动画在提升用户体验方面起着至关重要的作用,但动画到底是什么呢? 设计语言,例如 Material,定义了在路线(或屏幕)之间转换时的

  • Flutter之 ListView组件使用示例详解

    Flutter之 ListView组件使用示例详解

    目录 ListView的默认构造函数定义 默认构造函数 ListView.builder ListView.separated 固定高度列表 ListView 原理 实例:无限加载列表 添加固定列表头 总结 ListView的默认构造函数定义 ListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持列表项懒加载(在需要时才会创建).我们看看ListView的默认构造函数定义: ListView({ ... //可滚动widget公共参数 Axis scrollD

  • Android Flutter绘制有趣的 loading加载动画

    Android Flutter绘制有趣的 loading加载动画

    目录 前言 效果1:圆环内滚动的球 效果2:双轨运动 效果3:钟摆运动 总结 前言 在网络速度较慢的场景,一个有趣的加载会提高用户的耐心和对 App 的好感,有些 loading 动效甚至会让用户有想弄清楚整个动效过程到底是怎么样的冲动.然而,大部分的 App的 loading 就是下面这种千篇一律的效果 —— 俗称“转圈”. 本篇我们利用Flutter 的 PathMetric来玩几个有趣的 loading 效果. 效果1:圆环内滚动的球 如上图所示,一个红色的小球在蓝色的圆环内滚动,而且在往

  • Flutter控制组件显示和隐藏三种方式详解

    目录 方式一:if语句控制 方式二:Offstage组件 方式三: Visibility Offstage和Visibility的区别: 方式一:if语句控制 // 例如: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if(a=="显示") Text("显示"), Offstage( offstage: false, child: Text("显示"), ),

  • Android Flutter实现搜索的三种方式详解

    目录 示例 1 :使用搜索表单创建全屏模式 编码 示例 2:AppBar 内的搜索字段(最常见于娱乐应用程序) 编码 示例 3:搜索字段和 SliverAppBar 编码 结论 示例 1 :使用搜索表单创建全屏模式 我们要构建的小应用程序有一个应用程序栏,右侧有一个搜索按钮.按下此按钮时,将出现一个全屏模式对话框.它不会突然跳出来,而是带有淡入淡出动画和幻灯片动画(从上到下).在圆形搜索字段旁边,有一个取消按钮,可用于关闭模式.在搜索字段下方,我们会显示一些搜索历史记录(您可以添加其他内容,如建

  • Python图片存储和访问的三种方式详解

    Python图片存储和访问的三种方式详解

    目录 前言 数据准备 一个可以玩的数据集 图像存储的设置 LMDB HDF5 单一图像的存储 存储到 磁盘 存储到 LMDB 存储 HDF5 存储方式对比 多个图像的存储 多图像调整代码 准备数据集对比 单一图像的读取 从 磁盘 读取 从 LMDB 读取 从 HDF5 读取 读取方式对比 多个图像的读取 多图像调整代码 准备数据集对比 读写操作综合比较 数据对比 并行操作 前言 ImageNet 是一个著名的公共图像数据库,用于训练对象分类.检测和分割等任务的模型,它包含超过 1400 万张图像

  • Pandas保存csv数据的三种方式详解

    Pandas保存csv数据的三种方式详解

    目录 方法一 方法二 方法三 补充 方法一 import os import pandas as pd path = 'data/train/' img_label_list=[] testList = os.listdir(path) for file in testList: label='aa' img_label_list.append([file, label]) df1 = pd.DataFrame(data=img_label_list, columns=['id', 'label

  • Python绘制散点密度图的三种方式详解

    Python绘制散点密度图的三种方式详解

    目录 方式一 方式二 方式三 方式一 import matplotlib.pyplot as plt import numpy as np from scipy.stats import gaussian_kde from mpl_toolkits.axes_grid1 import make_axes_locatable from matplotlib import rcParams config = {"font.family":'Times New Roman',"fo

  • Python写入MySQL数据库的三种方式详解

    Python写入MySQL数据库的三种方式详解

    目录 场景一:数据不需要频繁的写入mysql 场景二:数据是增量的,需要自动化并频繁写入mysql 方式一 方式二 总结 大家好,Python 读取数据自动写入 MySQL 数据库,这个需求在工作中是非常普遍的,主要涉及到 python 操作数据库,读写更新等,数据库可能是 mongodb. es,他们的处理思路都是相似的,只需要将操作数据库的语法更换即可. 本篇文章会给大家分享数据如何写入到 mysql,分为两个场景,三种方式. 场景一:数据不需要频繁的写入mysql 使用 navicat 工

  • Java实现AOP代理的三种方式详解

    Java实现AOP代理的三种方式详解

    目录 1.JDK实现 2.CGLIB实现 3.boot注解实现[注意只对bean有效] 业务场景:首先你有了一个非常好的前辈无时无刻的在“教育”你.有这么一天,它叫你将它写好的一个方法进行改进测试,这时出现了功能迭代的情况.然后前辈好好“教育”你的说,不行改我的代码!改就腿打折!悲催的你有两条路可走,拿出你10年跆拳道的功夫去火拼一波然后拍拍屁股潇洒走人,要么就是悲催的开始百度...这时你会发现,我擦怎么把AOP代理这种事给忘了?[其实在我们工作中很少去手写它,但是它又是很常见的在使用(控制台日

  • Tensorflow 2.4加载处理图片的三种方式详解

    目录 前言 数据准备 使用内置函数读取并处理磁盘数据 自定义方式读取和处理磁盘数据 从网络上下载数据 前言 本文通过使用 cpu 版本的 tensorflow 2.4 ,介绍三种方式进行加载和预处理图片数据. 这里我们要确保 tensorflow 在 2.4 版本以上 ,python 在 3.8 版本以上,因为版本太低有些内置函数无法使用,然后要提前安装好 pillow 和 tensorflow_datasets ,方便进行后续的数据加载和处理工作. 由于本文不对模型进行质量保证,只介绍数据的加

  • 在Android TextView中显示图片的4种方式详解

    在Android TextView中显示图片的4种方式详解

    我们知道,TextView控件一般是用来显示文本的,而图片一般是用ImageView控件来显示. 那TextView能否显示图片呢?答案是肯定的!下面列出常见的4种方式. 1.XML文件中指定属性值 这种方式应该是最常用的了,在TextView的左上右下显示图片,可用  android:drawableLeft  android:drawableTop  android:drawableRight  android:drawableBottom 比如我们要在TextView的顶部设置图片,代码如

  • CodeIgniter中使用cookie的三种方式详解

    cookie在php程序设计中应用十分广泛,本文所述CodeIgniter中使用cookie主要有以下三种方式,读者可以根据自身项目需求酌情采用. 第一种方式:采用php原生态的方法设置的cookie的值 setcookie("user_id",$user_info['user_id'],86500); setcookie("username",$user_info['username'],86500); setcookie("password"

随机推荐