在 flutter 中實現 hero animation 時出錯

Question

所以，我正在嘗試在 flutter 中制作自行車詳細信息 UI，但我似乎無法讓我的英雄 animation 工作。 首先，我列出了帶有圖像的自行車列表，按下時會顯示詳細信息。我試圖在導航到另一個頁面時將英雄 animation 添加到圖像中，但animation無法正常工作

     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',

在這里，您正在向每個小部件提供回饋，因為您正面臨這個問題。

注意：確保在兩個屏幕中一個 hero 標記必須相同，以便當您從第一個屏幕導航到第二個屏幕小部件時可以找到。

Answer 2

您的英雄 animation 需要相同的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,
                  ),
                ],
              ),

要了解有關英雄 animation 的更多信息，請查看以下鏈接：

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