flutter开发实战-hero动画简单实现

news2024/12/25 8:43:19

flutter开发实战-hero动画简单实现

使用Flutter的Hero widget创建hero动画。 将hero从一个路由飞到另一个路由。 将hero 的形状从圆形转换为矩形,同时将其从一个路由飞到另一个路由的过程中进行动画处理。

Flutter Hero动画 Hero 指的是可以在路由(页面)之间“飞行”的 widget,简单来说 Hero 动画就是在路由切换时,有一个共享的widget 可以在新旧路由间切换。
在这里插入图片描述

在这里插入图片描述

一、实现hero动画

实现当前页面飞行到另一个页面,页面通过Navigator跳转到另一个路由。hero动画需要一个tag,Hero控件的一个标签,用来判定唯一性。

class HeroDemoPage extends StatefulWidget {
const HeroDemoPage({super.key});

@override
State createState() => _HeroDemoPageState();
}

class _HeroDemoPageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“hero page”),
),
body: GestureDetector(
onTap: (){
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HeroSecondPage()),
);
},
child: Center(
child: Hero(
tag: “xx”,
child: Container(
height: 200,
width: 300,
child: Image.network(“https://d-ssl.dtstatic.com/uploads/blog/202204/13/20220413091711_29352.thumb.1000_0.jpg_webp”),
)
)
),
)
);
}
}

飞入另一个路由的界面

class HeroSecondPage extends StatefulWidget {
const HeroSecondPage({super.key});

@override
State createState() => _HeroSecondPageState();
}

class _HeroSecondPageState extends State {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text(“hero预览”),
),
body: GestureDetector(
onTap: (){
Navigator.pop(context);
},
child: Column(
children: [
Hero(
tag: “xx”,
child: Image.network(“https://d-ssl.dtstatic.com/uploads/blog/202204/13/20220413091711_29352.thumb.1000_0.jpg_webp”),
),
const Text(“预览图片”,
style: TextStyle(decoration:TextDecoration.none,
fontSize: 20)),
],
)
)
);
}
}

二、小结

flutter开发实战-hero动画简单实现

学习记录,每天不停进步。

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

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

相关文章

应用在PC机中的低功耗触摸感应芯片

PC机一般指个人计算机。个人计算机是指一种大小、价格和性能适用于个人使用的多用途计算机。台式机、笔记本电脑、小型笔记本电脑、平板电脑以及超级本等都属于个人计算机。计算机的发展主要按照构成计算机的电子元器件来划分,共分为四个阶段,即电子管阶…

作为语雀的深度用户,谈谈语雀崩溃

文章目录 语雀简介语雀不可用接近8小时,我的感受谈谈云端存储的主要缺点其他软件如何解决云端存储的缺点总结 语雀简介 在数字化时代,云端服务扮演着关键的角色,为个人和企业提供了各种在线服务。其中,协作与知识管理工具变得越来…

自考02378《信息资源管理》第一章信息资源管理基础——思维导图

备战2024年04月自考科目02378《信息资源管理》第一章信息资源管理基础 思维导图如下: 以上便是本文的全部内容了,不知道对你有没有帮助呢。 我会认真写好每一篇文章,一直努力下去!

从京东API接口,三个数字,带你认识真正的京东工业

京东工业赴港上市,带着非常优秀的成绩。 招股书显示,2022年实现交易额223亿元,营收141亿元,调整后净利润7亿元。短短六年时间,已成为中国工业供应链技术与服务市场领导者。 京东工业与传统工业品贸易商有何不同&#x…

【2021集创赛】Digilent杯二等奖:基于FPGA的动态视觉感知融合的运动目标检测系统

杯赛题目:Diligent杯:基于FPGA开源软核的硬件加速智能平台 参赛组别:A组 设计任务: 利用业界主流软核处理器(仅限于Cortex-M系列及 RISC-V系列)在限定的DIGILENT官方FPGA平台上构建SoC片上系统,在 SoC中添加面向智能应…

猿辅导发布博物馆新知计划,上线文物科普记录片《文物也有AB面》

博物馆里有什么?文物,可能是大多数人脱口而出的答案。博物馆拥有包罗万象的文物,不仅能够传递知识,提供艺术养分,更有助于青少年增强文化自信和文化传承的使命感。一座博物馆就像一所大学校,一个能够普及知…

lwip多网卡自适应选择

当系统中有多个网卡时,lwip会选择第一个网卡作为默认网卡,ping、tftp、iperf都会选择第一个网卡来进行,没有办法使用第二个网卡(一些命令可以通过-i选项选择网卡,有些命令则没有提供),此时需要修…

NSS [SWPUCTF 2021 新生赛]PseudoProtocols

NSS [SWPUCTF 2021 新生赛]PseudoProtocols 先看题目&#xff0c;题目要求我们先找到hint.php。 看这个get请求头&#xff0c;我们先用php://filter协议读一波 得到提示&#xff0c;让我们前往/test2222222222222.php 源码如下 <?php ini_set("max_execution_time&qu…

Excel怎么合并单元格?这4个方法很简单!

