在flutter中实施英雄动画时出错

因此,我试图使自行车详细信息UI混乱,但似乎无法使英雄动画正常工作。首先,我列出了一张带有图像的自行车清单,按下该按钮会显示详细信息。我试图在导航到另一页的同时向图像添加英雄动画,但是我却出现错误 “子树中有多个共享相同标签的英雄。”

when pressing the image the screen navigate to another page

     Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 10.0, vertical: 6.0),
                  child: GestureDetector(
                        onTap: () {

                          Navigator.push(
                              context,
                              PageRouteBuilder(
                                  pageBuilder: (context, a, b) =>
                                      DetailsOfNewBikes(value: item)));
                        },
                        child: Hero(
                          tag:'back',
                                                      child: Container(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: NetworkImage(
                                      item.bikeimage,
                                    ),
                                    fit: BoxFit.cover,
                                    colorFilter: ColorFilter.mode(
                                      Colors.black26,
                                      BlendMode.darken,
                                    ),
                                  ),
                                  borderRadius: BorderRadius.circular(10.0),
                                  color: Colors.grey,
                                ),
                                    ),
                        )))

以及图片中的下一页我使用了具有相同标签的hero

                  child: new Column(
                children: <Widget>[
                  Hero(
                    tag:'data',
                                          child: Container(
                                            child: Padding(

                      child: Image.network('${widget.value.bikeimage}'),
                      padding: EdgeInsets.symmetric(horizontal: 0.0),
                    ),
                                          ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                ],
              ),
评论
reum
reum

You need the same tag for your hero animation.

Try using the same tag for both hero widgets. In the example below, I used the back tag.

试试下面的代码,它可以完美地工作:

第一屏

    Padding(
                  padding: const EdgeInsets.symmetric(
                      horizontal: 10.0, vertical: 6.0),
                  child: GestureDetector(
                        onTap: () {

                          Navigator.push(
                              context,
                              PageRouteBuilder(
                                  pageBuilder: (context, a, b) =>
                                      DetailsOfNewBikes(value: item)));
                        },
                        child: Hero(
                          tag:'back',
                                                      child: Container(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: NetworkImage(
                                      item.bikeimage,
                                    ),
                                    fit: BoxFit.cover,
                                    colorFilter: ColorFilter.mode(
                                      Colors.black26,
                                      BlendMode.darken,
                                    ),
                                  ),
                                  borderRadius: BorderRadius.circular(10.0),
                                  color: Colors.grey,
                                ),
                                    ),
                        )))

第二屏

   child: new Column(
                children: <Widget>[
                  Hero(
                    tag:'back',
                                          child: Container(
                                            child: Padding(

                      child: Image.network('${widget.value.bikeimage}'),
                      padding: EdgeInsets.symmetric(horizontal: 0.0),
                    ),
                                          ),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                ],
              ),

要阅读更多有关英雄动画的信息,请查看以下链接:

Hero Animation in Flutter

我希望这有帮助。

点赞
评论
滚好么
滚好么

Hero tag should be a unique string, but shared across both screens.

i believe in your case you would want to have the image id as the tag, and when passing to the next screen pass the same id. item.bikeimage or something you know is uniq.

child: Hero(
                      tag: item.id,
                      child: Container(
                            decoration: BoxDecoration(
                              image: DecorationImage(
                                image: NetworkImage(
                                  item.bikeimage,
                                ),
                                fit: BoxFit.cover,
                                colorFilter: ColorFilter.mode(
                                  Colors.black26,
                                  BlendMode.darken,
                                ),
                              ),
                              borderRadius: BorderRadius.circular(10.0),
                              color: Colors.grey,
                            ),
                                ),
                    )))


    child: new Column(
            children: <Widget>[
              Hero(
                tag: widget.value.id,
                child: Container(
                        child: Padding(
                  child: Image.network('${widget.value.bikeimage}'),
                  padding: EdgeInsets.symmetric(horizontal: 0.0),
                ),
                                      ),
              ),
              SizedBox(
                height: 5,
              ),
            ],
          ),
点赞
评论
鸡蛋
鸡蛋

每个英雄小部件都需要唯一的英雄标签,以便可以标识要设置动画的小部件。

 tag:'back',

在这里,由于您正面临此问题,因此您将提供回每个小部件。

注意:请确保在两个屏幕中,一个英雄标签必须相同,以便从第一个屏幕导航到第二个屏幕时可以找到小部件。

点赞
评论