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

视频直播系统源码，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 实现共享元素转场动画， 更多内容欢迎关注之后的文章