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

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

在那个页面上，我有一个容器，它显示了关于网格磁贴的信息

我想要的是让容器位于网格视图的顶部，而不是另一个页面

我怎么能把它打成那样？如果可能的话，我宁愿保留英雄动画。

---

您可以使用自定义对话框：-

onPressed: () {
        showDialog(
            context: context,
            builder: (_) => Center(
          child: RaisedButton(
            child: Text("Show dialog"),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return Dialog(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40)),
                    elevation: 16,
                    child: Container(
                      height: 400.0,
                      width: 360.0,
                      child: ListView(
                        children: <Widget>[
                          SizedBox(height: 20),
                          Center(
                            child: Text(
                              "Leaderboard",
                              style: TextStyle(fontSize: 24, color: Colors.blue, fontWeight: FontWeight.bold),
                            ),
                          ),
                          SizedBox(height: 20),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 1", score: 1000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 2", score: 2000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 3", score: 3000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 4", score: 4000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 5", score: 5000),
                          _buildName(imageAsset: 'assets/chocolate.jpg', name: "Name 6", score: 6000),
                        ],
                      ),
                    ),
                  );
                },
              );
            },
          ),
        ),
        );
    }
    
    
    Widget _buildName({String imageAsset, String name, double score}) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20.0),
        child: Column(
          children: <Widget>[
            SizedBox(height: 12),
            Container(height: 2, color: Colors.redAccent),
            SizedBox(height: 12),
            Row(
              children: <Widget>[
                CircleAvatar(
                  backgroundImage: AssetImage(imageAsset),
                  radius: 30,
                ),
                SizedBox(width: 12),
                Text(name),
                Spacer(),
                Container(
                  padding: EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                  child: Text("${score}"),
                  decoration: BoxDecoration(
                    color: Colors.yellow[900],
                    borderRadius: BorderRadius.circular(20),
                  ),
                ),
              ],
            ),
          ],
        ),
      );
    }

onPressed:（）{
显示对话框(
上下文：上下文，
建筑商：（）=>中心(
孩子：升起按钮(
子项：文本（“显示对话框”），
已按下：（）{
显示对话框(
上下文：上下文，
生成器：（上下文）{
返回对话框(
形状：RoundedRectangleBorder（borderRadius:borderRadius.circular（40）），
海拔：16，
子：容器(
高度：400.0，
宽度：360.0，
子：ListView(
儿童：[
尺寸箱（高度：20），
居中(
子：文本(
“排行榜”，
样式：TextStyle（fontSize:24，颜色：Colors.blue，fontWeight:fontWeight.bold），
),
),
尺寸箱（高度：20），
_buildName（imageAsset:'assets/chocolate.jpg'，name:'name 1'，分数：1000），
_buildName（imageAsset:'assets/chocolate.jpg'，name:'name 2'，分数：2000），
_buildName（imageAsset:'assets/chocolate.jpg'，name:'name 3'，分数：3000），
_buildName（imageAsset:'assets/chocolate.jpg'，name:'name 4'，分数：4000），
_buildName（imageAsset:'assets/chocolate.jpg'，name:'name 5'，分数：5000），
_buildName（imageAsset:'assets/chocolate.jpg'，name:'name 6'，分数：6000），
],
),
),
);
},
);
},
),
),
);
}
小部件_buildName（{String imageAsset，String name，double score}）{
返回填充(
填充：常量边集。对称（水平：20.0），
子：列(
儿童：[
尺寸箱（高度：12），
容器（高度：2，颜色：Colors.redAccent），
尺寸箱（高度：12），
划船(
儿童：[
圆形(
背景图片：资产评估（imageAsset），
半径：30，
),
尺寸箱（宽度：12），
文本（名称），
垫片（），
容器(
填充：边缘组。对称（垂直：8，水平：20），
子项：文本（“${score}”），
装饰：盒子装饰(
颜色：颜色。黄色[900]，
边界半径：边界半径。圆形（20），
),
),
],
),
],
),
);
}

您应该使用showDialog方法，如下所示：

InkWell(
 child: GridItem(),
 onTap: () {
  showDialog(
   context: context,
     builder: (context) => AlertDialog(
      content: Hero(child: Card(child: YourWidget()))
     ); // you can use SimpleDialog, specify barrier dismissible etc
 },
)

这是关于dialog类的链接

---

关于英雄我不确定，因为我是从头开始写的，但它应该会起作用（ofc附加相同的标签，如果你的小部件已经有了一个，你不需要卡片家长-英雄需要一个实质性的小部件）

我正在发布我最后做的事情，因为它是有效的

@NONSAPP和@Parth建议的方法适用于英雄转换，因为它只适用于页面路由

因此，我找到了另一种显示带有页面路由的类似弹出窗口的方法

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

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: ...

填充显然是为了定位，材质小部件是为了给它提供材质样式和启用的小部件，比如IconButton。为材质小部件提供透明颜色

我这样称呼它：

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

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

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

这是我的结果：

---

然而，真正的解决方案是上面@pskink所建议的。它需要更多的设置和调整，我与供应商有问题

a

popurute

？文档中说：“一种模式路由，它将一个小部件覆盖在当前路由上。”-这与“普通的”

PageRoute

不同，后者被记录为“替代整个屏幕的模式路由”。这似乎是预期的方式。但是在一些尝试错误之后，我的提供者出现了一些问题，所以我将尝试其他方法。显然，这对弹出路由不起作用，我需要覆盖popuproute来创建自定义路由，并使用MaterialWidget的onRouteGenerator属性调用它。然后，提供者混淆了，我得到了一堆错误。好吧，算了吧，

Hero

docs说它只适用于

PageRoute

。这是可行的，但我不能使用Hero，因为它需要页面转换。我明白了，我很高兴你找到了解决方案