Flutter 学习笔记 16 - Hero 动画

类似 Android 的转场动画。

将两个页面都要显示的 Widget 用 Hero 这个 Widget 包裹一层。

Hero(
  tag: 'imageHero',
  child: Image.network(
    'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
  ),
);

在两个页面 tag 必须一样，child 是要做动画的内容。

class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
          ),
        ),
        onTap: () {
          Navigator.push(context, MaterialPageRoute(builder: (_) {
            return DetailScreen();
          }));
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}

第一个页面中图片在上边，到了第二个页面，图片到了中间。

修改第二个页面的图片大小

child: Hero(
  tag: 'imageHero',
  child: Container(
    height: 100,
    margin: const EdgeInsets.symmetric(horizontal: 10.0),
    child: Image.network(
      'https://raw.githubusercontent.com/flutter/website/master/src/_includes/code/layout/lakes/images/lake.jpg',
    ),
  )
),

2019_01_05_18_22_01.gif