Flutter Widgets 之 AnimatedContainer
时间:2022-07-24
本文章向大家介绍Flutter Widgets 之 AnimatedContainer,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
老
孟
一个
有态度
的程序员
Flutter中很多用于动画的控件,这篇文章介绍动画控件AnimatedContainer,我们可以通俗的理解AnimatedContainer是带动画功能的Container,关于Container的详细介绍可以查看Flutter Widgets 之 Container,这篇详细介绍了Container的用法。
AnimatedContainer只需要提供动画开始值和结束值,它就会动起来并不需要我们主动调用setState方法。
变化AnimatedContainer的宽高实现变大的效果,代码如下:
bool click = false;
@override
Widget build(BuildContext context) {
return Center(
child: GestureDetector(
onTap: () {
setState(() {
click = !click;
});
},
child: AnimatedContainer(
height: click ? 200 : 100,
width: click ? 200 : 100,
color: Colors.blue,
duration: Duration(seconds: 3),
),
),
);
}
效果如下:
动画不仅可以作用在宽高上,还可以作用在颜色、边界、边界圆角半径、背景图片、形状等。
AnimatedContainer有2个必须的参数,一个时长duration,动画执行的时长,另一个是动画曲线curve,默认是线性,系统为我们提供了很多动画曲线(加速、减速等),设置动画曲线代码如下:
AnimatedContainer(
curve: Curves.bounceIn,
...
)
如果想在动画执行结束时做一些事情,需要设置onEnd,代码如下:
AnimatedContainer(
onEnd: (){
...
}
}
实战
将图片放大并过度到圆形,动画执行结束后在反向执行动画,如此反复,代码如下:
AnimatedContainer(
height: click ? 200 : 100,
width: click ? 200 : 100,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.all(Radius.circular(
click ? 200 : 0,
))),
duration: Duration(seconds: 3),
curve: Curves.linear,
onEnd: (){
setState(() {
click = !click;
});
},
)
动画效果:
- WCF后续之旅(16): 消息是如何分发到Endpoint的--消息筛选(Message Filter)
- 最高大上的展览!腾讯建了一个小“方盒子”,里面全是高科技
- Blend基础-布局控件
- Spring实战——缓存
- Nodejs学习笔记(十二)--- 定时任务(node-schedule)
- Spring实战——缓存
- Spring实战——缓存
- 今天,微信紧急发布小程序最强入口!这3项新能力堪称年度豪礼!
- Python基础知识梳理-第01部分
- 卷积神经网络之卷积操作
- Silverlight体积优化
- 江湖秘笈:说烦了破解、渗透等,不如大家一起聊聊硬盘加密?
- Nodejs学习笔记(十三)— PM2
- 十分钟带你了解服务化框架
- 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 数组属性和方法
- 简直骚操作,ThreadLocal还能当缓存用
- 品优购(IDEA版)-第一天
- 品优购(IDEA版)-第二天
- 品优购第四天
- 深度学习框架OneFlow的并行特色(附框架源码和教程)
- 图解Java设计模式
- python 如何解决 No module named ‘pip‘问题
- 用多智能体强化学习算法MADDPG解决"老鹰捉小鸡"问题
- 网站日志实时分析之Flink处理实时热门和PVUV统计
- 大数据量下的集合过滤—Bloom Filter
- 实时数仓链路分享:kafka =>SparkStreaming=>kudu集成kerberos
- rocketmq broker启动报错,找不到或无法加载主类
- 视频监控联网RTSP平台EasyNVR用户管理权限与实际权限不匹配,该如何排查?
- 2020CHINC,来赴一场“共建智慧医院”的约会
- 《闲扯Redis十》Redis 跳跃表的结构实现