Unclickable FloatActionButton

Question

我有一个包含3个FloatActionButton-s的自定义小部件，我无法理解为什么我的第3个FAB没有按下整个区域，只有当我点击这个按钮的底部时才会触发onPressed。

MyState构建方法：

Widget build(BuildContext context) {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
        Transform(
          transform: Matrix4.translationValues(
            0.0,
            _translateButton.value * 2.0,
            0.0,
          ),
          child: edit(),
        ),
        Transform(
          transform: Matrix4.translationValues(
            0.0,
            _translateButton.value,
            0.0,
          ),
          child: delete(),
        ),
        add(),
      ],
    );
  }

编辑按钮 - 看起来像其他2个按钮的代码，但只有点击这个按钮才会出现问题：

Widget edit() {
    return Visibility(
      visible: _editButtonVisible,
      child: FloatingActionButton(
        backgroundColor: Colors.blueGrey,
        heroTag: 'edit',
        onPressed: () {
          print('edit');
        },
        tooltip: 'Image',
        child: Icon(Icons.edit),
      ),
    );
  }

这是我的动画和感兴趣的一点 - 例如，如果我将end更改为-4，它将减少FAB之间的空间，我的按钮将在整个区域上可点击..

_translateButton = Tween<double>(
      begin: _fabHeight,
      end: -14.0,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.0,
        0.75,
        curve: _curve,
      ),
    ));

所以我想可能原因是列的大小？左图片有坏工作按钮，右图有稳定按钮。

Answer 1

他们是解决问题的两种方法。 1）如果您的屏幕截图中只有列表中的四个元素，那么您可以使用列属性mainAxisSize = MainAxisSize.min

2）使用堆栈小部件

Answer 2

我通过包装我的Column修复它固定高度的容器）现在我的代码看起来像：

 @override
  Widget build(BuildContext context) {
    return new Container(
      height: 200.0,
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Transform(
            transform: Matrix4.translationValues(
              0.0,
              _translateButton.value * 2.0,
              0.0,
            ),
            child: edit(),
          ),
          Transform(
            transform: Matrix4.translationValues(
              0.0,
              _translateButton.value,
              0.0,
            ),
            child: delete(),
          ),
          add(),
        ],
      ),
    );
  }