Flutter自定义搜索下拉框：点击外部关闭Overlay的实现咨询

一、页面已有的GestureDetector能否使用？ #

可以，但需要通过全局Key让父页面通知组件关闭，耦合性较高。更推荐在组件内部独立实现，无需依赖父页面逻辑。

二、组件内部解决方案（推荐） #

核心思路：在Overlay的最外层添加全屏透明的GestureDetector，监听外部点击事件，触发关闭逻辑。同时保证下拉列表内部的点击事件正常响应。

修改_createOverlayEntry方法，将原有代码包裹在全屏手势检测容器中：

OverlayEntry _createOverlayEntry() {
  Rect? bounds = _key.globalPaintBounds;

  return OverlayEntry(
    builder: (context) => GestureDetector(
      // 允许内部控件接收点击事件，仅拦截外部点击
      behavior: HitTestBehavior.translucent,
      onTap: () {
        // 关闭Overlay并重置状态
        show.value = false;
        _overlayEntry?.remove();
        _overlayEntry = null;
        _focusNode.unfocus();
        controller.clear();
        list.value = widget.originalList;
      },
      child: Stack(
        children: [
          // 全屏透明容器，用于接收外部点击
          const Positioned.fill(child: SizedBox()),
          // 原有下拉列表布局
          Positioned(
            left: bounds?.left,
            top: (bounds?.top ?? 0) + 60 + 5,
            width: bounds?.width,
            child: Material(
              elevation: 4.0,
              child: SizedBox(
                child: ValueListenableBuilder(
                  valueListenable: list,
                  builder: (context, myList, child) {
                    return SizedBox(
                      height: getHeight(myList.length),
                      child: ListView.builder(
                        padding: EdgeInsets.zero,
                        shrinkWrap: true,
                        itemCount: myList.length,
                        itemBuilder: (context, index) {
                          return InkWell(
                            onTap: () {
                              _selectedFinancialYear = myList[index];
                              show.value = false;
                              _overlayEntry?.remove();
                              _overlayEntry = null;
                              widget.onTap!(myList[index]);
                              controller.clear();
                              list.value = widget.originalList;
                              _focusNode.unfocus();
                            },
                            child: ListTile(
                              title: Text(
                                myList[index].sessionYear ?? "",
                                style: const TextStyle(color: Colors.black),
                              ),
                            ),
                          );
                        },
                      ),
                    );
                  },
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

三、额外优化点 #

1. 在选项点击的onTap中添加_focusNode.unfocus()，确保焦点完全移除，避免后续异常。
2. 移除Overlay后将_overlayEntry置为null，防止重复操作引发错误。

四、如果要使用父页面的GestureDetector（不推荐） #

1. 给CustomSearchableDropDown设置全局Key：

final GlobalKey<_CustomSearchableDropDownState> dropDownKey = GlobalKey();

// 页面中使用
Expanded(
  child: CustomSearchableDropDown(
    key: dropDownKey,
    originalList: userP.academicYear??[],
    onTap: (value) {
      setState(() {
        _selectedFinancialYear=value;
      });
    },
  ),
),

2. 父页面的GestureDetector中添加关闭逻辑：

GestureDetector(
  onTap: () {
    dropDownKey.currentState?.closeOverlay();
  },
  child: ... // 页面内容
)

3. 在组件的State类中添加closeOverlay方法：

void closeOverlay() {
  show.value = false;
  _overlayEntry?.remove();
  _overlayEntry = null;
  _focusNode.unfocus();
  controller.clear();
  list.value = widget.originalList;
}

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