扑动GridView项目单击动画

Question

网格视图项动画

我想要单独的网格项目动画点击。但是当点击一个项目时，所有的项目同时动画。如何解决这个问题?我想要单独的网格项目动画点击。但是当点击一个项目时，所有的项目同时动画。如何解决这个问题?我想要单独的网格项目动画点击。但是当点击一个项目时，所有的项目同时动画。如何解决这个问题?我想要单独的网格项目动画点击。但是当点击一个项目时，所有的项目同时动画。如何解决这个问题?

class ChoosePetState extends State with TickerProviderStateMixin
{
late AnimationController _animationController;
late Animation<double> _animation;
@override
void initState()
{
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
_animation =
Tween<double>(begin: 1.0, end: 1.2).animate(_animationController);
_animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
});
}
@override
Widget build(BuildContext context)
{
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(statusBarColor: CustomColor.mailColor));
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 20.0,20.0,30.0),
child: Text(
Strings.choosePet,
style: GoogleFonts.firaSans(
fontSize: 32.0,
fontWeight: FontWeight.bold,
color: CustomColor.colorPrimaryDark.withOpacity(0.7),
),
),
),
),
),
SliverPadding(
padding: const EdgeInsets.fromLTRB(10.0,0.0,10.0,30.0),
sliver:  SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.91,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return   Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: const CircleBorder(),
elevation: 5.0,
shadowColor: CustomColor.mailColor,
child: InkResponse
(
onTap: (){
_animationController.forward();
},
child: ScaleTransition(
scale: _animation,
child: Image.asset(
list[index].url,
fit: BoxFit.cover,
height: 70.0,
width: 70.0,
),
),
),
);
},
childCount: list.length,
),
),
),
],
),
),
);
}
}

Answer 1

你可以用我的代码回答:这里我使用了onTapIndex，当onclick和索引匹配时，我可以更新这个值，然后只有那个小部件是动画

class ChoosePetState extends State with TickerProviderStateMixin
{
late AnimationController _animationController;
late Animation<double> _animation;
int onTapIndex = -1;
@override
void initState()
{
super.initState();
_animationController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 500),
);
_animation =
Tween<double>(begin: 1.0, end: 1.2).animate(_animationController);
_animation.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
});
}
@override
Widget build(BuildContext context)
{
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(statusBarColor: CustomColor.mailColor));
return SafeArea(
child: Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverToBoxAdapter(
child: SizedBox(
width: double.infinity,
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 20.0,20.0,30.0),
child: Text(
Strings.choosePet,
style: GoogleFonts.firaSans(
fontSize: 32.0,
fontWeight: FontWeight.bold,
color: CustomColor.colorPrimaryDark.withOpacity(0.7),
),
),
),
),
),
SliverPadding(
padding: const EdgeInsets.fromLTRB(10.0,0.0,10.0,30.0),
sliver:  SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
childAspectRatio: 0.91,
mainAxisSpacing: 1.0,
crossAxisSpacing: 1.0,
),
delegate: SliverChildBuilderDelegate(
(context, index) {
return   Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: const CircleBorder(),
elevation: 5.0,
shadowColor: CustomColor.mailColor,
child: InkResponse
(
onTap: (){
setState(() {
onTapIndex = index;
});
_animationController.forward();
},
child: onTapIndex == index ? ScaleTransition(
scale: _animation,
child: Image.network(
list[index],
fit: BoxFit.cover,
height: 70.0,
width: 70.0,
),
) : Image.network(
list[index],
fit: BoxFit.cover,
height: 70.0,
width: 70.0,
),
),
);
},
childCount: list.length,
),
),
),
],
),
),
);
}
}