flutter - 如何像弹出窗口一样显示小部件

Question

目前，我有一个 GridView 。当我点击它时，我会使用英雄小部件导航到另一个页面。

在该页面上，我只有一个容器来显示有关该网格图 block 的信息。

我想要的是让该容器出现在 GridView 的顶部，而不是成为一个不同的页面。

我怎样才能弹出它呢？如果可能的话，我宁愿保留英雄动画。

Answer 1

我发布了我最终所做的，因为它有效。

@Nonstapp 和@Parth 建议的内容除了 Hero 转换外都有效，因为它仅适用于 PageRoutes。

因此我找到了另一种使用 PageRoute 显示类似弹出窗口的方法。

我正在显示的信息小部件:

return Padding(
  padding: EdgeInsets.fromLTRB(
      MediaQuery.of(context).size.width / 8,
      MediaQuery.of(context).size.height / 4,
      MediaQuery.of(context).size.width / 8,
      0),
  child: Material(
    color: Colors.transparent,
    child: ...

padding 显然是为了定位，而 Material 小部件是为其提供 Material 样式和启用的小部件，如 IconButton。为 Material 小部件指定透明颜色。

我是这样调用它的:

void seeDetails(BuildContext context, Book book) {
    Navigator.push(
      context,
      PageRouteBuilder(
        fullscreenDialog: true,
        opaque: false,
        pageBuilder: (_, __, ___) => ChangeNotifierProvider.value(
          value: book,
          child: DetailCard(),
        ),
      ),
    );
  }

我使用 PageRouter 显示全屏对话框，但由于我在那里的设置，只有信息卡可见。

缺点是我无法启用 barrierDismissible，因为我在另一条 atm 路线上。

这是我的结果:

然而，真正的解决方案是上面@pskink 所建议的。它需要更多的设置和调整，而且我在 Providers 方面遇到了问题。 Here is how you can implement it