【自学Flutter】31 Hero 动画的使用

31 Hero 动画的使用

1.源代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("头像"),),
        body: Center(
            child: Builder(builder: (context){
              return Ink(
                child: InkWell(
                  child: Hero(
                    tag: "same",
                    child: ClipOval(
                      child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg", width: 100.0,),
                    ),
                  ),
                  onTap: () {
                    Navigator.push(context, PageRouteBuilder(
                        pageBuilder: (BuildContext context, Animation animation,
                            Animation secondaryAnimation) {
                          return FadeTransition(
                            opacity: animation,
                            child: Second(),
                          );
                        })
                    );
                  },
                ),
              );
            }),
        )
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: Hero(
          tag: "same",
          child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg"),
        ),
      )
    );
  }
}

2.解释源代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("头像"),),
        body: Center(
            child: Builder(builder: (context){
              //使用InkWell无水波纹效果
              return Ink(
                child: InkWell(
                  child: Hero(
                    //唯一标记，前后两个路由页Hero的tag必须相同
                    tag: "same", 
                    child: ClipOval(
                      child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg", width: 100.0,),
                    ),
                  ),
                  onTap: () {
                    //打开Second路由
                    Navigator.push(context, PageRouteBuilder(
                        pageBuilder: (BuildContext context, Animation animation,
                            Animation secondaryAnimation) {
                          return FadeTransition(
                            opacity: animation,
                            child: Second(),
                          );
                        })
                    );
                  },
                ),
              );
            }),
        )
      ),
    );
  }
}

class Second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('第二个页面'),
      ),
      body: Center(
        child: Hero(
          //唯一标记，前后两个路由页Hero的tag必须相同
          tag: "same", 
          child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2615855213,1306490928&fm=26&gp=0.jpg"),
        ),
      )
    );
  }
}

3.效果图