Flutter：关闭下拉按钮DropdownMenu

如何解决Flutter：关闭下拉按钮DropdownMenu

有没有办法在执行 onTap 函数时关闭包含所有 DropdownMenuItems 的 DropdownButton 的选择菜单（DropdownMenuItem 中的 GestureDetector）？

这是我对 Alperen Baskaya 方法的实现（略有缩减的版本，以便于理解）。然而，这种方法还不起作用，我不确定是因为我没有正确地实施它还是因为该方法对我的问题不起作用。

class _BoatSelectionState extends State<BoatSelection> {
  FocusNode focusNode;
  
  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: 
            DropdownButtonHideUnderline(
              child: DropdownButton<Boat>(
                focusNode: focusNode,icon: Icon(
                  Icons.keyboard_arrow_down_rounded,color: Colors.black,),isExpanded: true,value: selectedBoat,onChanged: (Boat _boat) => Provider.of<BoatStreamsCubit>(context,listen: false).setBoat(_boat),selectedItemBuilder: (BuildContext context) {
                  return widget.boats.map<Widget>((Boat boat) {
                    return Row(
                      mainAxisAlignment: MainAxisAlignment.center,crossAxisAlignment: CrossAxisAlignment.center,children: [
                        BoatClasslogo(boat: boat),Expanded(
                          child: Padding(
                            padding: const EdgeInsets.only(left: DesignValues.paddingMd),child: Boatinformation(boat: boat),],);
                  }).toList();
                },items: widget.boats.map<DropdownMenuItem<Boat>>((Boat _boat) {
                  return DropdownMenuItem<Boat>(
                    value: _boat,child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,children: [
                        Padding(
                          padding: const EdgeInsets.only(right: DesignValues.paddingMd),child: BoatClasslogo(boat: _boat),Expanded(
                          child: Boatinformation(boat: _boat),GestureDetector(
                          onTap: () {
                            focusNode.unfocus();
                            Navigator.push(context,MaterialPageRoute(builder: (context) => BoatForm(CreationState.edit,_boat)));
                          },child: Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 5.0),child: Icon(
                              Icons.edit,color: AppColors.primary,);
                }).toList(),);
  }
}

解决方法

我在 dart 中查找了 dropdown 的内部实现。下拉菜单的弹出框是通过使用 Navigator.push() 创建的。它等待用户单击一个项目并使用 Navigator.pop() 返回值。因此，我们可以通过全局键获取下拉菜单的上下文来手动弹出弹出框。

/private/

...

void initState() {
    super.initState();
    dropdownKey = GlobalKey();
}

...

DropdownButton<Boat>(
    key: dropdownKey,

完整代码：

GestureDetector(
    onTap: () {
        Navigator.pop(dropdownKey.currentContext);

,

如果我猜对了，您可以将焦点节点用于下拉菜单。

FocusNode dropdown;

需要在initstate中初始化；

dropdown = FocusNode();

child: DropdownButtonHideUnderline(
                         child: DropdownButton <String>(
                            focusNode: dropdown,

然后当你想关闭这个菜单时，在 ontap 中执行；

  dropdown.unfocus();