Flutter中MultiProvider与Stream工作机制及代码差异咨询

问题描述 #

我无法理解Flutter中MultiProvider的工作机制。现分享两个MyTabs类的版本：第二个版本中Stream仅在选中第三个标签页时才会被监听，但第一个版本无需选中第三个标签页，就会自动监听Stream。希望了解Flutter中MultiProvider与Stream的工作原理。

基础代码：StreamData类 #

import 'dart:async';

class StreamData {
  final StreamController<int> _valueStreamController = StreamController<int>();
  late Stream<int> valueStream;

  int _counter = 0;

  Stream<int> get myStream => _valueStreamController.stream;

  int get streamCount => _counter;

  StreamData() {
    valueStream = _valueStreamController.stream;
    _startTimer();
  }

  void _startTimer() {
    Timer.periodic(Duration(seconds: 1), (timer) {
      _counter++;
      _valueStreamController.add(_counter);
    });
  }

  void dispose() {
    _valueStreamController.close();
  }
}

版本一：Stream自动启动监听 #

class MyTabs extends StatelessWidget {
  MyTabs({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final Stream<int> myStream = StreamData().myStream;

    return DefaultTabController(
      length: 3,
      child: MultiProvider(
        providers: [
          StreamProvider<int>(
            create: (context) => myStream,
            initialData: 0,
          ),
        ],
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tab Demo'),
            bottom: const TabBar(
              tabs: <Widget>[
                Tab(text: 'First'),
                Tab(text: 'Second'),
                Tab(text: 'Third'),
              ],
            ),
          ),
          body: const TabBarView(
            children: <Widget>[
              FirstScreen(),
              SecondScreen(),
              ThirdScreen(),
            ],
          ),
        ),
      ),
    );
  }
}

版本二：仅选中第三标签页时Stream才被监听 #

class MyTabs extends StatelessWidget {
  MyTabs({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: MultiProvider(
        providers: [
          StreamProvider<int>(
            create: (context) => StreamData().myStream,
            initialData: 0,
          ),
        ],
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tab Demo'),
            bottom: const TabBar(
              tabs: <Widget>[
                Tab(text: 'First'),
                Tab(text: 'Second'),
                Tab(text: 'Third'),
              ],
            ),
          ),
          body: const TabBarView(
            children: <Widget>[
              FirstScreen(),
              SecondScreen(),
              ThirdScreen(),
            ],
          ),
        ),
      ),
    );
  }
}

核心原理分析 #

1. StreamData的启动逻辑 #

首先看StreamData的构造函数：只要实例化StreamData，就会立刻调用_startTimer()启动定时器，Stream开始每秒发送数据。也就是说，StreamData实例创建的那一刻，Stream就已经在产生事件了，和是否有订阅者无关。

2. 两个版本的关键差异 #

版本一：Stream提前启动

在MyTabs的build方法里，直接执行StreamData().myStream，这会立刻创建StreamData实例，定时器随之启动，Stream开始发送数据。

• 后续StreamProvider的create回调只是返回已经存在的Stream，不管有没有Widget订阅这个Provider，StreamData已经完成初始化，Stream处于活跃状态。

版本二：Stream延迟启动

StreamProvider的create回调里才执行StreamData().myStream，而Provider的create回调有个核心特性：只有当有后代Widget通过Provider.of、Consumer或Select等方式订阅该Provider时，create才会被调用。

• 再结合TabBarView的懒加载特性：默认情况下，TabBarView只会构建当前选中标签页对应的Widget，未选中的标签页Widget不会被初始化。只有当你切换到第三个标签页时，ThirdScreen才会被构建，如果ThirdScreen里有订阅这个StreamProvider的代码，create回调才会触发，StreamData实例才被创建，定时器启动，Stream开始被监听。

3. MultiProvider的角色 #

MultiProvider本质只是一个多Provider的容器，它的作用是把多个Provider集中声明，简化代码结构，并不会改变单个Provider的工作逻辑。这里的核心差异完全由StreamProvider的create回调执行时机，以及TabBarView的懒加载特性决定。

额外注意事项 #

版本一存在明显的问题：每次MyTabs的build方法执行时，都会创建新的StreamData实例，导致多个定时器同时运行，而且没有调用dispose关闭StreamController，会造成内存泄漏。
正确的做法应该用StatefulWidget管理StreamData的生命周期，或者使用StreamProvider的autoDispose参数（需确保provider包版本支持），在Provider不再被订阅时自动清理资源。

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