我有一个 ListView,其中包含如下所示的卡片。我正在尝试将卡片设置为动画,以便在按下时以更大的尺寸打开。
我已经在单张卡片上实现了这一点,但是我不明白如何为 ListView 实现这一点。在 ListView 元素上添加 Hero 标签后,出现以下错误:
There are multiple heroes that share the same tag within a subtree.
这是animation .
这是动画的代码:
第一页:
Widget build(BuildContext context) {
return new Scaffold(
body: Hero(
tag: 'flutterLogo',
child: GestureDetector(
onTap: () => Navigator.push(context,
MaterialPageRoute(builder: (context) => AnimatedPage())),
child: Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
height: 180,
width: 300,
color: Colors.blue,
),
),
)),
);
}
第二页:
Widget build(BuildContext context) {
return new Scaffold(
body: Stack(
children: <Widget>[
Hero(
tag: 'flutterLogo',
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Card(
elevation: 4.0,
color: Colors.red,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
height: 200,
width: 300,
child: Center(child: Text('Hello')),
),
),
),
),
],
),
);
}
这是我的 ListView 的代码:
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Hero(
tag: 'flutterLogo',
child: Padding(
padding: const EdgeInsets.only(top: 10.0, bottom: 10),
child: GestureDetector(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => PaymentPage()));
},
child: Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
),
child: Container(
height: 180,
width: 150,
),
),
),
),
);
},
childCount: 4,
),
),
我正在尝试打开相同的 单击列表中的卡片后,如动画所示的第二页。
最佳答案
英雄标签应该不同,因此在您的 SliverList
中将标签更改为:
tag: 'flutterLogo${index}',
并将标签传递到您的第二个页面,如下所示(如果它是 StatefulWidget
):
class SecondPage extends StatefulWidget {
final String heroTag;
SecondPage({Key key, this.heroTag}) : super(key: key);
@override
_SecondPageState createState() => _SecondPageState();
}
然后不要在第二页中使用简单的标记,而是使用如下内容:
tag: widget.heroTag,
关于flutter - 如何在 Flutter 中将 Hero 动画添加到我的 ListView 中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62794500/