Flutter实现点击横向日历切换白色圆环定位的UI方案求助

需求：点击横向日历上的日期时，带有竖线的白色圆环需切换至点击位置。此前尝试用图片切换的方式实现，但定位不准确，需要可靠的解决方案。

解决方案：用CSS绘制标记 + JS动态定位 #

不用图片做标记，直接用CSS画出带竖线的白色圆环，通过JS获取点击日期的位置，动态移动标记元素，定位精准且易维护。

1. HTML结构

<div class="calendar-container">
  <!-- 选中标记，初始放在第一个日期位置 -->
  <div class="active-indicator"></div>
  <!-- 日历日期项 -->
  <div class="date-item active">1</div>
  <div class="date-item">2</div>
  <div class="date-item">3</div>
  <div class="date-item">4</div>
  <div class="date-item">5</div>
  <div class="date-item">6</div>
  <div class="date-item">7</div>
</div>

2. CSS样式

.calendar-container {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 10px 0;
  background-color: #2c3e50; /* 模拟深色背景 */
  padding-left: 20px;
}

.date-item {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
}

/* 选中标记：白色圆环 + 竖线 */
.active-indicator {
  position: absolute;
  top: 10px;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: none; /* 不干扰日期点击 */
}

.active-indicator::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 20px;
  background-color: #fff;
}

/* 当前选中日期的文字样式可选 */
.date-item.active {
  font-weight: bold;
}

3. JS交互逻辑

const container = document.querySelector('.calendar-container');
const indicator = document.querySelector('.active-indicator');
const dateItems = document.querySelectorAll('.date-item');

dateItems.forEach((item, index) => {
  item.addEventListener('click', () => {
    // 移除所有日期的选中样式
    dateItems.forEach(i => i.classList.remove('active'));
    // 给当前点击的日期添加选中样式
    item.classList.add('active');
    
    // 计算标记需要移动的距离：当前日期的左偏移量
    const offsetLeft = item.offsetLeft;
    indicator.style.left = `${offsetLeft}px`;
  });
});

关键说明 #

• 用CSS的position: absolute和offsetLeft属性精准定位标记，完全避免图片定位的误差问题
• 标记元素用CSS绘制，无需额外图片资源，缩放适配更灵活
• 点击事件中通过offsetLeft获取当前日期的左偏移量，直接设置标记的left值实现平滑移动

内容的提问来源于stack exchange，提问作者DEVINDA ARCHCHI