【译】flutter中如何较好地实现隐藏和显示widget
通常情况下,显示有四种情况:
1、(visible)显示
2、(invisible)隐藏:
这种隐藏是指在屏幕中占据空间,只是没有显示。这种情况出现场景如:用带有背景色的Container Widget去包含一个不可见的Image,当从网络中加载图片后才让它显示,这是为了避免图片显示后让页面布局改变发生跳动。
3、(Offscreen)超出屏幕,同样占据空间
4、(Gone)消失:
这种是指Widget没有被rendered,不存在于wedget tree中
考虑到显示隐藏带来的代价,所以我们在控制显示隐藏最好的起始出发点是不要让widget出现在wedget tree中。
伪代码如下:
List<Widge> views = []
if(shouldBeIncluded) {
views.add(myView);
}
// use views later
当决定使用哪种方式时,应该考虑一下几个问题:
1、该widget是否只显示一次,譬如在app启动的时候,这时应该使用第四种,即Gone方式
2、是否需要让该widget一直占据空间或者当该widget隐藏是否会影响其他widget?如果是的或可以使用第二种,即invisible。
3、当该widget不可见的时候,在计算大小的时候是否依然计算该widget?是的话用第三种,及Offscreen
总结以上,示例代码如下:
import 'package:flutter/widgets/dart';
import 'package:meta/meta.dart'; enum VisibilityFlag {
visible,
invisible,
offscreen,
gone,
} class Visibility extends StatelessWidget {
final Visibility visibility;
final Widget child;
final Widget removeChild; Visibility({
@retuired this.child,
@required this.visibility,
}) : this.removeChild = Container(); @override
Widget build(BuildContext context) {
if(visibility == VisibilityFlag.visible) {
return child;
}else if(visibility == VisibilityFlag.invisible) {
return new IgnorePointer(
ignoring: true,
child: new Opacity(
opcity: 0.0,
child: child
)
);
}else if(visibility == VisibilityFlag.offscreen) {
return new Offstage(
offstage: true,
child: child
);
}else{
return removeChild;
}
}
}
以上代码的解释如下:
1、对于visible: 什么也不做
2、对于Invisible: 用IgnorePointer 和Opacity widget包裹,并将opacity的值设置为0
3、对于offscreen:用Offstage widget包裹使得widget在屏幕外显示
4、直接返回没有大小初始值container widget,可以根据需要自行更改另外的widget
【译】flutter中如何较好地实现隐藏和显示widget的更多相关文章
- 从 QSplitter 中移除 QWidget(使用隐藏与显示,切换十分方便,不要真正销毁)
Splitter 的函数中有addWidget,但是却没有removeWidget, 或者delete之类的功能,所以如果想删去或者暂时不显示其中的某些widget就要自己手动完成这个效果.方法一:取 ...
- [译]Flutter JSON和序列化
[译]Flutter JSON和序列化 很难想象一个移动应用程序不需要与Web服务器通信或在某些时候容易存储结构化数据.制作网络连接的应用程序时,迟早需要消耗一些好的旧JSON. 本指南介绍了如何 ...
- 在Flutter中嵌入Native组件的正确姿势是...
引言 在漫长的从Native向Flutter过渡的混合工程时期,要想平滑地过渡,在Flutter中使用Native中较为完善的控件会是一个很好的选择.本文希望向大家介绍AndroidView的使用方式 ...
- 从零学习Fluter(五):Flutter中手势滑动拖动已经网络请求
从六号开始搞Flutter,到今天写这篇blog已经过了4天时间,文档初步浏览了一遍,写下了这个demo.demo源码分享在github上,现在对flutter有种说不出的喜欢了.大家一起搞吧! 废话 ...
- Flutter 中 JSON 解析
本文介绍一下Flutter中如何进行json数据的解析.在移动端开发中,请求服务端返回json数据并解析是一个很常见的使用场景.Android原生开发中,有GsonFormat这样的神器,一键生成Ja ...
- mvp 在 flutter 中的应用
在 Android 应用程序开发过程中,我们经常会用到一些所谓的架构方法,如:mvp,mvvm,clean等.之所以这些方法会被推崇是因为他们可以大大的解耦我们的代码的功能模块,让我们的代码在项目中后 ...
- Flutter 中文文档网站 flutter.cn 正式发布!
在通常的对 Flutter 介绍中,最耳熟能详的是下面四个特点: 精美 (Beautiful):充分的赋予和发挥设计师的创造力和想象力,让你真正掌控屏幕上的每一个像素. ** 极速 (Fast)**: ...
- 理解 Flutter 中的 Key
概览 在 Flutter 中,大概大家都知道如何更新界面视图: 通过修改 Stata 去触发 Widget 重建,触发和更新的操作是 Flutter 框架做的. 但是有时即使修改了 State,Flu ...
- flutter 中的样式
flutter 中的样式 样式 值 width 320.0 height 240.0 color Colors.white,Colors.grey[300] textAlign TextAlign.c ...
随机推荐
- MYSQL_Join注入技巧
Join注入技巧 join无名列报错注入 约束条件 在知到表名的前提下才能操作 注入语句 and extractvalue(1,concat(0x7e,(select * from (select * ...
- SELECT SQL
替换换行符: update qgnews set article_url=REPLACE(article_url,char(10),'') 替换回车符: update qgnews set artic ...
- Long类型框架自动序列化成String失效问题排查
目录 问题描述 猜想 1. 写错了 2. 重新使用 验证猜想 1.验证猜想 2.继续猜想 3.再次猜想 4.再次验证 5.疑惑 6.找到原因,解决疑惑 7.解决 问题描述 微服务架构下进行业务模块开发 ...
- 【LeetCode】724. 寻找数组的中心下标
724. 寻找数组的中心下标 知识点:数组:前缀和: 题目描述 给你一个整数数组 nums ,请计算数组的 中心下标 . 数组 中心下标 是数组的一个下标,其左侧所有元素相加的和等于右侧所有元素相加的 ...
- Python+pytest知识点回顾
pip install pytest pytest 单元测试框架 pytest高于unittest测试框架 unittest测试类需要继承unittest.TestCase类 pytest不需要继承, ...
- Appium - adb命令操作
1.Android 调试桥adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信.它可为各种设备操作提供便利,如安装和调 ...
- 虚拟机安装RHEL8.0.0
在VMware Workstations 15.0.0中安装RHEL8.0.0 使用到的软件和主机基本配置 此处宿主机基本硬件配置:i3-7100U 4核,内存:12G 虚拟化软件:VMware Wo ...
- odoo14里面的log模块
日志记录是分析 Odoo 服务器运行服务时发生的操作的最重要工具之一.此外,在大多数情况下,通过分析服务器日志,我们可以清楚地了解错误或存在的任何错误. 最初,如果我们想使用日志记录选项,我们需要从 ...
- odoo里的javascript学习---自定义插件
插件效果图 定义js odoo.define('auto_widget',function(require){ "use strict"//通过扩展AbstractField来扩展 ...
- 利用docker-compose快速部署测试用数据库服务器
起因 开发中经常需要快速部署一台随用随关的数据库服务器,如mysql,oracle,mongodb,elastic-search 尝试 一直觉得docker特别方便,加上docker-compose. ...