GridView之间无法实现跳转动画

Question

我想在 GridView 中实现方块之间的跳转动画。像这样

我试过使用 Hero 和“AnimatedContainer”，但它们没有用。我的代码只会让容器闪烁。谁能帮帮我？

class _MyAppState extends State<MyApp> {
  int location = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        Expanded(
          child: GridView.builder(
            itemCount: 10,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3),
            itemBuilder: (context, index) {
              return Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 0.1),
                ),
                child: (location == index)
                    ? Hero(
                        tag: 'jump',
                        child: AnimatedContainer(
                          duration: const Duration(milliseconds: 400),
                          width: 7,
                          height: 7,
                          decoration: const BoxDecoration(
                            color: Colors.amber,
                            shape: BoxShape.circle,
                          ),
                        ),
                      )
                    : const SizedBox(),
              );
            },
          ),
        ),
        ElevatedButton(
          onPressed: () {
            setState(() {
              location += 2;
            });
          },
          child: const Text('Jump'),
        ),
      ]),
    );
  }
}

Answer 1

获得一些视觉效果的简单方法

 itemBuilder: (context, index) {
                return Container(
                  decoration: BoxDecoration(
                    border: Border.all(color: Colors.black, width: 0.1),
                  ),
                  child: AnimatedContainer(
                    duration: const Duration(milliseconds: 400),
                    decoration: BoxDecoration(
                      color: location == index
                          ? Colors.amber
                          : Colors.amber.withOpacity(0.0),
                      shape: BoxShape.circle,
                    ),
                  ),
                );
              },

跳过正方形

结果

代码

import 'package:flutter/material.dart';

class BodyX extends StatefulWidget {
  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<BodyX> {
  int location = 0;

  final ScrollController controller = ScrollController();

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  get circleSize => 100;
  get circle => Container(
        height: circleSize,
        width: circleSize,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.yellow,
        ),
      );

  ////** Calculate Size

  get totalGrid => 16;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              location++;
              if (location >= totalGrid - 1) location = 0;
            });
          },
        ),
        body: LayoutBuilder(
          builder: (context, constraints) => SingleChildScrollView(
            controller: controller,
            child: Container(
              width: constraints.maxWidth,
              height: constraints.maxWidth / 3 * (totalGrid ~/ 3),
              color: Colors.cyanAccent.withOpacity(.2),
              child: Stack(
                children: [
                  GridView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: totalGrid,
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3),
                    itemBuilder: (context, index) {
                      return Container(
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.black, width: 0.1),
                        ),
                        child: const SizedBox(),
                      );
                    },
                  ),
                  AnimatedPositioned(
                    top: (location ~/ 3) * (constraints.maxWidth / 3) +
                        ((constraints.maxWidth / 6) - circleSize * .5),
                    left: (location % 3) * (constraints.maxWidth / 3) +
                        ((constraints.maxWidth / 6) - circleSize * .5),
                    child: circle,
                    duration: Duration(milliseconds: 400),
                  ),
                ],
              ),
            ),
          ),
        ));
  }
}

GridView之间无法实现跳转动画

Can't implement jump animation between GridView

dart

flutter

flutter-animation