我正在尝试制作动画节目书签。就像this website上的例子一样。原来的例子太复杂了。所以我把flutter doc示例中的部分代码。学习最简单的动画。我在两个英雄中都添加了相同的标签,但仍然出错。
请帮帮我。谢谢!
对不起,我的英语很差。
Center(
child: FutureBuilder(
future: fetchData('querySdiList'),
builder: (context, qS) {
if (qS.hasData) {
return CarouselSlider.builder(
itemCount: qS.data.length,
itemBuilder: (BuildContext context, int itemIndex, int i) {
final list = qS.data[itemIndex];
sdiId = list['sdiId'];
print('carousel:' + sdiId.toString());
return Center(
child: SizedBox(
width: 300,
child: Hero(
tag: sdiId.toString(),
child: Material(
child: InkWell(
onTap: () {
// Navigator.pushNamed(context, '/BookMarkPage');
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
print('Hero:' + sdiId.toString());
return Container(
// Set background to blue to emphasize that it's a new route.
color: Colors.lightBlueAccent,
padding: const EdgeInsets.all(16.0),
alignment: Alignment.topLeft,
child: SizedBox(
width: 100,
child: Hero(
tag: sdiId.toString(),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Image.network(
_image[0],
fit: BoxFit.contain,
),
),
),
),
));
}));
},
child: Container(
height:
MediaQuery.of(context).size.height / 2,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
offset: Offset(0, 10),
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 10,
)
],
),
margin: EdgeInsets.all(5.0),
child: Stack(
alignment: Alignment.bottomLeft,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(15)),
child: Container(
height: MediaQuery.of(context)
.size
.height /
2,
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(_image[
Random().nextInt(
_image.length)])),
),
),
),
Container(
height: MediaQuery.of(context)
.size
.height,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(15)),
color: Colors.white,
gradient: LinearGradient(
begin: FractionalOffset.topCenter,
end: FractionalOffset.bottomLeft,
colors: [
Colors.transparent,
Colors.black,
],
stops: [0.0, .85],
),
),
),
Container(
padding: EdgeInsets.all(10),
child: RichText(
text: TextSpan(
text: '${list['sdiName']}',
style: TextStyle(
fontSize: 50,
color: Colors.white),
),
),
height: MediaQuery.of(context)
.size
.height /
8,
),
],
),
),
),
))));
},
options: CarouselOptions(
aspectRatio: 2,
autoPlay: true,
enlargeCenterPage: true,
height: MediaQuery.of(context).size.height,
),
);
} else if (qS.hasError) {
return qS.error;
}
return CircularProgressIndicator();
},
),
),
错误
There are multiple heroes that share the same tag within a subtree.
答案 0 :(得分:0)
您正在使用 carouselBuilder 创建多个小部件,并且每个小部件都获得相同的标签,您不能这样做,标签告诉 Hero 小部件它应该动画到哪里。
问题似乎在这里
final list = qS.data[itemIndex];
sdiId = list['sdiId'];
试着像这样设置英雄标签
tag: qS.data[itemIndex]['sdiId']
这应该为每个英雄提供 itemIndex 的 sdiId
以防止他们拥有相同的 itemIndex