Question

我有一个自定义窗口小部件，其中包括3个FloatActionButton-s，我不明白为什么没有在整个区域上按下我的第3个FAB，仅当我单击此按钮的底部时才会触发onPressed。

MyState构建方法：

Reference

“编辑”按钮-与其他2个按钮具有相似的代码，但仅在单击该按钮时出现问题：

Reference with TableJoin

这是我的动画，而且很有趣-例如，如果我将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(), ], ); }更改为-4，它将减少FAB之间的空间，并且在整个区域上都可以单击我的按钮。

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

所以我认为可能是列大小的原因？左图为不良的工作按钮，右图为稳定的按钮。

Answer 1

他们是解决问题的两种方法。 1）如果屏幕快照中列表中只有四个元素，则可以使用column属性 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(),
        ],
      ),
    );
  }

不可点击的FloatActionButton

2 个答案: