Flutter中Stack内Positioned组件手势检测失效问题求助

问题原因 #

Flutter里组件的手势检测默认只在自身布局边界内生效。你给Stack设置clipBehavior: Clip.none只是让超出布局的部分显示出来，但Stack的实际尺寸还是由内部未定位的正方形Container决定的。那个删除按钮通过Positioned(left: -10, top: -15)移到了Stack的布局边界外，自然触发不了手势。

解决方法 #

给Stack添加padding，让它的布局范围覆盖到Positioned组件的位置，这样手势检测就能包含到外部的按钮了。

修改后的代码片段：

...List<Widget>.generate(
  images.length,
  (index) {
    return Stack(
      clipBehavior: Clip.none,
      // 添加padding，让Stack布局范围覆盖删除按钮的位置
      padding: const EdgeInsets.only(left: 10, top: 15),
      children: [
        Container(
          height: deviceWidth / 3.5,
          width: deviceWidth / 3.5,
          clipBehavior: Clip.antiAlias,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10)),
          child: GestureDetector(
            onLongPressStart: (details) {},
            onTap: () async {
              var imageFile = await pickImage();
              if (imageFile != null) {
                images[index] = makeImage(
                    isPlaceholder: false,
                    imageData: await imageFile.readAsBytes());
                setState(() {});
              }
            },
            child: images[index],
          ),
        ),
        Positioned(
          left: -10,
          top: -15,
          child: Container(
            alignment: Alignment.center,
            height: 30,
            width: 30,
            decoration: const ShapeDecoration(
                shape: CircleBorder(), color: Colors.red),
            child: InkWell(
              splashColor: Colors.white,
              onTap: () {
                images.remove(images[index]);
                setState(() {});
              },
              child: const IgnorePointer(
                  child: Icon(Icons.delete_forever)),
            ),
          ),
        )
      ],
    );
  },
),

其他可选方案 #

如果不想调整Stack的padding，也可以用Transform.translate替代Positioned来移动删除按钮，因为Transform的手势检测区域会跟随组件变换后的位置，不需要扩展父组件布局：

// 替换原来的Positioned部分
Transform.translate(
  offset: const Offset(-10, -15),
  child: Container(
    alignment: Alignment.center,
    height: 30,
    width: 30,
    decoration: const ShapeDecoration(
        shape: CircleBorder(), color: Colors.red),
    child: InkWell(
      splashColor: Colors.white,
      onTap: () {
        images.remove(images[index]);
        setState(() {});
      },
      child: const IgnorePointer(
          child: Icon(Icons.delete_forever)),
    ),
  ),
)

内容的提问来源于stack exchange，提问作者Lemon Grab