Flutter中如何每隔1秒调用方法或刷新页面以实现数据实时更新？

下面是几种实用的实现方式，按需选择：

1. 使用 Timer.periodic 定时调用方法 #

这是最直接的方式，适合需要主动触发数据刷新逻辑的场景。在State类中初始化定时器，记得在页面销毁时清理，防止内存泄漏。

示例代码：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  Timer? _refreshTimer;
  int _currentData = 0;

  @override
  void initState() {
    super.initState();
    // 每秒触发一次回调
    _refreshTimer = Timer.periodic(const Duration(seconds: 1), (timer) {
      // 这里调用你的数据刷新方法，比如请求接口、更新本地数据
      setState(() {
        _currentData++; // 模拟数据更新
      });
    });
  }

  @override
  void dispose() {
    // 页面销毁时取消定时器
    _refreshTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("当前数据: $_currentData")),
    );
  }
}

2. 使用 StreamBuilder + Stream.periodic #

这种方式更贴合Flutter的响应式设计，通过流来自动驱动UI更新，无需手动调用setState。

示例代码：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  // 创建每秒输出一次的流，这里可以替换成实际的数据流逻辑
  Stream<int> _refreshStream() {
    return Stream.periodic(const Duration(seconds: 1), (count) {
      // 这里可以调用接口获取最新数据，返回实际数据
      return count;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<int>(
        stream: _refreshStream(),
        initialData: 0,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Center(child: Text("当前数据: ${snapshot.data}"));
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }
}

3. 递归调用 Future.delayed #

如果需要更灵活的触发逻辑（比如每次刷新完成后再等待1秒），可以用这种方式，但要注意处理异常，避免无限递归失控。

示例代码：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentData = 0;
  bool _isDisposed = false;

  @override
  void initState() {
    super.initState();
    _startRefresh();
  }

  Future<void> _startRefresh() async {
    while (!_isDisposed) {
      await Future.delayed(const Duration(seconds: 1));
      if (!_isDisposed) {
        setState(() {
          _currentData++; // 模拟数据更新
        });
      }
    }
  }

  @override
  void dispose() {
    _isDisposed = true;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text("当前数据: $_currentData")),
    );
  }
}

注意事项 #

• 不管用哪种方式，都要确保在页面销毁时停止刷新逻辑，防止内存泄漏。
• 如果是网络请求，记得处理请求失败的情况，避免因为一次请求失败导致后续刷新中断。

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