在 Flutter 中将 Hero 小部件保持在 PageView 页面的顶部？答案

【问题标题】：Keep Hero widget on top of PageView pages in Flutter?在 Flutter 中将 Hero 小部件保持在 PageView 页面的顶部？
【发布时间】：2018-08-17 13:28:09
【问题描述】：

我希望在 PageView 的页面顶部显示一个 Hero 小部件，这样当我滚动页面时，Hero 根本不会移动。

这是我的页面的构建器：

Widget _buildPage({color: Color, icon: Icon, text: String}) {
    return Container(
      padding: const EdgeInsets.only(top: 5.0),
      color: color,
      child: Column(
        children: [
          Expanded(
            flex: 3,
            child: Icon(icon)
          ),
          Expanded(
            flex: 2,
            child: Text(text),
          ),
          Expanded(
            flex: 1,
            child: Hero(
              tag: 'examplehero',
              child: Column(
                children: [
                  Text(...),
                  FlatButton(
                    child: Text(...),
                  ),
                ...

这是我的页面视图：

return PageView(
      children: [
        _buildPage(...),
        _buildPage(...),
        _buildPage(...),
        _buildPage(...),
      ],
    );

目前，当我滚动页面时，英雄小部件就像一个常规小部件一样，并随着页面滚动。如何让它始终显示？

提前致谢

【问题讨论】：

您可以从您的综合浏览量中提取您的英雄，并在顶部显示您的英雄，在下方显示您的浏览量
@diegoveloper 出于某种原因我没有考虑使用堆栈。谢谢！

标签： flutter flutter-layout flutter-animation

【解决方案1】：

这在this SO 上的帖子中得到了回答。

这个包做你想做的https://pub.dev/packages/coast

它本质上采用了与 Flutter 的 Hero 相同的方法，并且 HeroController：检测何时开始转换，搜索小部件的源页面和目标页面的元素树标记为动画（英雄，螃蟹），根据他们的配对标签，最后在 Overlay 中创建一个条目，其位置和 size 是源和目标上的插值页面。

【讨论】：