Flutter溢出定位按钮不可点击

Question

我有一个像这样定位的小部件的堆栈小部件：

Stack(
        overflow: Overflow.visible,
        children: [
          Container(
            width: 150,
            height: 150,
          ),
          Positioned(
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('FAB tapped!');
              },
              backgroundColor: Colors.blueGrey,
            ),
            right: 0,
            left: 0,
            bottom: -26,
          ),
        ],
      ),

放置在容器外面的那部分晶圆厂是不可点击的，有什么解决办法？这是一个截图：

Answer 1

尝试这个 ：

      Stack(
        overflow: Overflow.visible,
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>
            [
              Container(width: 150, height: 150, color: Colors.yellow),
              Container(width: 150, height: 28, color: Colors.transparent),
            ],
          ),
          Positioned(
            child: FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: () {
                print('FAB tapped!');
              },
              backgroundColor: Colors.blueGrey,
            ),
            right: 0,
            left: 0,
            bottom: 0,
          ),
        ],
      )

如果您希望按钮保持可点击，则应该将按钮保留在堆栈内

Answer 2

问题是，当子级在具有Clip.none行为的 Stack 上溢出时，Stack 外部的部分将不会被识别为被单击。

解决方案 ：

用 包裹起来Stack并Column添加您想要在其之外的空间Stack：

final _clipSpace = 30;
Stack(
  clipBehavior: Clip.none,
  children: [
    Column(
      children: [
        DecoratedBox(
          decoration: const BoxDecoration(// decorate the box //
           ),
          child: Column(
            children: [
              // column's children
                ],
              )
            ],
          ),
        ),
         // clip space
        const SizedBox(height: _clipSpace,)
      ],
    ),
    const Positioned(
      child: _ActionButton(),
      left: 0,
      right: 0,
      bottom: 0,
    ),
  ],
);

Answer 3

overflow由于规范在 后被弃用，因此提供更新的答案v1.22.0-12.0.pre。clipBehavior是替换属性：

  Stack(
    clipBehavior: Clip.none,
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>
        [
          Container(width: 150, height: 150, color: Colors.yellow),
          Container(width: 150, height: 28, color: Colors.transparent),
        ],
      ),
      Positioned(
        child: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            print('FAB tapped!');
          },
          backgroundColor: Colors.blueGrey,
        ),
        right: 0,
        left: 0,
        bottom: 0,
      ),
    ],
  )

注意：归功于@Amir的回答