如何阻止DropdownButton点击弹出默认弹窗，实现点击跳转自定义选择页面

下面是两种可直接落地的实现方式，都能完全阻止默认下拉弹窗弹出，同时支持自定义点击跳转逻辑：

方案1：嵌套手势识别+忽略内部事件（接入成本最低） #

用GestureDetector包裹DropdownButton，再嵌套IgnorePointer组件阻止DropdownButton内部消费点击事件，默认弹窗就不会触发，点击逻辑完全由外层的onTap控制。
示例代码：

GestureDetector(
  onTap: () async {
    // 跳转自定义选择页面，接收返回的选中值
    final selectedResult = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const YourCustomSelectPage()),
    );
    // 选中值不为空时更新DropdownButton的绑定值
    if (selectedResult!= null) {
      setState(() {
        selectedValue = selectedResult;
      });
    }
  },
  child: IgnorePointer(
    child: DropdownButton(
      value: selectedValue,
      items: yourItemList,
      onChanged: (_) {}, // 内部事件被拦截不会触发，留空即可
      // 其余样式配置保持原有逻辑不变
    ),
  ),
)

补充：如果需要组件本身继续消费点击事件（比如要保留自带的点击水波纹效果），可以把IgnorePointer换成AbsorbPointer，后者会直接消费点击事件而不是透传，同样可以拦截默认弹窗。

方案2：仿写DropdownButton样式（灵活度最高） #

如果后续还有更多自定义交互需求，可以直接用Container + Row + Icon组合仿写DropdownButton的UI样式，完全不使用原生DropdownButton组件，所有交互逻辑自主控制，没有原生事件冲突问题。

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