Flutter Widgets 之 Opacity 和AnimatedOpacity
时间:2022-07-24
本文章向大家介绍Flutter Widgets 之 Opacity 和AnimatedOpacity,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
老
孟
一个
有态度
的程序员
Flutter中移除一个控件非常容易,只需要在重新创建中移除即可,如果想要移除控件同时它的位置依然保留,类似于Android中View的invisible,比如Row中有3个颜色块,分别为1、2、3,代码如下:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: 80,
width: 80,
color: Colors.red,
alignment: Alignment.center,
child: Text('1',style: TextStyle(color: Colors.white),),
),
Container(
height: 80,
width: 80,
color: Colors.green,
alignment: Alignment.center,
child: Text('2',style: TextStyle(color: Colors.white),),
),
Container(
height: 80,
width: 80,
color: Colors.blue,
alignment: Alignment.center,
child: Text('3',style: TextStyle(color: Colors.white),),
),
],
)
效果如下:
这时想要移除2,同时还保留2的位置,可以使用Opacity控件实现,代码如下:
Opacity(
opacity: 0.0,
child: Container(
height: 80,
width: 80,
color: Colors.green,
alignment: Alignment.center,
child: Text('2',style: TextStyle(color: Colors.white),),
),
)
效果如下:
使用Opacity控件和另一个控件层叠在一起,将会出现“蒙层效果”:
Stack(
children: <Widget>[
Image.network(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582204321233&di=ac7e8572222e1781cef5ad3add4daead&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn15%2F275%2Fw640h435%2F20181010%2Fcaba-hkrzvkw4936632.jpg',
),
Positioned.fill(
child: Opacity(
opacity: 0.5,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.blue],
begin: Alignment.bottomCenter,
end: Alignment.topCenter),
),
),
),
),
],
)
效果如下:
甚至我们可以使用AnimatedOpacity控件实现动画效果:
bool click = false;
AnimatedOpacity(
onEnd: () {
setState(() {
click = !click;
});
},
duration: Duration(seconds: 3),
opacity: click ? 0.2 : 0.8,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.white, Colors.grey],
),
),
),
)
动画效果:
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue+SpringBoot项目实战(一) 搭建环境
- kubernetes(十九) Ceph存储入门
- Java并发编程(8)- 应用限流及其常见算法
- 字符集其实很简单
- kubernetes(二十)SpringCloud微服务容器化迁移
- HashMap? ConcurrentHashMap? 相信看完这篇没人能难住你!
- kubernetes(七) 二进制部署k8s(1.18.4版本)
- Java并发编程(7)- 线程调度 - 线程池
- Java并发编程(6)- J.U.C组件拓展
- Java并发编程(5)- J.U.C之AQS及其相关组件详解
- Python+selenium 自动化-启用带插件的chrome浏览器,调用浏览器带插件,浏览器加载配置信息。
- Java并发编程(4)- 线程安全策略
- Java并发编程(3)- 如何安全发布对象
- Python 技术篇-3行代码实现语音朗读,pywin32库实现语音朗读
- Java并发编程(2)- 线程安全性详解