Flutter中Homefeed与Profile页面数据同步方案咨询

1. 全局状态管理（推荐） #

用Flutter状态管理工具（如Provider、Riverpod、Bloc）维护一份全局帖子数据源，两个页面统一从全局数据源读取数据，操作后直接更新全局状态，所有依赖该状态的页面会自动同步刷新。

实现示例（以Provider为例）： #

• 创建全局帖子状态管理类：

class PostProvider extends ChangeNotifier {
  List<Post> _allPosts = [];
  List<Post> get allPosts => _allPosts;

  // 初始化拉取全量帖子
  Future<void> fetchAllPosts() async {
    final response = await apiClient.getAllPosts();
    _allPosts = response.data;
    notifyListeners();
  }

  // 点赞操作：更新全局数据+异步请求服务器
  void likePost(String postId) {
    final targetPost = _allPosts.firstWhere((p) => p.id == postId);
    targetPost.isLiked = !targetPost.isLiked;
    targetPost.likesCount += targetPost.isLiked ? 1 : -1;
    notifyListeners();
    apiClient.likePost(postId);
  }

  // 删除操作：移除全局数据+异步请求服务器
  void deletePost(String postId) {
    _allPosts.removeWhere((p) => p.id == postId);
    notifyListeners();
    apiClient.deletePost(postId);
  }

  // 编辑操作：更新全局数据+异步请求服务器
  void editPost(String postId, String newContent) {
    final targetPost = _allPosts.firstWhere((p) => p.id == postId);
    targetPost.content = newContent;
    notifyListeners();
    apiClient.editPost(postId, newContent);
  }
}

• 在入口注册Provider：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => PostProvider()..fetchAllPosts(),
      child: MyApp(),
    ),
  );
}

• Homefeed页面直接绑定全局状态：

class Homefeed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final postProvider = Provider.of<PostProvider>(context);
    return ListView.builder(
      itemCount: postProvider.allPosts.length,
      itemBuilder: (_, index) => PostCard(post: postProvider.allPosts[index]),
    );
  }
}

• Profile页面筛选当前用户帖子并调用全局操作方法：

class Profile extends StatelessWidget {
  final String currentUserId;
  Profile(this.currentUserId);

  @override
  Widget build(BuildContext context) {
    final postProvider = Provider.of<PostProvider>(context);
    final userPosts = postProvider.allPosts.where((p) => p.userId == currentUserId).toList();
    
    return ListView.builder(
      itemCount: userPosts.length,
      itemBuilder: (_, index) {
        final post = userPosts[index];
        return UserPostCard(
          post: post,
          onLike: () => postProvider.likePost(post.id),
          onDelete: () => postProvider.deletePost(post.id),
          onEdit: (content) => postProvider.editPost(post.id, content),
        );
      },
    );
  }
}

这种方式下，Profile的操作会直接同步到全局数据源，Homefeed无需手动刷新就能自动更新。

2. 事件总线（Event Bus） #

通过全局事件总线传递操作通知，Homefeed监听事件后更新本地数据。

实现步骤： #

• 创建全局事件总线：

final eventBus = EventBus();

• 定义操作事件类：

class PostLikedEvent {
  final String postId;
  PostLikedEvent(this.postId);
}

class PostDeletedEvent {
  final String postId;
  PostDeletedEvent(this.postId);
}

class PostEditedEvent {
  final String postId;
  final String newContent;
  PostEditedEvent(this.postId, this.newContent);
}

• Profile页面操作后发送事件：

// 点赞完成后发送事件
await apiClient.likePost(postId);
eventBus.fire(PostLikedEvent(postId));

// 删除完成后发送事件
await apiClient.deletePost(postId);
eventBus.fire(PostDeletedEvent(postId));

• Homefeed页面监听事件并更新本地列表：

class Homefeed extends StatefulWidget {
  @override
  _HomefeedState createState() => _HomefeedState();
}

class _HomefeedState extends State<Homefeed> {
  List<Post> _localPosts = [];
  late StreamSubscription _eventSubscription;

  @override
  void initState() {
    super.initState();
    _fetchPosts();
    // 订阅事件
    _eventSubscription = eventBus.on<PostLikedEvent>().listen((event) {
      _updatePostLikeStatus(event.postId);
    });
    _eventSubscription.add(eventBus.on<PostDeletedEvent>().listen((event) {
      _removeLocalPost(event.postId);
    }));
  }

  void _updatePostLikeStatus(String postId) {
    setState(() {
      final target = _localPosts.firstWhere((p) => p.id == postId);
      target.isLiked = !target.isLiked;
      target.likesCount += target.isLiked ? 1 : -1;
    });
  }

  void _removeLocalPost(String postId) {
    setState(() => _localPosts.removeWhere((p) => p.id == postId));
  }

  Future<void> _fetchPosts() async {
    final response = await apiClient.getAllPosts();
    setState(() => _localPosts = response.data);
  }

  @override
  void dispose() {
    _eventSubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: _localPosts.length,
      itemBuilder: (_, index) => PostCard(post: _localPosts[index]),
    );
  }
}

这种方式适合小型项目，无需引入复杂状态管理，但需要手动维护事件与更新逻辑的对应关系。

3. 本地缓存同步 #

将帖子数据存储到本地缓存（如Hive、SharedPreferences），两个页面优先从缓存读取数据，操作后同时更新缓存和服务器，通过缓存监听实现页面同步。

实现要点： #

• 初始化时先加载缓存数据，再拉取服务器最新数据更新缓存；
• Profile操作帖子后，直接修改缓存中的对应条目；
• Homefeed监听缓存变化（如Hive的watch方法），自动触发列表刷新。

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