dart - Flutter - GestureDetector 未在动画中检测到

Question

我正在使用通过点击 FloatingActionButton 在屏幕上填充蓝色的动画。再次点击 FloatingActionButton 蓝色退出屏幕。如下图:

我在动画中放了一个GestureDetector，这样当屏幕被蓝色填满后，当点击蓝色时，它会退出屏幕。就像我再次点击 FloatingActionButton 一样。

然而，GestureDetector 没有检测到屏幕上任何蓝色部分的任何点击，即使我将它放在 onTap: (){print("test")} GestureDetector 未检测到。

有人可以帮助我通过点击蓝色再次运行 _up() 函数吗？

import 'package:flutter/material.dart';
import 'dart:ui' as ui;

void main() {
  runApp(new MaterialApp(home: new HomePage()));
}

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => new HomePageState();
}

class HomePageState extends State<HomePage> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  bool upDown = true;

  @override
  void initState() {
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 180),
    );

    _animation = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.0, 1.0, curve: Curves.linear),
    );
  }

  @override
  Widget build(BuildContext context) {
    final ui.Size logicalSize = MediaQuery.of(context).size;
    final double _width = logicalSize.width;
    final double _height = logicalSize.height;

    void _up(){
      setState((){
        if(upDown) {
          upDown = false;
          _controller.forward(from: 0.0);
        } else {
          upDown = true;
          _controller.reverse(from: 1.0);
        }
      });
    }

    return new Scaffold(
        body: new Stack(
            children: <Widget>[
              new Positioned(
                  bottom: 0.0,
                  child: new GestureDetector(
                    onTap: _up,
                    child: new AnimatedBuilder(
                      animation: _animation,
                      builder: (BuildContext context, Widget child) {
                      return new Container(
                        height: _height,
                        child: new CustomPaint(
                          painter: new Sky(_width, _height * _animation.value),
                          child: new Container(
                            height: _isRotated ? 0.0 : _height * _animation.value,
                            width: _isRotated ? 0.0 : _width,
                          ),
                        ),
                      );
                    },
                  ),
                )
              ),
              new Positioned(
                bottom: 16.0,
                right: 16.0,
                child: new FloatingActionButton(
                  backgroundColor: new Color(0xFFE57373),
                  child: new Icon(Icons.add),
                  onPressed: (){
                    _up();
                  },
                )
              )
            ]
        )
    );
  }
}

class Sky extends CustomPainter {
  final double _width;
  double _rectHeight;

  Sky(this._width, this._rectHeight);

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
      new Rect.fromLTRB(
          0.0, size.height - _rectHeight, this._width, size.height
      ),
      new Paint()..color = new Color.fromRGBO(0, 153, 255, 0.9)
    );
  }

  @override
  bool shouldRepaint(Sky oldDelegate) {
    return _width != oldDelegate._width || _rectHeight != oldDelegate._rectHeight;
  }
}

Answer 1

GestureDetector 仅适用于小部件。 CustomPaint 不是小部件，因此有必要在 CustomPaint 的 child 属性中放置一个小部件，例如 Container.

CustomPaint 是这样的:

...
child: new CustomPaint(
  painter: new Sky(_width, _height * _animation.value),
  child: new Container(
    height: _isRotated ? 0.0 : _height * _animation.value,
    width: _isRotated ? 0.0 : _width,
  ),
),
...