“有没有朋友知道Excel合并单元格应该怎么操作呀&#xff1f;在制作工作报表中&#xff0c;需要对Excel单元格进行合并操作&#xff0c;但是我不太熟悉详细的操作&#xff0c;希望大家帮帮我&#xff01;” 在Excel中&#xff0c;合并单元格是一项常用的操作&#xff0c;用于改…

【Docker】Dockerfile使用技巧

开启Buildkit BuildKit是Docker官方社区推出的下一代镜像构建神器&#xff0c;可以更加快速&#xff0c;有效&#xff0c;安全地构建docker镜像。 尽管目前BuildKit不是Docker的默认构建工具&#xff0c;但是完全可以考虑将其作为Docker&#xff08;v18.09&#xff09;的首选…

基本的爬虫工作原理

爬虫是一种自动化程序&#xff0c;能够模拟人类的浏览行为&#xff0c;从网络上获取数据。爬虫的工作原理主要包括网页请求、数据解析和数据存储等几个步骤。本文将详细介绍爬虫的基本工作原理&#xff0c;帮助读者更好地理解和应用爬虫技术。 首先&#xff0c;爬虫的第一步是…

CTFHub-SSRF-读取伪协议

WEB攻防-SSRF服务端请求&Gopher伪协议&无回显利用&黑白盒挖掘&业务功能点-CSDN博客 伪协议有&#xff1a; file:/// — 访问本地文件系统 http:/// — 访问 HTTP(s) 网址 ftp:/// — 访问 FTP(s) URLs php:/// — 访问各个输入/输出流(I/O streams) dic…

NSS [NCTF 2018]滴!晨跑打卡

NSS [NCTF 2018]滴!晨跑打卡 很明显是sql注入 输入一个1&#xff0c;语句直接显示了&#xff0c;非常的真诚和坦率 简单尝试了一下&#xff0c;发现有waf&#xff0c;过滤了空格 拿burp跑一下fuzz&#xff0c;看看有多少过滤 过滤了# * - 空格那我们无法通过#或者–来注释掉…

如何在 Azure 容器应用程序上部署具有 Elastic Observability 的 Hello World Web 应用程序

作者&#xff1a;Jonathan Simon Elastic Observability 是提供对正在运行的 Web 应用程序的可见性的最佳工具。 Microsoft Azure 容器应用程序是一个完全托管的环境&#xff0c;使你能够在无服务器平台上运行容器化应用程序&#xff0c;以便你的应用程序可以扩展和缩减。 这使…

华为云 CodeArts Snap 智能编程助手 PyCharm 插件安装与使用指南

1 插件安装下载 1.1 搜索插件 打开 PyCharm&#xff0c;选择 File&#xff0c;点击 Settings。 选择 Plugins&#xff0c;点击 Marketplace&#xff0c;并在搜索框中输入 Huawei Cloud CodeArts Snap。 1.2 安装插件 如上图所示&#xff0c;点击 Install 按钮安装 Huawei Cl…

C#调用C/C++从零深入讲解

C#调用非托管DLL从零深入讲解 一、结构对齐 结构对齐是C#调用非托管DLL的必备知识。 在没有#pragma pack声明下结构体内存对齐的规则为: 第一个成员的偏移量为0,每个成员的首地址为自身大小的整数倍子结构体的第一个成员偏移量应当是子结构体最大成员的整数倍结构体总大小…

内衣洗衣机和手洗哪个干净?内衣洗衣机热销第一名

这两年内衣洗衣机可以称得上较火的小电器&#xff0c;小小的身躯却有大大的能力&#xff0c;一键可以同时启动洗、漂、脱三种全自动为一体化功能&#xff0c;在多功能和性能的提升上&#xff0c;还可以解放我们双手的同时将衣物给清洗干净&#xff0c;让越来越多小伙伴选择一款…

【深度学习 | 核心概念】那些深度学习路上必经的 常见问题解决方案及最佳实践,确定不来看看? (一)

&#x1f935;‍♂️ 个人主页: AI_magician &#x1f4e1;主页地址&#xff1a; 作者简介&#xff1a;CSDN内容合伙人&#xff0c;全栈领域优质创作者。 &#x1f468;‍&#x1f4bb;景愿&#xff1a;旨在于能和更多的热爱计算机的伙伴一起成长&#xff01;&#xff01;&…

UserWarning: CUDA initialization: CUDA unknown error

CUDA在suspend之后不可用问题 问题描述 一觉醒来&#xff0c;电脑cuda不可用 /home/你的电脑/pytorch/lib/python3.8/site-packages/torch/cuda/__init__.py:107: UserWarning: CUDA initialization: CUDA unknown error - this may be due to an incorrectly set up enviro…

Java11安装

Java11安装 打开官网 登录使用的账号密码可以用下面这个&#xff1a; 账户&#xff1a;3028064308qq.com 密码&#xff1a;OraclePassword123! 然后打开环境变量 系统变量下新建一个变量 在path路径中也新添两条 参考博文 Windows下安装JDK11&#xff08;详细版&#xf…