当前位置：首页 > news >正文

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

news 2025/9/18 13:26:05

使用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)),
],
)
)
);
}
}