如何在Flutter中实现带嵌套复选框的下拉菜单？

1. 基础结构搭建 #

• 用HTML构建核心层级结构：外层做一个下拉容器，包含触发按钮和隐藏的下拉面板，面板内用<ul>/<li>嵌套实现层级，每个选项搭配复选框和文本标签。
• 示例结构代码：

<div class="dropdown-container">
  <button class="dropdown-trigger">选择选项</button>
  <div class="dropdown-panel">
    <ul class="checkbox-tree">
      <li>
        <label><input type="checkbox" class="parent-checkbox"> 父选项1</label>
        <ul>
          <li><label><input type="checkbox" class="child-checkbox"> 子选项1-1</label></li>
          <li><label><input type="checkbox" class="child-checkbox"> 子选项1-2</label></li>
        </ul>
      </li>
      <li>
        <label><input type="checkbox" class="parent-checkbox"> 父选项2</label>
        <ul>
          <li><label><input type="checkbox" class="child-checkbox"> 子选项2-1</label></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

2. 样式控制 #

• 下拉显隐：给.dropdown-panel初始设置display: none，点击触发按钮时给容器加active类，通过.dropdown-container.active .dropdown-panel设置display: block显示面板。
• 层级区分：给子级<ul>设置margin-left: 1.5rem，让子选项缩进，直观体现嵌套关系。
• UI美化：给复选框、列表项添加间距、hover高亮等样式，贴近目标UI的视觉效果。

3. 交互逻辑实现 #

• 下拉开关：监听触发按钮的点击事件，切换容器的active类；同时监听页面点击，点击面板外区域时关闭下拉。
• 复选框联动：
  • 父级选中时，自动勾选其下所有子级复选框；父级取消时，子级同步取消。
  • 子级复选框状态变化时，检查同组子级是否全选：全选则勾选父级，部分选中则让父级显示半选状态，全不选则取消父级选中。
• 核心JS代码示例：

// 切换下拉面板显示/隐藏
const trigger = document.querySelector('.dropdown-trigger');
const container = document.querySelector('.dropdown-container');

trigger.addEventListener('click', () => {
  container.classList.toggle('active');
});

// 点击页面其他区域关闭下拉
document.addEventListener('click', (e) => {
  if (!container.contains(e.target)) {
    container.classList.remove('active');
  }
});

// 父级复选框联动子级
document.querySelectorAll('.parent-checkbox').forEach(parent => {
  parent.addEventListener('change', () => {
    const children = parent.closest('li').querySelectorAll('.child-checkbox');
    children.forEach(child => child.checked = parent.checked);
  });
});

// 子级复选框联动父级（含半选状态）
document.querySelectorAll('.child-checkbox').forEach(child => {
  child.addEventListener('change', () => {
    const parentLi = child.closest('li').closest('li');
    const parentCheckbox = parentLi.querySelector('.parent-checkbox');
    const allChildren = parentLi.querySelectorAll('.child-checkbox');
    
    const allChecked = Array.from(allChildren).every(c => c.checked);
    const someChecked = Array.from(allChildren).some(c => c.checked);
    
    parentCheckbox.checked = allChecked;
    parentCheckbox.indeterminate = someChecked && !allChecked;
  });
});

4. 可选优化方向 #

• 半选状态优化：确保父级在子级部分选中时显示半选样式（浏览器默认支持indeterminate属性的视觉效果）。
• 动态数据渲染：如果选项是从后端获取的，可定义层级数据数组，用JS循环生成DOM结构，避免静态硬编码。
• 搜索过滤：在下拉面板顶部添加输入框，根据输入值过滤显示匹配的选项，提升多选项场景的易用性。

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