[移动开发]Flutter--Hero组件

?有时候想要本页面的某个组件，可以动画过渡到下个页面，就比如Apple music中，底部打音乐图标，在打开播放页时能自己放大过度到播放页的位置，这时候就需要用页面跳转动画和hero组件来配合实现。

注意：hero组件不可以嵌套使用，比如将一个Container标记为hero，那么它的child不可以Hero组件。

import 'package:flutter/material.dart';

const String iconTag = "icon";
const String titleTag = "title";

class HeroAnimationPage extends StatelessWidget {
  const HeroAnimationPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        const Spacer(),
        InkWell(
          child: Container(
            margin: const EdgeInsets.all(16),
            padding: const EdgeInsets.all(4),
            color: Colors.blueAccent,
            child: Row(children: [
              Container(
                width: 50,
                height: 50,
                color: Colors.grey,
              ).hero(iconTag),
              const Text("Title").hero(titleTag)
            ],),
          ),
          onTap: () {
            Navigator.push(context, PageRouteBuilder(pageBuilder: (BuildContext context, animation, secondaryAnimation,) {
                return FadeTransition(
                  opacity: animation,
                  child: const Scaffold(
                    body: HeroTargetPage(),
                  ),
                );
              },
            ));
          },
        )
      ],),
    );
  }
}


class HeroTargetPage extends StatelessWidget {
  const HeroTargetPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(children: [
          Container(color: Colors.red, width: 200, height: 200,).hero(iconTag),
          Row(children: [const Text("Title", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),).hero(titleTag)],  mainAxisAlignment: MainAxisAlignment.center,)
        ], mainAxisAlignment: MainAxisAlignment.spaceAround,),
        color: Colors.blueAccent,
      ),
    );
  }
}

extension WidgetExt on Widget {
  Hero hero(String tag) {
    return Hero(tag: tag, child: this);
  }
}