Flutter点击按钮显示当前时间时两按钮时间相同问题如何解决

问题根因 #

你代码中的getTime变量仅在页面初始化的initState阶段被赋值一次，存储的是页面刚加载时的时间。后续点击两个按钮时都没有重新触发获取最新时间的逻辑，直接复用了最早缓存的旧getTime值，因此会出现时间不更新的问题。另外你代码中还存在变量名大小写不一致的问题，定义的变量是timeOutText，按钮2调用时写成了timeoutText，会导致编译报错。

修复方案 #

调整按钮点击逻辑，每次点击按钮时先调用_getTime()获取最新的当前时间，再赋值给对应按钮的文本变量即可，修改后的参考代码如下：

@override
void initState() {
  super.initState();
  // 如果不需要页面刚加载就预取时间，下面这行可以删除
  // _getTime();
}

void _getTime() {
  final String formattedDateTime =
      DateFormat('kk:mm:ss').format(DateTime.now()).toString();
  setState(() {
    getTime = formattedDateTime;
  });
}

var timeInText = "Time in";
var timeOutText = "Time out";

// 按钮1
RoundedButton(
  icon: Icon(Icons.timer, color: Colors.white),
  text: timeInText,
  bgcolor: Colors.blue[500],
  press: () {
    // 点击时先获取最新时间再赋值
    _getTime();
    setState(() {
      timeInText = getTime;
    });
  }
)

// 按钮2
RoundedButton(
  icon: Icon(Icons.timer, color: Colors.white),
  text: timeOutText,
  bgcolor: Colors.blue[500],
  press: () {
    // 点击时先获取最新时间再赋值
    _getTime();
    setState(() {
      timeOutText = getTime;
    });
  }
)

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