flutter - 在动画按钮类上使用回调

Question

所以我有这个动画 onPressed 的按钮，但我想将它用作一个类，并将它称为一个小部件。

我还需要一个 VoidCallback ，这样当我按下按钮时我可以用它做一些事情，例如导航或调用一个函数。

如何让它动画化并接受回调。所以基本上我需要这个类的 2 个回调

class AnimatedShadowButton extends StatefulWidget {
  final double height;
  final double width;
  final double finalHeight;
  final double finalWidth;
  final Curve curve;
  final VoidCallback onClick;
  final Widget buttonText;

  const AnimatedShadowButton(
      {Key key,
      this.height,
      this.width,
      this.finalHeight,
      this.finalWidth,
      this.curve,
      this.onClick,
      this.buttonText})
      : super(key: key);

  @override
  _AnimatedShadowButtonState createState() => _AnimatedShadowButtonState();
}

class _AnimatedShadowButtonState extends State<AnimatedShadowButton> {
  @override
  void initState() {
    buttonHeight = widget.height;
    buttonWidth = widget.width;
    super.initState();
  }

  double buttonHeight;
  double buttonWidth;

  void aniButo() {

    setState(() {
      buttonHeight = buttonHeight == widget.height
          ? widget.finalHeight
          : widget.height;
      buttonWidth = buttonWidth == widget.width
          ? widget.finalWidth
          : widget.width;
    });

  }

  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      curve: widget.curve,
      width: buttonWidth,
      height: buttonHeight,
      child: RaisedButton(
        onPressed: () => aniButo(),
        child: widget.buttonText,
        elevation: 30.0,
      ),
    );
  }
}

我是这样调用它的

 AnimatedShadowButton(
              height: 60.0,
              width: 80.0,
              finalHeight: 120.0,
              finalWidth: 180.0,
              curve: Curves.easeInBack,
              buttonText: Text("something"),
//             onClick: ()  //Navigator.of(context).push(MaterialPageRoute(builder: (cxt) => Card())),
            ),

Answer 1

你必须编辑 aniButo 方法

void aniButo() {
  widget.onClick();
  /* ... other code */
}

或添加类似的内容:

child: RaisedButton(
    onPressed: () {
      aniButo();
      widget.onClick();
    },
    child: widget.buttonText,
    elevation: 30.0,
  )

在创建按钮时:

AnimatedShadowButton(
          height: 60.0,
          width: 80.0,
          finalHeight: 120.0,
          finalWidth: 180.0,
          curve: Curves.easeInBack,
          buttonText: Text("something"),
          onClick: ()  { 
            Navigator.of(context)
              .push(MaterialPageRoute(builder: (cxt) => Card()))
          },
        ),