如何在Flutter中实现可拖拽/可展开的底部导航栏？

下面是实现这种可展开导航栏的代码方案，分HTML、CSS、JS三部分：

HTML 结构 #

用容器包裹所有导航元素，默认显示的图标直接放置，额外图标统一放在子容器中，最后添加汉堡按钮：

<nav class="expandable-nav">
  <!-- 默认显示的5个图标 -->
  <div class="nav-icon">🏠</div>
  <div class="nav-icon">📧</div>
  <div class="nav-icon">🔍</div>
  <div class="nav-icon">⭐</div>
  <div class="nav-icon">⚙️</div>
  
  <!-- 点击后展开的3个图标 -->
  <div class="hidden-icons">
    <div class="nav-icon">📁</div>
    <div class="nav-icon">👤</div>
    <div class="nav-icon">🚪</div>
  </div>
  
  <!-- 汉堡按钮 -->
  <button class="hamburger-btn">☰</button>
</nav>

CSS 样式 #

设置导航栏横向布局，默认隐藏额外图标，通过添加active类触发展开效果：

.expandable-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
  background-color: #f5f5f5;
  border-radius: 8px;
}

.nav-icon {
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.nav-icon:hover {
  background-color: #e0e0e0;
}

/* 默认隐藏额外图标 */
.hidden-icons {
  display: none;
  gap: 1rem;
}

/* 展开状态下显示额外图标 */
.expandable-nav.active .hidden-icons {
  display: flex;
}

.hamburger-btn {
  margin-left: auto;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.hamburger-btn:hover {
  background-color: #e0e0e0;
}

JavaScript 交互逻辑 #

监听汉堡按钮点击事件，切换导航栏的active类，实现展开/收起的切换：

const hamburgerBtn = document.querySelector('.hamburger-btn');
const expandableNav = document.querySelector('.expandable-nav');

hamburgerBtn.addEventListener('click', () => {
  expandableNav.classList.toggle('active');
  // 可选：切换汉堡按钮图标为叉号，增强交互反馈
  hamburgerBtn.textContent = expandableNav.classList.contains('active') ? '✕' : '☰';
});

效果说明 #

• 默认状态：导航栏仅显示5个核心图标和汉堡按钮
• 点击汉堡：额外3个图标横向展开，汉堡按钮变为叉号
• 再次点击：额外图标隐藏，按钮恢复为汉堡样式

你可以把示例里的emoji图标换成项目实际用的图标（比如Font Awesome类），只需要替换<div class="nav-icon">内的内容即可。

内容的提问来源于stack exchange，提问作者MICHEL Baptiste