当导航到其他屏幕时，路由抛出异常“在子树中有多个共享相同标签的英雄”。

Question

Expanded(flex: 1, child: GestureDetector(
               onTap: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (context) => ResultPage()
              ));
            },
            child: Container(
              alignment: Alignment.center,
              color: Color(0XFFEB1555),
              child: Text("CALCULATE", style: TextStyle(color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold),),
            ),
          ))

出现异常：

════════ 调度程序库捕获的异常 ══════════════════════════════════════════════ 在调度程序回调期间抛出了以下断言：在一个子树中有多个共享相同标签的英雄。

对于要进行动画处理的每个子树（即PageRoute子树），每个Hero必须具有唯一的非空标签。在这种情况下，多个英雄具有以下标签： 这是其中一个问题英雄的子树： .............................................................

- Arshbir Sandhu

---

你有解决这个问题的办法吗？我也遇到了同样的问题。 - Part_Time_Nerd

这个问题与您的问题类似，请尝试查看那个问题中的答案：https://dev59.com/xFUK5IYBdhLWcg3w4jQv - Achintha Isuru

这个回答解决了你的问题吗？在子树中有多个共享相同标签的英雄 - Michael Ribbons

@MichaelRibbons 您分享的链接中的任何解决方案都对我无效。谢谢。 - Kamlesh

@Kamlesh 我也遇到了同样的问题。你找到解决方法了吗？ - Pro

@Pro 有时候当小部件需要上下文但没有提供所需的上下文时，会显示这种类型的错误。我检查了所有父级和子级小部件的层次结构，并为它们提供了正确的上下文，我的问题得到了解决。谢谢。 - Kamlesh

Answer 1

因为我将几个Dart文件移动到不同的目录中，所以我的问题是由此引起的。这导致了完全相同的问题。

虽然我一直在检查上面给出的解决方案，但没有一个能够帮助我，直到我意识到我需要从“import”中更改Dart文件路径。希望这可以帮助未来的某个人。

- Shashi

Answer 2

我曾经遇到过同样的问题，通过移除手势检测器并使用Inkwell onTap解决了它。

将这个改成：

GestureDetector(
      onTap: () {
        Navigator.of(context, rootNavigator: true).push(
          MaterialPageRoute(
            builder: (context) => ChangeNotifierProvider(
              create: (BuildContext context) {
                ProductViewModel();
              },
              child: ProductDetails(
                product: _shownProduct,
              ),
            ),
          ),
        );
      },
      child: InkWell(
            child: Hero(
              tag: _shownProduct.productID,
              child: CachedNetworkImage(
                fadeInDuration: Duration(milliseconds: 1),
                imageUrl: _shownProduct.images[0],
                imageBuilder: (context, imageProvider) => Container(
                  height: MediaQuery.of(context).size.flipped.height / 3.2,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => CircularProgressIndicator(
                  strokeWidth: 0.5,
                ),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
            ),
          ),

转译为：

InkWell(
            onTap: () {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => ProductDetails(
                    product: _shownProduct,
                  ),
                ),
              );
            },
            child: Hero(
              tag: _shownProduct.productID,
              child: CachedNetworkImage(
                fadeInDuration: Duration(milliseconds: 1),
                imageUrl: _shownProduct.images[0],
                imageBuilder: (context, imageProvider) => Container(
                  height: MediaQuery.of(context).size.flipped.height / 3.2,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(5),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => CircularProgressIndicator(
                  strokeWidth: 0.5,
                ),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
            ),
          ),

它解决了我的问题。

- werux

---

我的整个项目中都没有“FloatingActionButton”，但是当我从子屏幕导航到父屏幕时仍然会出现此错误。请建议我该怎么解决？非常感谢。 - Kamlesh

Answer 3

请确保您没有使用FAB，因为我认为我在我的页面上没有使用FAB，但经过更长时间的分析，我明白我在widget->widget->widget中使用了它，如果您想确定唯一键，则可以使用。

FloatingActionButton(
                  heroTag: generateRandomString(5),
                    backgroundColor: MyColors.shineBlueColor,
                    onPressed: () {
                   
                    },
                    label: Text(
                      "text",
                    ),
              
                  )

然后：

     String generateRandomString(int len) {
        var r = Random();
        return String.fromCharCodes(List.generate(len, (index) => r.nextInt(33) + 89));
      }
//will give you random string

- Söhrab Vahidli

---

我的整个项目中都没有FloatingActionButton，但是当我从子屏幕导航到父屏幕时仍然会出现此错误。请建议我该怎么解决？非常感谢。 - Kamlesh

Answer 4

每个工厂都必须非空一个唯一的英雄键。

floatingActionButton: FloatingActionButton(
          heroTag: 'unique_key',
          ...
        ),

和 Hero 小部件

Hero(
      tag: 'unique_key',
      ...
    ),

- Murat Aslan

---

抱歉，我没有使用浮动操作按钮，所以我不明白你的意思。你能否详细解释一下，这样我才能修复这个错误 :) - Arshbir Sandhu

你能获取堆栈跟踪吗？ - Murat Aslan

在一个带有Google地图的堆栈中有两个浮动按钮。添加Hero标签解决了这个问题。 - Abdul Rahman Shamair

我的整个项目中都没有“FloatingActionButton”，但是当我从子屏幕导航到父屏幕时仍然会出现此错误。请建议我该怎么解决？非常感谢。 - Kamlesh