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

Question

所以，我正在尝试使自行车细节 UI 颤动，但我似乎无法让我的英雄动画正常工作。首先，我制作了一个包含图像的自行车列表，按下这些图像会显示 details.I 我试图在导航到另一个页面时向图像添加英雄动画，但动画不起作用 https://gph.is/g/Z8BQPPz

     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:'item.bikeimage',
                                                      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.bikeimage',
                                          child: Container(
                                            child: Padding(

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

Answer 1

每个英雄小部件都需要唯一的英雄标签，以便它可以识别您要为哪个小部件制作动画。

 tag:'back',

在这里，您正在向每个小部件提供回馈，因为您正面临这个问题。

注意：确保在两个屏幕中的英雄标签必须相同，这样当您从第一个屏幕导航到副屏小工具可以找到。

Answer 2

您的英雄动画需要相同的 tag。

尝试对两个英雄小部件使用相同的标签。在下面的示例中，我使用了 back 标签。

试试下面的代码，效果很好：

第一屏

    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,
                  ),
                ],
              ),

要了解有关英雄动画的更多信息，请查看下面的 link：

Hero Animation in Flutter

希望对您有所帮助。

Answer 3

Hero tag 应该是唯一的字符串，但在两个屏幕上共享。

我相信在您的情况下，您会希望将图像 ID 作为标签，并且在传递到下一个屏幕时传递相同的 ID。 item.bikeimage 或者你知道的东西是 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,
              ),
            ],
          ),

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

Error while implementing hero animation in flutter

flutter

flutter-animation