Flutter开发之——动画-过渡动画Hero

一 概述

  • Hero动画又叫过渡动画
  • 过度动画:当用户点击一张图片,切换到另一个页面时,这个页面也有此图

二 Hero

2.1 构造函数

class Hero extends StatefulWidget
const Hero({
    Key? key,
    required this.tag,
    this.createRectTween,
    this.flightShuttleBuilder,
    this.placeholderBuilder,
    this.transitionOnUserGestures = false,
    required this.child,
  })

2.2 常见属性说明

属性说明取值
tag过渡元素组件的标记值Object
createRectTween位置动画Tween<Rect?> Function
flightShuttleBuilder动画过程组件Widget Function
placeholderBuilder占位符组件Widget Function
transitionOnUserGestures使用手势进行专场时,是否显示动画bool

注:2个页面都有Hero控件,且tag参数一致

三 示例

3.1 代码

跳转页面
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
  Widget build(BuildContext context) {
    _getLocalFile();
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          backgroundColor: Colors.orange,
          centerTitle: true,
          //actions: [],
          //leading: Text("左侧组件"),
        ),
		body:Column(children: [
          Hero(tag: "HeroTag", child: Image.asset("images/img_1.jpg",width: 100,height: 100,),),
          RaisedButton(child: Text("跳转"),onPressed: (){
            Navigator.of(context).push(MaterialPageRoute(builder: (context){
              return OtherPage(title: "新页面",);
            }));
          })
        ],),
      )
}
跳转后页面
class OtherPage extends StatefulWidget{
  OtherPage({Key key,this.title}):super(key: key);
  final String title;
  @override
  State<StatefulWidget> createState() =>_OtherPageState();
}
class _OtherPageState extends State<OtherPage>
{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title),),
      body: Hero(tag: "HeroTag", child: Image.asset("images/img_1.jpg",width: 100,height: 100,),),
    );
  }
}

3.2 效果图

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值