如何在Flutter中设计注射器样式的输入文本框？

可以用 HTML+CSS+JavaScript 快速实现这个组件，以下是完整的编码方案，完全匹配设计图的注射器形态和交互逻辑：

代码实现 #

HTML 结构 #

构建注射器的基础结构，包含针筒、刻度、数字输入区和推杆：

<div class="syringe-input">
  <!-- 针筒主体 -->
  <div class="syringe-barrel">
    <!-- 刻度线与数值 -->
    <div class="scale-marks">
      <span class="mark mark-10">10</span>
      <span class="mark mark-8">8</span>
      <span class="mark mark-6">6</span>
      <span class="mark mark-4">4</span>
      <span class="mark mark-2">2</span>
      <span class="mark mark-0">0</span>
    </div>
    <!-- 可滑动推杆 -->
    <div class="plunger" id="plunger"></div>
  </div>
  <!-- 数字控制区 -->
  <div class="input-controls">
    <button class="btn-decrease" id="btnDecrease">-</button>
    <input type="number" class="number-input" id="numberInput" min="0" max="10" value="0">
    <button class="btn-increase" id="btnIncrease">+</button>
  </div>
</div>

CSS 样式 #

模拟注射器的视觉效果，包括针筒渐变、刻度布局和推杆样式：

/* 整体容器 */
.syringe-input {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

/* 针筒主体 */
.syringe-barrel {
  width: 40px;
  height: 200px;
  border: 3px solid #333;
  border-radius: 0 0 10px 10px;
  position: relative;
  background: linear-gradient(to bottom, #fff 0%, #e0f7fa 100%);
  overflow: hidden;
}

/* 刻度线 */
.scale-marks {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.mark {
  position: absolute;
  left: 5px;
  width: 25px;
  border-top: 1px solid #333;
  text-align: right;
  font-size: 12px;
}

.mark-10 { top: 10px; }
.mark-8 { top: 50px; }
.mark-6 { top: 90px; }
.mark-4 { top: 130px; }
.mark-2 { top: 170px; }
.mark-0 { top: 200px; }

/* 推杆 */
.plunger {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 87, 34, 0.7);
  transition: height 0.3s ease;
}

/* 数字控制区 */
.input-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-decrease, .btn-increase {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #2196F3;
  color: white;
  font-size: 18px;
  cursor: pointer;
}

.number-input {
  width: 40px;
  height: 40px;
  text-align: center;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
}

JavaScript 交互 #

实现数字输入与推杆位置的联动，处理加减按钮和输入框的数值限制：

const numberInput = document.getElementById('numberInput');
const plunger = document.getElementById('plunger');
const btnIncrease = document.getElementById('btnIncrease');
const btnDecrease = document.getElementById('btnDecrease');

// 更新推杆高度
function updatePlunger(value) {
  const percentage = (10 - value) / 10 * 100;
  plunger.style.height = `${percentage}%`;
}

// 初始化推杆位置
updatePlunger(numberInput.value);

// 输入框数值变化监听
numberInput.addEventListener('input', function() {
  let value = parseInt(this.value);
  // 限制数值范围
  if (isNaN(value)) value = 0;
  if (value < 0) value = 0;
  if (value > 10) value = 10;
  this.value = value;
  updatePlunger(value);
});

// 增加按钮点击事件
btnIncrease.addEventListener('click', function() {
  let value = parseInt(numberInput.value);
  if (value < 10) {
    value++;
    numberInput.value = value;
    updatePlunger(value);
  }
});

// 减少按钮点击事件
btnDecrease.addEventListener('click', function() {
  let value = parseInt(numberInput.value);
  if (value > 0) {
    value--;
    numberInput.value = value;
    updatePlunger(value);
  }
});

移动端适配建议 #

• 调整针筒高度为 150px，按钮和输入框高度设为 50px，适配触摸操作；
• 如果用 React/Vue 框架，可以将组件封装为可复用的自定义组件，用状态管理数值；
• 可添加推杆滑动的触觉反馈，提升APP交互体验。

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