Flutter中如何通知Stream更新实现分页？代码故障求助

问题概述 #

首次开发Flutter分页功能，计划通过Stream在用户滑到列表底部时更新数据，但目前无法正常运行：

• 首次数据范围未返回，快照为空
• 尝试用ChangeNotifier通知Stream更新，但未生效

现有代码 #

DataProvider类 #

class DataProvider extends ChangeNotifier{
  DataProvider() : super();

  static var changeController = ChangeNotifier();

  static void reload() {
    changeController.notifyListeners();
  }

  static int lastRange = 0;

  static List data = [];

  static Stream<List> paginatedUsersAndPosts() async* {
    List<UserSearchResult> usersList = data.first;
    List<Post> postsList = data.last;

    print('Notifier');

    changeController.addListener(() async {
      print('Change notified, getting data');

      List<int> range() {
        if (lastRange == 0) {
          lastRange = 10;
          return [0, 10];
        } else {
          // Example 0, 10 => 11, 20
          int newMin = lastRange + 1;
          int newMax = lastRange + 10;
          lastRange = newMax;
          return [newMin, newMax];
        }
      }

      List<Map<String, dynamic>> postsDocs = await Supabase.db
          .from('posts')
          .select()
          .order('date', ascending: false)
          .range(range().first, range().last);
      List<Post> newPostsList =
      postsDocs.map((postDoc) => Post.fromJson(postDoc)).toList();

      newPostsList.forEach((post) async {
        postsList.add(post);

        if (usersList.where((u) => u.uid == post.uid).isNotEmpty) {
          Map<String, dynamic> userDoc =
          await Supabase.db.from('profiles').select().single();

          ProfileInfoObject profileInfo = ProfileInfoObject.fromJson(userDoc);
          print('New profile: $profileInfo');
          Profile profile = Profile(profileInfo, []);
          profile.posts.add(post);
          List blockedUsers = userDoc['blockedUsers'] as List;
          UserSearchResult user = (UserSearchResult(
              profile, userDoc['uid'].toString(), blockedUsers));

          usersList.add(user);
        }
      });
    });

    yield [usersList, postsList];
  }
}

主Widget代码 #

class FloatingTabBarView extends StatefulWidget {
  const FloatingTabBarView({Key? key}) : super(key: key);

  @override
  State<FloatingTabBarView> createState() => _FloatingTabBarViewState();
}

class _FloatingTabBarViewState extends State<FloatingTabBarView> {

  @override
  void initState() {
    PermissionsService.checkPermissions(context);

    DataProvider.reload();
    super.initState();
  }

    Stream<List> stream = DataProvider.paginatedUsersAndPosts();

    return StreamBuilder<List>(
        stream: stream,
        builder: (context, AsyncSnapshot<List<dynamic>> snapshot) {
          ...
        });
  }

  @override
  Widget build(BuildContext context) {
    return floatingTabBarPageView();
  }
}

问题分析与修复方案 #

1. 初始数据加载失败 #

• 问题：data初始为空列表，直接调用data.first和data.last会抛出异常，导致首次数据无法返回。
• 修复：初始化数据容器为空用户列表和空帖子列表，同时在Stream启动时主动加载第一页数据。

2. Stream未更新数据 #

• 问题：当前仅在Stream启动时yield一次数据，后续获取新数据后没有再次触发yield，StreamBuilder无法感知数据变化。
• 修复：用StreamController管理数据流，在每次加载完新数据后向控制器添加新数据，确保StreamBuilder能收到更新。

3. 范围计算错误 #

• 问题：range()函数被调用两次，导致单次请求的范围直接跳两级（比如第一次调用返回[0,10]，第二次调用直接返回[11,20]）。
• 修复：只调用一次range()并保存结果，再将结果传给查询的range()方法。

4. 异步forEach导致数据不同步 #

• 问题：newPostsList.forEach((post) async {})中的异步操作不会等待完成，可能导致数据还未全部添加就触发更新。
• 修复：改用for循环遍历帖子列表，确保每个异步操作执行完成后再处理下一个。

