Flutter中StreamController分页功能异常排查求助

核心问题拆解 #

1. 分页范围跳变&循环加载 #

• 根源：range()函数被三次调用（print输出、请求的起始/结束参数），每次调用都会修改lastRange，导致实际请求的范围连续跳变三次（比如第一次[0,10]，第二次[11,20]，第三次[21,30]），最终请求的是第三次的范围，且lastRange直接跳到30，后续分页完全偏离预期。
• 附加问题：无加载状态控制，getData()执行过程中若再次被触发（如滚动监听重复触发、Stream更新导致界面重建），会重复执行加载逻辑，一次性拉取所有数据。

2. 后台切换后数据清空 #

• 根源：使用static变量存储数据和分页状态，当应用被系统后台回收时，进程销毁导致static数据丢失；同时static变量不属于State实例，不符合Flutter状态管理的最佳实践。

代码修复方案 #

1. 修复分页范围与重复加载问题 #

修改State成员变量

将static变量改为实例变量，新增加载状态标志：

class _FloatingTabBarViewState extends State<FloatingTabBarView> with AutomaticKeepAliveClientMixin<FloatingTabBarView>, WidgetsBindingObserver {
  @override
  bool get wantKeepAlive => true;

  List<Post> currentUserPosts = [];
  late Profile currentProfile;

  // 移除static，改为实例变量
  int lastRange = 0;
  List<List<dynamic>> data = [[], []];
  late StreamController<List> controller;
  bool isLoading = false; // 新增：防止重复加载的标志

  // ... 其他初始化代码
}

重构getData()函数

缓存范围结果，添加加载状态控制：

void getData() async {
  if (isLoading) return; // 正在加载时直接返回，避免重复调用
  setState(() => isLoading = true);

  List<UserSearchResult> usersList = List.from(data.first);
  List<Post> postsList = List.from(data.last);

  print('Getting/Updating data');

  // 只调用一次范围计算，缓存结果
  List<int> getRange() {
    if (lastRange == 0) {
      lastRange = 10;
      return [0, 10];
    } else {
      int newMin = lastRange + 1;
      int newMax = lastRange + 10;
      lastRange = newMax;
      return [newMin, newMax];
    }
  }

  final rangeValues = getRange();
  print('Range: $rangeValues');

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

    for (var post in newPostsList) {
      postsList.add(post);

      // 简化用户存在性判断
      if (usersList.every((u) => u.uid != post.uid)) {
        try {
          final userDoc = await Supabase.db.from('profiles').select().eq('uid', post.uid).single();
          ProfileInfoObject profileInfo = ProfileInfoObject.fromJson(userDoc);
          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);
        } catch (e) {
          print('Failed getting user: $e');
        }
      } else {
        final user = usersList.firstWhere((u) => u.uid == post.uid);
        if (user.profile.posts.every((p) => p.postId != post.postId)) {
          user.profile.posts.add(post);
        }
      }
    }

    // 更新本地数据并发送到Stream
    data = [usersList, postsList];
    controller.add(data);
  } catch (e) {
    print('Failed loading data: $e');
    // 加载失败时回滚分页位置
    if (lastRange != 0) lastRange -= 10;
  } finally {
    setState(() => isLoading = false);
  }
}

滚动监听处添加加载状态判断

在HomeScreen的滚动监听逻辑中，仅当未加载时触发getData()：

// 示例：HomeScreen中的滚动控制器监听
scrollController.addListener(() {
  if (scrollController.position.pixels == scrollController.position.maxScrollExtent && !widget.isLoading) {
    widget.onLoadMore();
  }
});

需要在tabList中传递加载状态和回调：

TabItem(
  icon: const Icon(Icons.home_outlined, size: 35),
  selectedIcon: const Icon(Icons.home, size: 35),
  label: "Home",
  tabWidget: HomeScreen(
    usersMap: users,
    postsList: posts,
    onLoadMore: getData,
    isLoading: isLoading,
  ),
),

2. 修复后台切换数据丢失问题 #

添加应用生命周期监听，结合本地缓存持久化数据：

初始化与生命周期监听

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addObserver(this); // 添加生命周期监听
  controller = StreamController<List>.broadcast();
  currentProfile = Profile(
    ProfileInfoObject(
      Supabase.auth.currentUser!.userMetadata!['photoURL'].toString(),
      Supabase.auth.currentUser!.userMetadata!['displayName'].toString(),
    ),
    [],
  );
  PermissionsService.checkPermissions(context);
  _loadCachedData(); // 启动时加载缓存
  if (data.last.isEmpty) getData(); // 缓存为空时初始加载
}

@override
void dispose() {
  WidgetsBinding.instance.removeObserver(this);
  controller.close(); // 关闭StreamController，防止内存泄漏
  super.dispose();
}

// 监听应用生命周期变化
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
  super.didChangeAppLifecycleState(state);
  if (state == AppLifecycleState.paused) {
    _saveCachedData(); // 进入后台时保存数据
  } else if (state == AppLifecycleState.resumed) {
    _loadCachedData(); // 返回前台时加载缓存
  }
}

本地缓存实现（使用shared_preferences）

// 保存数据到本地缓存
Future<void> _saveCachedData() async {
  final prefs = await SharedPreferences.getInstance();
  // 需确保Post、UserSearchResult等模型有toJson()方法
  final postsJson = jsonEncode(data.last.map((post) => (post as Post).toJson()).toList());
  final usersJson = jsonEncode(data.first.map((user) => (user as UserSearchResult).toJson()).toList());
  await prefs.setString('cached_posts', postsJson);
  await prefs.setString('cached_users', usersJson);
  await prefs.setInt('last_range', lastRange);
}

// 从本地缓存加载数据
Future<void> _loadCachedData() async {
  final prefs = await SharedPreferences.getInstance();
  final postsJson = prefs.getString('cached_posts');
  final usersJson = prefs.getString('cached_users');
  final savedLastRange = prefs.getInt('last_range');
  
  if (savedLastRange != null) lastRange = savedLastRange;
  if (postsJson != null && usersJson != null) {
    final postsList = (jsonDecode(postsJson) as List).map((e) => Post.fromJson(e)).toList();
    final usersList = (jsonDecode(usersJson) as List).map((e) => UserSearchResult.fromJson(e)).toList();
    data = [usersList, postsList];
    controller.add(data); // 加载缓存后更新界面
  }
}

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