Flutter學習- hero組件

 Flutter中的hero是一種特殊的動畫切換效果，它使得兩個不同的widget之間的跳轉看起來更像是一個動畫。它可以讓用戶在不同頁面之間快速切換中顯現一個簡單的動畫效果。

操作的方法就是在不同的頁面放置相同的tag標籤的Hero，另外在外面包著GestureDetector、Inwell或是其它類型可點擊的元件，並在其function，利用Navigator.push()、Navigator.php()進行頁面切換。

第一個

Hero( tag: "heroTag", child: Image.asset("assets/image2.png"), ),

第一個

Hero( tag: "heroTag", child: Image.asset("assets/image2.png"), ),

如以下範例:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    //讓整個頁面的動畫時間慢五倍
    timeDilation = 5.0;
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('測試Hero'),
      ),
      body: Center(
        //點選事件監聽
        child: InkWell(
          onTap: () {
            Navigator.push(
              context,
              //到Mytag這一個路由
              MaterialPageRoute(builder: (context) => Mytag()),
            );
          },
          //於此處設置hero
          child: Hero(tag: 'mytag', child: Text('456')),
        ),
      ),
    );
  }
}

class Mytag extends StatefulWidget {
  const Mytag({Key? key}) : super(key: key);

  @override
  State<Mytag> createState() => _MytagState();
}

class _MytagState extends State<Mytag> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('測試Hero'),
      ),
      body: Align(
        alignment: Alignment.centerRight,
        //點選事件監聽
        child: InkWell(
            onTap: () {
              //返回上一個路由
              Navigator.pop(context);
            },
            child: Hero(tag: 'mytag', child: Text('123'))),
      ),
    );
  }
}