Flutter GridView 项目点击动画

Question

Grid view item animation

我希望单个网格项目在单击时生成动画。但是在单击一个项目时，所有项目都会同时动画。如何解决这个问题？ 我希望单个网格项目在单击时进行动画处理。但是在单击一个项目时，所有项目都会同时动画。如何解决这个问题？ 我希望单个网格项目在单击时进行动画处理。但是在单击一个项目时，所有项目都会同时动画。如何解决这个问题？ 我希望单个网格项目在单击时进行动画处理。但是在单击一个项目时，所有项目都会同时动画。如何解决这个问题？

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,
                 ),
               ),
             ),
            ],
          ),
        ),
    );
  }
}