首页 文章

颤动 - GestureDetector未在动画中检测到

提问于
浏览 次
0

我正在使用一个动画，通过点击 FloatingActionButton 在屏幕上填充蓝色 . 再次点击 FloatingActionButton 蓝色退出屏幕 . 如下面的gif：

enter image description here

我在动画中放了 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;
  }
}
dart flutter

2 回答

  • 1

    GestureDetector 仅适用于小部件 . CustomPaint 不是小部件，因此有必要将 child 属性 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,
  ),
),
...
    回复于
  • 1

    已经为你做了一些工作：脚手架 .

    使用 Scaffold.of(context).showBottomSheet 它可以在一行代码中完成您所需的一切 .

    您也可以使用 showModalBottomSheet （似乎有最大高度限制） .

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

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("data"),
      ),
      floatingActionButton: new MyButton(),
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new FloatingActionButton(
      backgroundColor: Colors.red,
      onPressed: () => onPressed(context),
      child: new Icon(Icons.plus_one),
    );
  }

  void onPressed(BuildContext context) {
    Scaffold.of(context).showBottomSheet((context) {
      return new Container(
        color: Colors.cyan,
      );
    });
  }
}
    回复于

相关问题