如何在 PositionedTransition 小部件中放置一个可以正常工作的小部件

Question

我把 AnimationController 放到 PositionedTransition 小部件中。

我将它的子组件设置为 InkWell 小部件（或 GestureDetector 或 IconButton），以便在它执行动画时捕捉点击行为。

但是效果不好。如果我点击这个，什么都没有发生。

我想知道为什么以及如何去做。

而不是这个，现在我将 GestureDetector 小部件放在相同的位置。

感谢您的阅读和您的好建议。

import 'package:flutter/material.dart';
import 'dart:math' as math;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Page0(),
    );
  }
}
class Page0 extends StatefulWidget {
  @override
  Page0State createState() => Page0State();
}
class Page0State extends State<Page0> with SingleTickerProviderStateMixin{

  AnimationController _animationController;
  var _isMoved = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
        duration: const Duration(milliseconds: 2000),
    );
  }
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {

    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Stack(
        children: <Widget> [
          Container(
            height : 800,
            width  : 800,
            color : Colors.blue,
            child :
              GestureDetector(
                onHorizontalDragEnd: null,  //set no action
              )
          ),
          Positioned(
            top:height/2,
            left:width * 5/6-30,
            child: InkWell(
              onTap: (){debugPrint('a');},
              child : Container(
              height: 50,
              width: 100,
              ),
            ),
          ),
          PositionedTransition(   //This widget!!!
            child:                //I set this child to IconButton
              IconButton(         //But it can't work 
                icon: Icon(
                  Icons.reply,
                  textDirection: TextDirection.rtl),
                  color: Colors.green,
                onPressed: () {
                  debugPrint('bb');  //no debug
                  Navigator.push(    //no push(Actually Page2 class exists.)
                    context,
                    _createNextRoute(Page2()));
                },
              ),
            rect: _animationController
              .drive(
                  CurveTween(
                    curve: Curves.bounceIn,
                  ),
              )
              .drive(
                RelativeRectTween(
                  begin:  RelativeRect.fromLTRB(width * 5/6 -20, height/2 , width / 6 +20, height/2 ),
                  end: RelativeRect.fromLTRB(width * 5/6, height/2, width / 6, height/2),
                )
              ),
          ),
          Positioned(
            top:200,
            left:200,
            child:IconButton(
              icon: Icon(Icons.forward),
              onPressed: () {debugPrint('ccc');},  //this debug works well.
            ),
          ),
        ]
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_isMoved) {
            _animationController.repeat();
          } else {
            _animationController.reset();
            _animationController.forward();
          }
          _isMoved = !_isMoved;
        },
        child:
          Transform.rotate(
            angle: math.pi, // 45 deg
            child:Icon(Icons.reply,
              textDirection: TextDirection.ltr,
              color: Colors.greenAccent,
              size: 36.0,
            ),
          )
      ),
    );
  }
}

Route _createNextRoute(Widget classRtnWidget) {
  return PageRouteBuilder(
    pageBuilder: (context, animation,secondaryAnimation) => classRtnWidget,
    transitionsBuilder: (context, animation, secondaryAnimation,child){
      var begin = Offset(1.0,0.0);
      var end = Offset.zero;
      var curve = Curves.ease;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve:curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

Answer 1

您可以在下面复制粘贴运行完整代码
您提供给RelativeRect.fromLTRB 的值不正确
更改为以下工作正常

double w1 = width * 5 / 6 - 20;
double h1 = height / 2;
double w2 = 0;
double h2 = 0;

double w3 = 0;
double h3 = 0;
double w4 = width / 6;
double h4 = height / 2;

工作演示

完整代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Page0(),
    );
  }
}

class Page0 extends StatefulWidget {
  @override
  Page0State createState() => Page0State();
}

class Page0State extends State<Page0> with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  var _isMoved = false;
  /*double width;
  double height;*/

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

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

  final RelativeRectTween relativeRectTween = RelativeRectTween(
    begin: RelativeRect.fromLTRB(40, 40, 0, 0),
    end: RelativeRect.fromLTRB(0, 0, 40, 40),
  );

  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;

    double w1 = width * 5 / 6 - 20;
    double h1 = height / 2;
    double w2 = 0;
    double h2 = 0;

    double w3 = 0;
    double h3 = 0;
    double w4 = width / 6;
    double h4 = height / 2;

    print('  ${w1}   ${h1}  ${w2}  ${h2} ');
    print('  ${w3}   ${h3}  ${w4}  ${h4} ');
    return Scaffold(
      body: Stack(children: <Widget>[
        Container(
            height: 800,
            width: 800,
            color: Colors.blue,
            child: GestureDetector(
              onHorizontalDragEnd: null, //set no action
            )),
        Positioned(
          top: height / 2,
          left: width * 5 / 6 - 30,
          child: InkWell(
            onTap: () {
              debugPrint('a');
            },
            child: Container(
              height: 50,
              width: 100,
            ),
          ),
        ),
        PositionedTransition(
          child: IconButton(
            //But it can't work
            icon: Icon(Icons.ac_unit, textDirection: TextDirection.rtl),
            color: Colors.green,
            onPressed: () {
              debugPrint('bb'); //no debug
              _animationController.forward();
            },
          ),
          rect: _animationController
              .drive(
                CurveTween(
                  curve: Curves.bounceIn,
                ),
              )
              .drive(RelativeRectTween(
                begin: RelativeRect.fromLTRB(w1, h1, w2, h2),
                end: RelativeRect.fromLTRB(
                    w3, h3, w4, h4),
              )),
        ),
        Positioned(
          top: 200,
          left: 200,
          child: IconButton(
            icon: Icon(Icons.forward),
            onPressed: () {
              debugPrint('ccc');
            }, //this debug works well.
          ),
        ),
      ]),
      floatingActionButton: FloatingActionButton(
          onPressed: () {
            if (_isMoved) {
              _animationController.repeat();
            } else {
              _animationController.reset();
              _animationController.forward();
            }
            _isMoved = !_isMoved;
          },
          child: Transform.rotate(
            angle: math.pi, // 45 deg
            child: Icon(
              Icons.reply,
              textDirection: TextDirection.ltr,
              color: Colors.greenAccent,
              size: 36.0,
            ),
          )),
    );
  }
}

Route _createNextRoute(Widget classRtnWidget) {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => classRtnWidget,
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.ease;
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}