在Flutter中实现点击分类按钮显示子分类按钮需使用什么组件？

核心思路 #

这是典型的点击展开/收起交互，核心是监听按钮点击事件，控制子分类元素的显示与隐藏状态。

具体实现步骤（前端基础方案） #

• HTML结构搭建：
  给每个分类按钮绑定唯一标识，子分类容器默认设置为隐藏。示例结构：

  <!-- 分类按钮 -->
  <button class="category-btn" data-target="subcat-1">分类1</button>
  <button class="category-btn" data-target="subcat-2">分类2</button>
  
  <!-- 子分类容器（默认隐藏） -->
  <div id="subcat-1" class="subcategory-container" style="display: none;">
    <button class="subcat-btn">子分类1-1</button>
    <button class="subcat-btn">子分类1-2</button>
  </div>
  <div id="subcat-2" class="subcategory-container" style="display: none;">
    <button class="subcat-btn">子分类2-1</button>
    <button class="subcat-btn">子分类2-2</button>
  </div>
  

• CSS样式控制：
  给分类按钮（黄色）、子分类按钮设置样式，可添加过渡效果提升体验：

  .category-btn {
    background-color: #ffcc00; /* 黄色背景 */
    border: none;
    padding: 8px 16px;
    margin: 0 8px 8px 0;
    cursor: pointer;
  }
  .subcat-btn {
    background-color: #e0e0e0;
    border: none;
    padding: 6px 12px;
    margin: 0 6px 6px 0;
    cursor: pointer;
  }
  .subcategory-container {
    margin-left: 20px; /* 子分类缩进 */
    transition: all 0.3s ease; /* 平滑过渡 */
  }
  

• JavaScript交互逻辑：
  监听分类按钮点击，切换对应子分类容器的显示状态：

  const categoryBtns = document.querySelectorAll('.category-btn');
  
  categoryBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const targetId = btn.getAttribute('data-target');
      const subcatContainer = document.getElementById(targetId);
      
      // 切换显示/隐藏
      subcatContainer.style.display = subcatContainer.style.display === 'none' ? 'block' : 'none';
    });
  });
  

进阶优化方向 #

• 用CSS类名切换替代直接修改style，比如定义.hidden类，点击时添加/移除该类，更易维护。
• 若子分类数据动态生成，可通过AJAX请求从后端获取数据后渲染到页面。
• 支持单选模式：点击一个分类时自动收起其他已展开的分类。

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