简体   繁体   English

Stack 中的动画 FloatingActionButton 不会触发 Flutter 中的 onPressed 事件

[英]Animated FloatingActionButton in Stack don't trigger onPressed event in Flutter

I tried multi buttons in animated floatingactionButton.我在动画浮动操作按钮中尝试了多个按钮。 But when I tab the button, no response.但是当我点击按钮时,没有任何反应。 This code from sample code and I've changed a little bit.这段代码来自示例代码,我做了一点改动。

Someone answered this is the area problem like over Stack widget.有人回答这是类似于 Stack 小部件的区域问题。 so I tested the Stack wrapping Container.所以我测试了堆栈包装容器。 Also I tested changing FABs to just IconButtons, because someone explained it might be FABs hashTag problem.我还测试了将 FAB 更改为 IconButtons,因为有人解释说这可能是 FAB 的 hashTag 问题。

But now I don't know what problem is.但是现在不知道是什么问题。 Could you please let me know how I can solve this problem...?你能告诉我如何解决这个问题......? Thanks.谢谢。

class RadialMenu extends StatefulWidget {
  @override
  _RadialMenuState createState() => _RadialMenuState();
}

class _RadialMenuState extends State<RadialMenu>
  with SingleTickerProviderStateMixin
{
  AnimationController controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = AnimationController(duration: Duration(milliseconds: 900), vsync: this);

  }
  @override
  Widget build(BuildContext context) {
    return RadialAnimation(controller: controller);
  }
}


class RadialAnimation extends StatelessWidget {
  final AnimationController controller;
  final Animation<double> scale;
  final Animation<double> translation;
  final Animation<double> rotation;

  RadialAnimation({ Key key, this.controller}):
    scale = Tween<double>(
      begin: 1.3,
      end: 0.0,
      ).animate(
        CurvedAnimation(
            parent: controller,
            curve: Curves.fastOutSlowIn,
        ),
      ),
    translation = Tween<double>(
      begin: 0.0,
      end: 70.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Curves.elasticOut,
      )
    ),
    rotation = Tween<double>(
      begin: 0.0,
      end: 360.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0, 0.7,
          curve: Curves.decelerate,
        )
      )
    ),
      super(key : key);


  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: controller,
      builder: (context, builder) {
        return Transform.rotate(
          angle: radians(rotation.value),
          child: Container(
            height: 150,
            width:  150,
            color: Colors.blueGrey,
            child: Center(
              child: Stack(
                children: <Widget>[
                  _buildButton(225, color:Colors.orange, icon: Icons.accessibility_new),
                  //_buildButton(270, ,color:Colors.green, icon: Icons.accessible_forward),
                  _buildButton(315, color:Colors.yellow, icon:Icons.account_balance),
                  Transform.scale(
                    scale: scale.value -1.3,
                    child: FloatingActionButton(
                      heroTag: "btn1",
                      child: Icon(Icons.ac_unit),
                      backgroundColor: Colors.blue,
                      onPressed: _close,
                    ),
                  ),
                  Transform.scale(
                    scale: scale.value,
                    child: FloatingActionButton(
                      heroTag: "btn2",
                      child: Icon(Icons.add_box),
                      onPressed: _open,
                    ),
                  )

                ],
              ),
            ),
          ),
        );
      },
    );
  }

  _buildButton(double angle, {Color color, IconData icon}) {
    final double rad = radians(angle);
    return Transform(
      transform: Matrix4.identity()
        ..translate(
          (translation.value) * cos(rad),
          (translation.value) * sin(rad),
        ),
//      child: FloatingActionButton(
//        heroTag: null,
//        child: Icon(icon),
//        backgroundColor: color,
//        onPressed: () {
//          //_close;
//          print("I'm " );
//        },
//      ),
      child: IconButton(icon: Icon(Icons.add), onPressed: () {
        print('hello??11');
      },),
    );
  }
  _open() {
    controller.forward();
    print("my name is open!");
  }
  _close() {
    controller.reverse();
    print("my name is closed");
  }
}

And I just call this widget from main.dart我只是从 main.dart 调用这个小部件

...
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
                floatingActionButton: RadialMenu(),
...

This was my mistake.这是我的错误。

I missed one line from sample codes.我错过了示例代码中的一行。

Stack should have the property: alignment: Alignment.center堆栈应具有以下属性:alignment:Alignment.center

After inserting, subbutton's onPresseds are working.插入后,子按钮的 onPresseds 正在工作。

Sorry for my mistake.对不起,我错了。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM