时间戳

首页 > 解决方案 > 如何显示像弹出窗口这样的小部件

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

问题描述

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

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

我想要的是让该容器位于网格视图之上，而不是成为不同的页面。

我怎么能这样弹出它？如果可能的话，我宁愿保留英雄动画。 网格

容器

标签： flutter

解决方案

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

@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，因为我在另一条路线上。

这是我的结果：

结果

然而，真正的解决方案是上面@pskink 建议的。它需要更多的设置和调整，而且我遇到了 Providers 的问题。这是您如何实现它的方法

推荐阅读