iOS端特定区域Gesture Detector/InkWell的onTap属性无法执行问题

问题根因 #

该问题为Flutter iOS端特有的手势判定逻辑差异导致，触发原因有两个：

• 你使用的HitTestBehavior.translucent允许手势透传，AppBar默认自带的顶部点击回到顶部手势在iOS端优先级更高，会优先消费Padding区域的点击事件；安卓端手势优先级逻辑不同，因此不会触发该问题
• iOS端对无背景色的完全透明区域命中测试规则和安卓不同，你的Row为右对齐，Padding区域内存在大面积空白透明区域，会被iOS端判定为不可点击区域

解决方案 #

方案1：修改手势命中行为 #

将GestureDetector的HitTestBehavior.translucent改为HitTestBehavior.opaque，强制当前控件优先消费点击事件，禁止手势透传给AppBar：

GestureDetector(
  // splashColor: Colors.transparent,
  // highlightColor: Colors.transparent,
  behavior: HitTestBehavior.opaque, // 仅修改该行
  onTap: () {
    Navigator.pushNamed(
      context,
      Routes.clubsList,
      arguments: {
        "clubs": clubs,
        "isMyProfile": true,
      },
    );
  },
  child: Padding(
    padding: const EdgeInsets.only(
        bottom: Spacing.space8, top: Spacing.space8),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Text(
          S.of(context).profile_more,
          style: theme.textTheme.body2Regular
              .copyWith(color: theme.colorScheme.textSecNeon),
        ),
        SizedBox(
          width: 5,
        ),
        Semantics(
          label: 'my_guilds_more_icon',
          child: BaseImage(
            height: 12,
            width: 6,
            asset: LocalAsset(
                url: 'assets/images/ic_arrow_right_blue.png'),
          ),
        ),
      ],
    ),
  ),
)

方案2：添加透明背景 #

如果方案1无效，用带透明背景的Container替换原来的Padding组件，强制iOS端识别该区域为可点击区域：

GestureDetector(
  // splashColor: Colors.transparent,
  // highlightColor: Colors.transparent,
  behavior: HitTestBehavior.translucent,
  onTap: () {
    Navigator.pushNamed(
      context,
      Routes.clubsList,
      arguments: {
        "clubs": clubs,
        "isMyProfile": true,
      },
    );
  },
  // 替换原Padding为带透明背景的Container
  child: Container(
    color: Colors.transparent,
    padding: const EdgeInsets.only(
        bottom: Spacing.space8, top: Spacing.space8),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Text(
          S.of(context).profile_more,
          style: theme.textTheme.body2Regular
              .copyWith(color: theme.colorScheme.textSecNeon),
        ),
        SizedBox(
          width: 5,
        ),
        Semantics(
          label: 'my_guilds_more_icon',
          child: BaseImage(
            height: 12,
            width: 6,
            asset: LocalAsset(
                url: 'assets/images/ic_arrow_right_blue.png'),
          ),
        ),
      ],
    ),
  ),
)

方案3：排查Scaffold配置 #

检查当前页面的Scaffold是否开启了extendBodyBehindAppBar: true，开启后AppBar会延伸覆盖页面顶部区域，你可以关闭该属性，或者给当前可点击组件的外层添加对应高度的顶部边距，避开AppBar的覆盖区域。

内容的提问来源于stack exchange，提问作者Nabeel Khan