Flutter中如何实现简易的滑块盒子切换动画效果？

HTML结构 #

先搭建基础DOM结构，用容器包裹两个选项盒子：

<div class="toggle-container">
  <div class="toggle-box active">是</div>
  <div class="toggle-box">否</div>
</div>

CSS样式 #

设置盒子基础样式，通过active类区分高亮状态，添加transition属性实现平滑过渡：

.toggle-container {
  display: flex;
  gap: 8px;
}

.toggle-box {
  width: 80px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  background-color: #e0e0e0; /* 浅灰色默认状态 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

.toggle-box.active {
  background-color: #666666; /* 深灰色高亮状态 */
  color: white;
}

JavaScript交互 #

给每个盒子绑定点击事件，切换active类实现状态切换：

const toggleBoxes = document.querySelectorAll('.toggle-box');

toggleBoxes.forEach(box => {
  box.addEventListener('click', () => {
    // 移除所有盒子的active类
    toggleBoxes.forEach(item => item.classList.remove('active'));
    // 给当前点击的盒子添加active类
    box.classList.add('active');
  });
});

关键说明 #

• 用transition: background-color 0.3s ease实现背景色平滑过渡，可调整0.3s改变过渡速度
• 通过切换active类控制高亮状态，逻辑简单直接
• 可根据需求修改盒子尺寸、颜色、圆角等样式参数

内容的提问来源于stack exchange，提问作者Cidiko Andorem