Flutter：在 Stack 中的動畫圖像上觸發 GestureDetector

Question

我有一個由花瓣圖像組成的動畫“花”，這些圖像在 Widget 構建中旋轉到位。 花瓣圖像可以是各種長度。

因為我不知道如何將每個花瓣 PNG 的樞軸點移動到底部中心進行旋轉，所以我將每個花瓣圖像制作成一個透明的正方形，花瓣的底部位於圖像的中心，所以我可以旋轉圍繞中心的整個方形圖像，看起來花瓣圍繞着它的底部旋轉。

我在堆棧中有 5 個動畫，我希望每個都有一個手勢檢測器，這樣我就可以在點擊其中任何一個時采取行動。 我已經在用於花中心的圖像上安裝了 GestureDetector 並且它可以工作，但沒有一個花瓣可以。

我試過使用 HitTestBehavior.translucent 沒有運氣......

class _PFMainScreenState extends State<PFMainScreen>
    with TickerProviderStateMixin {
  AnimationController rotationController;

  @override
  void initState() {
    super.initState();
    rotationController = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
  }

  void onAfterBuild(BuildContext context) {
    Future.delayed(const Duration(milliseconds: 1000), () {
      rotationController.forward();
    });
  }

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

  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) => onAfterBuild(context));
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: DecoratedBox(
          position: DecorationPosition.background,
          decoration: BoxDecoration(
            color: Colors.black,
            image: DecorationImage(
                image: AssetImage('images/background.jpg'),
                fit: BoxFit.contain),
          ),
          child: Stack(
            children: <Widget>[
              Center(
                child: GestureDetector(
                    onTap: () {
                      print('1st image tapped');
                    },
                    behavior: HitTestBehavior.translucent,
                    child: Image.asset('images/petal-square.png', height: 350)),
              ),
              Center(
                child: RotationTransition(
                  turns: Tween(begin: 0.0, end: 0.2).animate(
                      new CurvedAnimation(
                          parent: rotationController,
                          curve: Curves.decelerate,
                          reverseCurve: Curves.decelerate)),
                  child: GestureDetector(
                      onTap: () {
                        print('2nd image tapped');
                      },
                      behavior: HitTestBehavior.translucent,
                      child:
                          Image.asset('images/petal-square.png', height: 250)),
                ),
              ),
              Center(
                child: RotationTransition(
                  turns: Tween(begin: 0.0, end: 0.4).animate(
                      new CurvedAnimation(
                          parent: rotationController,
                          curve: Curves.decelerate,
                          reverseCurve: Curves.decelerate)),
                  child: Image.asset('images/petal-square.png', height: 400),
                ),
              ),
              Center(
                child: RotationTransition(
                  turns: Tween(begin: 0.0, end: 0.6).animate(
                      new CurvedAnimation(
                          parent: rotationController,
                          curve: Curves.decelerate,
                          reverseCurve: Curves.decelerate)),
                  child: Image(
                    image: AssetImage('images/petal-square.png'),
                  ),
                ),
              ),
              Center(
                child: RotationTransition(
                  turns: Tween(begin: 0.0, end: 0.8).animate(
                      new CurvedAnimation(
                          parent: rotationController,
                          curve: Curves.decelerate,
                          reverseCurve: Curves.decelerate)),
                  child: Image.asset('images/petal-square.png', height: 200),
                ),
              ),
              Center(
                child: GestureDetector(
                  onTap: () {
                    //rotationController.forward(from: 0.0);
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => PFMenuScreen(),
                      ),
                    );
                  },
                  behavior: HitTestBehavior.translucent,
                  child: Image(
                    height: 100.0,
                    width: 100.0,
                    image: AssetImage('images/centre.png'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

有沒有辦法檢測堆棧中非半透明圖像的點擊？

干杯

Answer 1

如果您使用 Dart Dev Tools 的 flutter 檢查器運行您的應用程序，您可以看到您的每個Center小部件都填滿了整個屏幕。 這可能會影響您的手勢檢測，具體取決於您放置手勢檢測器的位置。

這是一些應該適合您的代碼。 我將您的旋轉圖像重構為可重復使用的小部件。

class PFMainScreen extends StatefulWidget {
  @override
  _PFMainScreenState createState() => _PFMainScreenState();
}

class _PFMainScreenState extends State<PFMainScreen>
    with TickerProviderStateMixin {
  AnimationController rotationController;

  @override
  void initState() {
    super.initState();
    rotationController = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
  }

  void onAfterBuild(BuildContext context) {
    Future.delayed(const Duration(milliseconds: 1000), () {
      rotationController.forward();
    });
  }

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

  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((_) => onAfterBuild(context));
    return Scaffold(
      backgroundColor: Colors.black,
      body: Center(
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            RotatingImage(
              rotationController: rotationController,
              onTap: () {
                print("Image 1 tapped");
              },
              imageHeight: 400,
              tweenEnd: 0.2,
            ),
            RotatingImage(
              rotationController: rotationController,
              onTap: () {
                print("Image 2 tapped");
              },
              imageHeight: 350,
              tweenEnd: 0.4,
            ),
            RotatingImage(
              rotationController: rotationController,
              onTap: () {
                print("Image 3 tapped");
              },
              imageHeight: 250,
              tweenEnd: 0.6,
            ),
            RotatingImage(
              rotationController: rotationController,
              onTap: () {
                print("Image 4 tapped");
              },
              imageHeight: 200,
              tweenEnd: 0.8,
            ),
          ],
        ),
      ),
    );
  }
}

class RotatingImage extends StatelessWidget {
  final AnimationController rotationController;
  final double imageHeight;
  final double tweenEnd;
  final Function onTap;
  const RotatingImage({
    this.onTap,
    this.imageHeight,
    this.tweenEnd,
    @required this.rotationController,
  });

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: Tween(begin: 0.0, end: tweenEnd).animate(new CurvedAnimation(
          parent: rotationController,
          curve: Curves.decelerate,
          reverseCurve: Curves.decelerate)),
      child: GestureDetector(
          onTap: onTap,
          behavior: HitTestBehavior.translucent,
          child: Image.asset('images/petal-square.png', height: imageHeight)),
    );
  }
}