Flutter导航栏中心按钮添加Transform后GestureDetector的onTap失效

问题核心：用Transform.translate平移按钮后，组件的点击检测区域不会跟着视觉位置移动——按钮超出导航栏容器的部分，本质上不在GestureDetector的可点击范围内，因为父容器（高度96的Container）的边界限制了点击区域。

解决方案一：调整导航栏容器的点击区域 #

把导航栏的容器高度扩大，让它能覆盖按钮上移后的全部区域，同时保持原导航栏内容在底部：

修改导航栏代码：

return Stack(
  children: [
    PageView(),
    Align(
      alignment: Alignment.bottomCenter,
      child: Container(
        // 原高度96 + 按钮上移的距离（示例为按钮半径31，总高度127）
        height: 127,
        color: Colors.transparent, // 背景透明不影响视觉
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container(
              height: 96,
              color: Colors.white,
              child: Row(
                children: [
                  ...widget.items.mapIndexed(
                    (index, item) => index == centerIndex &&
                            widget.variant == TapbarVariant.centerButton
                        ? TapbarCenterItem()
                        : TapbarItem(),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  ],
);

TapbarCenterItem的代码可保留不变，此时GestureDetector的父容器高度足够，点击区域会覆盖整个平移后的按钮。

解决方案二：用Positioned单独放置中心按钮 #

直接把中心按钮从导航栏的Row中抽出来，用Positioned放在Stack里，完全脱离原导航栏容器的限制：

修改导航栏代码：

return Stack(
  children: [
    PageView(),
    Align(
      child: Container(
        height: 96,
        color: Colors.white,
        child: Row(
          children: [
            ...widget.items.mapIndexed(
              (index, item) => index == centerIndex &&
                      widget.variant == TapbarVariant.centerButton
                  ? SizedBox() // 原位置留空占位
                  : TapbarItem(),
            ),
          ],
        ),
      ),
    ),
    // 独立的中心按钮
    Positioned(
      // 计算位置：导航栏底部往上偏移（导航栏高度/2 - 按钮半径）
      bottom: 96 / 2 - 31,
      left: MediaQuery.of(context).size.width / 2 - 31,
      child: GestureDetector(
        onTap: () {},
        child: Container(
          width: 62,
          height: 62,
          decoration: BoxDecoration(
            color: Colors.white,
            shape: BoxShape.circle,
          ),
          child: Placeholder(),
        ),
      ),
    ),
  ],
);

这种方法更直观，按钮的点击区域完全由自身大小决定，不受导航栏容器的约束，平移后的部分也能正常响应点击。

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