首页 > 编程语言 >视频直播系统源码,Flutter Hero 实现共享元素转场动画

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

时间:2022-09-21 14:46:31浏览次数:69  
标签:index Widget Hero 动画 tag 源码 Flutter size

视频直播系统源码,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

相关文章