Question

我是新手，这是我尝试构建的第一个应用程序。该应用程序是抽认卡应用程序，用户可以在其中制作自定义抽认卡。当我在子窗口小部件上按下按钮时，我试图更改父窗口小部件的动画。

从语法上来说，我想要类似的东西

前两个部分已经完成，但是我无法弄清楚自动旋转180度（第三个数字）的情况。

以下是我的父窗口小部件：

class CardController extends StatefulWidget {
  CardControllerState createState() => new CardControllerState();
}

class CardControllerState extends State<CardController>
    with TickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _frontScale;
  Animation<double> _backScale;
  Animation<Offset> _offsetAnimation;
  double _opacity = 1;

  @override
  void initState() {
    super.initState();
    _controller = new AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    _frontScale = new Tween(
      begin: 1.0,
      end: 0.0,
    ).animate(new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.0, 0.5, curve: Curves.easeIn),
    ));
    _backScale = new CurvedAnimation(
      parent: _controller,
      curve: new Interval(0.5, 1.0, curve: Curves.easeOut),
    );
    _offsetAnimation = Tween<Offset>(
      begin: Offset.zero,
      end: const Offset(1.5, 0.0),
    ).animate(CurvedAnimation(
      parent: _controller,
      curve: Curves.elasticIn,
    ));
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(),
        body: Container(
            child: AnimatedOpacity(
          opacity: _opacity,
          duration: Duration(seconds: 1),
          child: GestureDetector(
            onTap: () {
              setState(() {
                if (_controller.isCompleted || _controller.velocity > 0)
                  _controller.reverse();
                else
                  _controller.forward();
              });
            },
            child: new Column(children: <Widget>[
              new Stack(alignment: Alignment.center, children: <Widget>[
                CardFolding(_backScale),
                CardFoldingBack(_frontScale)
              ]),
              RaisedButton(
                  onPressed: () {
                    setState(() {
                      _opacity = 0;
                    });
                  },
                  child: Text('Add New Card'))
            ]),
          ),
        )));
  }
}

CardFolding类包含以下代码：

AnimatedBuilder(
      child: new CardWidget(colors: Colors.orange),
      animation: backScale,
      builder: (BuildContext context, Widget child) {
        final Matrix4 transform = new Matrix4.identity()
          ..scale(1.0, backScale.value, 1.0);
        return new Transform(
          transform: transform,
          alignment: FractionalOffset.center,
          child: child,
        );
      },
    );

CardWidget包含以下代码：

Container(
      alignment: FractionalOffset.center,
      height: 144.0,
      width: 360.0,
      decoration: new BoxDecoration(
        color: colors.shade50,
        border: new Border.all(color: new Color(0xFF9E9E9E)),
      ),
      child: Form(
        key: _formKey,
        child: Column(
          children: <Widget>[
            _buildQuestion(),
            RaisedButton(
              child: Text(
                'Submit',
                style: TextStyle(color: Colors.blue, fontSize: 16),
              ),
              onPressed: () {
                if (!_formKey.currentState.validate()) {
                  return;
                }
                _formKey.currentState.save();
                print(_question);
              },
            ),
          ],
        ),
      ),
    );

谢谢您的帮助！

Answer 1

用NotificationListener包裹CardFolding，然后按Submit派发Notification，并从Animation控制onNotification。 https://www.youtube.com/watch?v=cAnFbFoGM50

单击子小部件中存在的按钮时，如何更改父小部件的动画？

1 个答案: