视频直播系统源码,Flutter Hero 实现共享元素转场动画
1 未使用Hero时的页面切换
列表页面
class ListPage extends StatefulWidget {
const ListPage({Key? key}) : super(key: key);
@override
State<StatefulWidget> createState() => _ListPageState();
}
class _ListPageState extends State<ListPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('列表页'), centerTitle: true),
body: GridView.count(
crossAxisCount: 2,
children: List.generate(10, _buildItem),
),
);
}
Widget _buildItem(int index) {
return CupertinoButton(
padding: EdgeInsets.zero,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => DetailPage(index: index)),
);
},
child: _buildImageWidget(index),
);
}
// 列表页的Image size是120
Widget _buildImageWidget(int index) {
return const FlutterLogo(size: 120);
}
}
2 使用Hero实现的转场动画
实现Widget切换页面时飞到下一页的动画,使用Hero Widget包裹列表与详情页的图片Widget,并设置相同的tag即可。
修改 _buildImageWidget,使用Hero包裹FlutterLogo,并传入唯一的tag。
列表页
// 列表页的Image size是120
Widget _buildImageWidget(int index) {
// 同一页面的hero不能有多个相同tag
return Hero(
tag: 'hero_tag_$index',
child: const FlutterLogo(size: 120),
);
}
详情页
// 详情页的Image size是250
Widget _buildImageWidget(int index) {
return Hero(
tag: 'hero_tag_$index',
child: const FlutterLogo(size: 250),
);
}
以上就是视频直播系统源码,Flutter Hero 实现共享元素转场动画, 更多内容欢迎关注之后的文章
标签:index,Widget,Hero,动画,tag,源码,Flutter,size From: https://www.cnblogs.com/yunbaomengnan/p/16715513.html