Flutter中如何为ElevatedButton添加自动倒计时触发功能？

完全可以实现这个需求，核心思路是同时支持手动触发按钮和自动倒计时触发，以下是具体的代码实现：

1. HTML 结构 #

<div class="test-container">
  <p>测试即将自动开始，剩余时间：<span id="countdown">15</span>秒</p>
  <button id="startNextPartBtn">启动测试 NEXT PART</button>
</div>

2. CSS 样式（可选，用于基础美化） #

.test-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

#startNextPartBtn {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
}

#startNextPartBtn:disabled {
  background-color: #6c757d;
  cursor: not-allowed;
}

3. JavaScript 核心逻辑 #

// 获取元素
const startBtn = document.getElementById('startNextPartBtn');
const countdownEl = document.getElementById('countdown');

// 定义定时器变量
let countdownTimer;
let remainingTime = 15;

// 启动测试下一部分的核心函数
function startNextTestPart() {
  // 禁用按钮，防止重复点击
  startBtn.disabled = true;
  // 这里替换成你实际的测试启动逻辑
  console.log('测试 NEXT PART 已启动');
  alert('测试 NEXT PART 已启动');
}

// 倒计时更新函数
function updateCountdown() {
  remainingTime--;
  countdownEl.textContent = remainingTime;
  if (remainingTime <= 0) {
    clearInterval(countdownTimer);
    startNextTestPart();
  }
}

// 初始化倒计时
countdownTimer = setInterval(updateCountdown, 1000);

// 按钮点击事件
startBtn.addEventListener('click', () => {
  // 清除倒计时定时器，避免自动触发
  clearInterval(countdownTimer);
  startNextTestPart();
});

关键逻辑说明 #

• 页面加载后立即启动15秒倒计时，每秒更新剩余时间显示
• 用户点击按钮时，会立即清除倒计时定时器，然后执行启动测试的逻辑，避免重复触发
• 启动测试后会禁用按钮，防止用户多次点击
• 倒计时结束后自动执行启动测试的逻辑，和按钮点击触发的是同一个函数

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