视频直播系统源码，Flutter Hero 实现共享元素转场动画

1 未使用Hero时的页面切换

列表页面

<br>class ListPage extends StatefulWidget {<br>  const ListPage({Key? key}) : super(key: key);<br>  @override<br>  State<StatefulWidget> createState() => _ListPageState();<br>}<br>class _ListPageState extends State<ListPage> {<br>  @override<br>  Widget build(BuildContext context) {<br>    return Scaffold(<br>      appBar: AppBar(title: const Text('列表页'), centerTitle: true),<br>      body: GridView.count(<br>        crossAxisCount: 2,<br>        children: List.generate(10, _buildItem),<br>      ),<br>    );<br>  }<br>  Widget _buildItem(int index) {<br>    return CupertinoButton(<br>      padding: EdgeInsets.zero,<br>      onPressed: () {<br>        Navigator.of(context).push(<br>          MaterialPageRoute(builder: (context) => DetailPage(index: index)),<br>        );<br>      },<br>      child: _buildImageWidget(index),<br>    );<br>  }<br>  // 列表页的Image size是120<br>  Widget _buildImageWidget(int index) {<br>    return const FlutterLogo(size: 120);<br>  }<br>}

2 使用Hero实现的转场动画

实现Widget切换页面时飞到下一页的动画，使用Hero Widget包裹列表与详情页的图片Widget，并设置相同的tag即可。

修改 _buildImageWidget，使用Hero包裹FlutterLogo，并传入唯一的tag。

列表页

<br>  // 列表页的Image size是120<br>  Widget _buildImageWidget(int index) {<br>    // 同一页面的hero不能有多个相同tag<br>    return Hero(<br>      tag: 'hero_tag_$index',<br>      child: const FlutterLogo(size: 120),<br>    );<br>  }

详情页

<br>  // 详情页的Image size是250<br>  Widget _buildImageWidget(int index) {<br>    return Hero(<br>      tag: 'hero_tag_$index',<br>      child: const FlutterLogo(size: 250),<br>    );<br>  }

以上就是视频直播系统源码，Flutter Hero 实现共享元素转场动画，更多内容欢迎关注之后的文章