Flutter时钟组件的两种异步时间更新实现优化咨询

我正在开发一个Flutter时钟组件，用来展示当前时间，打算做两种异步更新时间的方案：一种是通过持续的时间更新流来实现，另一种是借助定时器定期更新。下面是我的实现思路和代码，想和大家聊聊其中的细节~

代码说明 #

clock() 方法 #

• 这个方法会持续异步返回时间更新的流
• 通过while(true)循环不断获取当前时间DateTime.now()，并用DateFormat格式化
• 把格式化后的时间以字符串形式yield出去，同时打印到控制台
• 用Future.delayed()控制更新频率，这里设置的是100毫秒，所以print语句最多每秒重复10次

timer() 方法 #

• 这个方法通过定时器逻辑来异步返回时间更新流
• 先初始化当前时间并完成格式化
• 在while(true)循环里，会检查当前时间和上一次记录的时间是否不同：如果不同，就更新时间并yield；如果相同，就重复输出当前时间，最多重复5次
• 同样用Future.delayed()控制间隔，这里设置的是200毫秒

完整实现代码 #

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

class Clock extends StatefulWidget {
  const Clock({super.key});

  @override
  State<Clock> createState() => _ClockState();
}

class _ClockState extends State<Clock> {

  //第一种方法，返回字符串格式的时间
  Stream<String> clock() async* {

    DateTime time;
    String current;
    while (true) {
      time = DateTime.now();
      current = DateFormat('hh : mm : ss').format(time);
      yield current;
      print(current);
      await Future.delayed(
        Duration(milliseconds: 100),
      );
    }
  }
  
   //第二种方法
  Stream<String> timer() async* {
    DateTime time = DateTime.now();
    String current = DateFormat('hh : mm : ss').format(time);

    while (true) {
      if (current != DateFormat('hh : mm : ss').format(DateTime.now())) {
        current = DateFormat('hh : mm : ss').format(DateTime.now());
        yield current;
        print(current);
        await Future.delayed(
        Duration(milliseconds: 200),
      );
      } else {
        yield current;
        //这条打印语句最多重复5次
        print(current);
        await Future.delayed(
        Duration(milliseconds: 200),
      );
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: StreamBuilder(
          stream: timer(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return Container(
                height: 350,
                width: 350,
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.blue,
                      width: 4,
                    ),
                    shape: BoxShape.circle),
                child: Center(
                  child: Text(
                    '${snapshot.data}',
                    style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              );
            } else {
              return Text('waiting...');
            }
          },
        ),
      ),
    );
  }
}

这里要补充说明下：两个方法都依赖while循环实现持续更新，其中clock()里的print语句每秒最多重复10次（因为间隔100毫秒），timer()里的print语句最多每2秒重复5次（间隔200毫秒）。

备注：内容来源于stack exchange，提问作者Khalil Djoudi