Flutter秒表应用如何将Start、Stop两个按钮合并为同一个功能按钮

实现思路 #

• 添加状态变量标记秒表当前运行状态，按钮的UI样式、点击逻辑根据状态动态切换
• 点击按钮时根据当前状态执行对应的启动/停止逻辑，同步更新状态刷新UI
• 重置按钮点击时同步复位状态变量，避免状态不一致

具体修改步骤 #

步骤1：新增状态变量 #

在_MyAppState类中新增运行状态标记变量：

// 新增变量，标记秒表当前是否正在运行
bool _isRunning = false;

步骤2：替换原有启停两个按钮为单个动态按钮 #

找到原来的Start、Stop两个RaisedButton代码段，整体替换为以下代码：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 4),
  child: RaisedButton(
    padding: const EdgeInsets.all(4),
    // 根据运行状态切换按钮颜色
    color: _isRunning ? Colors.red : Colors.green,
    shape: const StadiumBorder(),
    onPressed: () async {
      HapticFeedback.mediumImpact();
      if (_isRunning) {
        // 当前运行中，执行停止+计次逻辑（和原有Stop按钮逻辑完全一致）
        _stopWatchTimer.onExecute.add(StopWatchExecute.lap);
        _stopWatchTimer.onExecute.add(StopWatchExecute.stop);
      } else {
        // 当前未运行，执行启动逻辑（和原有Start按钮逻辑完全一致）
        _stopWatchTimer.onExecute.add(StopWatchExecute.start);
      }
      // 更新状态刷新UI
      setState(() {
        _isRunning = !_isRunning;
      });
    },
    child: Text(
      // 根据运行状态切换按钮文本
      _isRunning ? 'Stop' : 'Start',
      style: const TextStyle(
        color: Colors.white,
        fontFamily: 'Poppins',
        fontSize: 15,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
),

步骤3：修正重置按钮逻辑，同步复位状态 #

找到Reset按钮的onPressed回调，修改为以下代码，避免重置后状态错乱：

onPressed: () async {
  HapticFeedback.mediumImpact();
  _stopWatchTimer.onExecute.add(StopWatchExecute.reset);
  // 重置后复位运行状态
  setState(() {
    _isRunning = false;
  });
},

功能说明 #

修改后完全保留原有业务逻辑：首次点击按钮启动秒表，按钮自动切换为红色Stop样式；再次点击触发计次+停止逻辑，按钮切回绿色Start样式；点击重置按钮后所有状态复位。

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