因此，我试图使自行车详细信息UI混乱，但似乎无法使英雄动画正常工作。首先，我列出了一张带有图像的自行车清单，按下该按钮会显示详细信息。我试图在导航到另一页的同时向图像添加英雄动画，但是我却出现错误 “子树中有多个共享相同标签的英雄。”
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,
),
],
),
You need the same
tagfor your hero animation.Try using the same tag for both hero widgets. In the example below, I used the
backtag.试试下面的代码，它可以完美地工作：
第一屏
第二屏
要阅读更多有关英雄动画的信息，请查看以下链接：
Hero Animation in Flutter
我希望这有帮助。
Herotagshould 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.bikeimageor something you know is uniq.每个英雄小部件都需要唯一的英雄标签，以便可以标识要设置动画的小部件。
在这里，由于您正面临此问题，因此您将提供回每个小部件。
注意：请确保在两个屏幕中，一个英雄标签必须相同，以便从第一个屏幕导航到第二个屏幕时可以找到小部件。