5. 静态成员导致状态混乱 #

• 问题：所有成员都是静态的，会导致全局状态共享，多个实例使用时出现数据冲突。
• 修复：将DataProvider改为非静态类，利用自身的ChangeNotifier能力触发加载下一页。

修改后的代码示例 #

优化后的DataProvider #

class DataProvider extends ChangeNotifier {
  final List<UserSearchResult> _usersList = [];
  final List<Post> _postsList = [];
  int _lastRange = 0;
  final _streamController = StreamController<List>.broadcast();

  DataProvider() {
    // 初始化时加载第一页数据
    _loadNextPage().then((_) {
      _streamController.add([_usersList, _postsList]);
    });
    // 监听自身通知，触发下一页加载
    addListener(() {
      _loadNextPage().then((_) {
        _streamController.add([_usersList, _postsList]);
      });
    });
  }

  // 对外暴露Stream
  Stream<List> get paginatedUsersAndPosts => _streamController.stream;

  // 触发加载下一页
  void loadMore() {
    notifyListeners();
  }

  Future<void> _loadNextPage() async {
    final range = _getRange();
    try {
      // 获取帖子数据
      final postsDocs = await Supabase.db
          .from('posts')
          .select()
          .order('date', ascending: false)
          .range(range[0], range[1]);
      final newPostsList = postsDocs.map((doc) => Post.fromJson(doc)).toList();

      // 遍历帖子，确保异步操作顺序执行
      for (final post in newPostsList) {
        _postsList.add(post);

        // 检查用户是否已存在，不存在则拉取用户数据
        final userExists = _usersList.any((u) => u.uid == post.uid);
        if (!userExists) {
          final userDoc = await Supabase.db.from('profiles').select().eq('uid', post.uid).single();
          final profileInfo = ProfileInfoObject.fromJson(userDoc);
          final profile = Profile(profileInfo, []);
          profile.posts.add(post);
          final blockedUsers = userDoc['blockedUsers'] as List;
          final user = UserSearchResult(profile, userDoc['uid'].toString(), blockedUsers);
          _usersList.add(user);
        }
      }
    } catch (e) {
      print('加载数据失败: $e');
    }
  }

  List<int> _getRange() {
    if (_lastRange == 0) {
      _lastRange = 10;
      return [0, 10];
    } else {
      final newMin = _lastRange + 1;
      final newMax = _lastRange + 10;
      _lastRange = newMax;
      return [newMin, newMax];
    }
  }

  // 释放资源
  @override
  void dispose() {
    _streamController.close();
    super.dispose();
  }
}

优化后的主Widget #

class FloatingTabBarView extends StatefulWidget {
  const FloatingTabBarView({Key? key}) : super(key: key);

  @override
  State<FloatingTabBarView> createState() => _FloatingTabBarViewState();
}

class _FloatingTabBarViewState extends State<FloatingTabBarView> {
  late final DataProvider _dataProvider;
  late final ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    PermissionsService.checkPermissions(context);
    _dataProvider = DataProvider();
    _scrollController = ScrollController();
    // 添加滑动监听，触底时加载更多
    _scrollController.addListener(() {
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
        _dataProvider.loadMore();
      }
    });
  }

  @override
  void dispose() {
    _dataProvider.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  Widget floatingTabBarPageView() {
    return StreamBuilder<List>(
      stream: _dataProvider.paginatedUsersAndPosts,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError) {
          return Center(child: Text('加载失败: ${snapshot.error}'));
        }
        if (!snapshot.hasData || snapshot.data!.isEmpty) {
          return const Center(child: Text('暂无数据'));
        }

        final usersList = snapshot.data![0] as List<UserSearchResult>;
        final postsList = snapshot.data![1] as List<Post>;

        return ListView.builder(
          controller: _scrollController,
          itemCount: postsList.length,
          itemBuilder: (context, index) {
            // 替换为你的帖子项组件
            return ListTile(title: Text(postsList[index].title));
          },
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return floatingTabBarPageView();
  }
}

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