如何在Flutter中创建指定样式的Drop Down Button？

以下是实现这类下拉按钮的完整代码，包含基础结构、样式美化和交互逻辑：

1. HTML 结构 #

<div class="dropdown-container">
  <button class="dropdown-btn">
    选项 <span class="arrow">▼</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
    <li><a href="#">更多选项</a></li>
  </ul>
</div>

2. CSS 样式 #

/* 容器用于定位下拉菜单 */
.dropdown-container {
  position: relative;
  display: inline-block;
}

/* 下拉按钮基础样式 */
.dropdown-btn {
  background-color: #f1f1f1;
  color: #333;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dropdown-btn:hover {
  background-color: #e8e8e8;
}

/* 下拉箭头 */
.arrow {
  font-size: 12px;
}

/* 下拉菜单默认隐藏 */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  list-style: none;
  padding: 0;
  min-width: 150px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: none;
  z-index: 100;
}

/* 菜单选项样式 */
.dropdown-menu li {
  padding: 8px 12px;
}

.dropdown-menu li:hover {
  background-color: #f1f1f1;
}

.dropdown-menu a {
  text-decoration: none;
  color: #333;
  display: block;
}

/* 菜单显示状态类 */
.dropdown-menu.active {
  display: block;
}

3. JavaScript 交互逻辑 #

const dropdownBtn = document.querySelector('.dropdown-btn');
const dropdownMenu = document.querySelector('.dropdown-menu');

// 点击按钮切换菜单显示/隐藏
dropdownBtn.addEventListener('click', () => {
  dropdownMenu.classList.toggle('active');
});

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

你可以根据需求调整按钮的颜色、尺寸、菜单选项内容，让样式完全匹配你的需求。

内容的提问来源于stack exchange，提问作者Jayyii Anlacan