Flutter多选择下拉菜单：点击编辑弹窗保存按钮时关闭下拉菜单

要实现点击编辑价格弹窗的「Save」按钮时同时关闭下拉菜单，核心是让弹窗的保存操作能触发下拉菜单的关闭逻辑，具体步骤如下：

1. 确认下拉菜单的状态控制逻辑 #

首先找到管理下拉菜单展开/关闭的父组件（通常是封装multiselect的主组件），里面应该有类似_isDropdownExpanded的状态变量，或者维护着OverlayEntry实例来控制下拉层的显示。

比如父组件的状态类：

class _MultiselectDropdownState extends State<MultiselectDropdown> {
  bool _isDropdownExpanded = false;
  OverlayEntry? _dropdownOverlay;

  // 定义关闭下拉菜单的方法
  void _closeDropdown() {
    // 移除Overlay层（如果用Overlay实现下拉）
    _dropdownOverlay?.remove();
    setState(() {
      _isDropdownExpanded = false;
      _dropdownOverlay = null;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 渲染下拉菜单的逻辑，根据_isDropdownExpanded控制显示
    return GestureDetector(
      onTap: () => setState(() => _isDropdownExpanded = !_isDropdownExpanded),
      child: Column(
        children: [
          // 下拉触发按钮
          ...
          // 下拉菜单内容，包含_SelectRow组件
          if (_isDropdownExpanded)
            _SelectRow(
              // 传递关闭下拉菜单的回调到_SelectRow
              onSave: () => _closeDropdown(),
            ),
        ],
      ),
    );
  }
}

2. 修改_SelectRow组件的Save按钮回调 #

在_SelectRow组件中，给「Save」按钮的onPressed添加触发父组件关闭下拉菜单的逻辑：

class _SelectRow extends StatelessWidget {
  final VoidCallback? onSave;

  const _SelectRow({this.onSave});

  void _showPriceEditDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('Edit Price'),
        content: TextField(/* 价格输入框逻辑 */),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text('Cancel'),
          ),
          ElevatedButton(
            onPressed: () {
              // 1. 执行价格保存逻辑（比如更新选中项的价格）
              // ...

              // 2. 关闭弹窗
              Navigator.pop(ctx);

              // 3. 触发父组件关闭下拉菜单
              onSave?.call();
            },
            child: const Text('Save'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: const Text('Item'),
      trailing: IconButton(
        icon: const Icon(Icons.edit),
        onPressed: () => _showPriceEditDialog(context),
      ),
    );
  }
}

关键说明 #

• 如果下拉菜单是通过PopupMenuButton或其他路由方式实现的，只需在onSave回调中调用Navigator.pop(context)（注意上下文层级，确保是下拉菜单所在的路由上下文）。
• 核心思路是通过回调函数将下拉菜单的关闭逻辑传递到弹窗的保存操作中，实现两个动作的联动。

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