Flutter | Stack 超出部分不响应手势的独特解决方案

下图是一个 Stack + Positioned 组合成的组件：

代码如下：

Stack(
  alignment: Alignment.topCenter,
  clipBehavior: Clip.none,
  children: [
    Container(
      width: 200,
      height: 100,
      color: Colors.red,
    ),
    Positioned(
      top: -30,
      child: GestureDetector(
        onTap: () {
          print('点击橙色view');
        },
        child: Container(
          width: 60,
          height: 60,
          color: Colors.orange,
        ),
      ),
    ),
  ],
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

此时橙色view超出红色view的那部分是不会响应点击手势的，原因是 Flutter 出于性能考虑。

如果想让它响应手势，我们可以用 Column 来组合一个完全相同的组件：

1. 从下往上排列；
2. 将上方的组件向下平移。

Column(
  verticalDirection: VerticalDirection.up,
  children: [
    Container(
      width: 200,
      height: 100,
      color: Colors.red,
    ),
    Transform.translate(
      offset: const Offset(0, 30),
      child: GestureDetector(
        onTap: () {
          print('点击橙色view');
        },
        child: Container(
          width: 60,
          height: 60,
          color: Colors.orange,
        ),
      ),
    ),
  ],
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23