Question

我正在使用 riverpod 开发应用程序。我有一个带有上下投票功能的帖子列表。我正在努力弄清楚如何在用户投票时管理状态。

当用户从列表页面投票时，用户应该从详细页面看到已经投票的帖子。用户也可以从帖子详细信息页面投票，并且应该在列表页面看到已经投票的帖子。

您对实现这一目标有什么建议吗？

一个月前我刚刚开始使用 flutter 和 riverpod。因此，我也愿意接受有关我以下方法的建议。

帖子列表

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:infinite_scroll_pagination/infinite_scroll_pagination.dart';

class PostList extends StatefulWidget {
  final List<String> filters;
  final bool isSectionDetail;
  final bool isUserDetail;

  PostList({this.filters, this.isSectionDetail = false, this.isUserDetail = false});

  @override
  _PostListState createState() => _PostListState();
}

class _PostListState extends State<PostList> {
  final _pagingController = PagingController<int, Post>(firstPageKey: 0);
  bool hasData = true;

  @override
  void initState() {
    _pagingController.addPageRequestListener((pageKey) {
      _fetchPage(pageKey);
    });
    super.initState();
  }

  Future<void> _fetchPage(int pageKey) async {
    try {
      var listResponse = await context.read(postListNotifierProvider).readPosts(pageKey, widget.filters);

      if (listResponse.content == null) {
        setState(() {
          hasData = false;
        });
      }

      if (listResponse.isLastPage) {
        _pagingController.appendLastPage(listResponse.content);
      } else {
        _pagingController.appendPage(listResponse.content, listResponse.page + 1);
      }
    } catch (error) {}
  }

  @override
  void dispose() {
    _pagingController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return hasData ? RefreshIndicator(
      onRefresh: () => (Future.sync(
        () => _pagingController.refresh(),
      )),
      child: PagedListView.separated(
        shrinkWrap: true,
        pagingController: _pagingController,
        builderDelegate: PagedChildBuilderDelegate(
          itemBuilder: (context, post, i) {
            return PostCard(
            post: post,
            isSectionDetail: widget.isSectionDetail,
            isUserDetail: widget.isUserDetail,
          );
          },
        ),
        separatorBuilder: (c, i) => const SizedBox(
          height: 5,
        ),
      ),
    ) : Container(
      child: Center(
        child: Text("It's lonely here."),
      ),
    );
  }
}

帖子详情

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PostDetail extends StatefulWidget {
  final String postId;

  PostDetail({this.postId});

  @override
  _PostDetailState createState() => _PostDetailState();
}

class _PostDetailState extends State<PostDetail> {
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    print(widget.postId);
    Future.delayed(Duration.zero, () async {
      context.read(postReadNotifierProvider).readPost(widget.postId);
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        centerTitle: true,
        title: Text("Detail"),
      ),
      body: SafeArea(
        child: Consumer(
          builder: (context, watch, child) {
            var state = watch(postReadStateProvider);

            if (state.loading || state.post == null) {
              return Container(
                child: Center(
                  child: CircularProgressIndicator(),
                ),
              );
            }

            if (state.error.isNotEmpty) {
              return Container(
                child: Center(
                  child: Text(state.error),
                ),
              );
            }

            var newComments = watch(commentCreateNotifierProvider.state).comments;
            return Column(
              children: [
                Expanded(
                  child: CustomScrollView(
                    controller: _scrollController,
                    slivers: [
                      SliverList(
                        delegate: SliverChildListDelegate(
                          [
                            PostCard(
                              post: state.post,
                              isPostDetail: true,
                            ),
                            ListView.builder(
                              primary: false,
                              shrinkWrap: true,
                              itemCount: newComments.length,
                              reverse: true,
                              itemBuilder: (context, index) {
                                return CommentCard(
                                  comment: newComments[index],
                                  isNew: true,
                                );
                              },
                            ),
                          ],
                        ),
                      ),
                      CommentList(state.post.id),
                    ],
                  ),
                ),
                CommentBox(
                  state.post.id,
                  scroll: () {
                    _scrollController.animateTo(_scrollController.position.minScrollExtent,
                        duration: Duration(milliseconds: 500), curve: Curves.fastOutSlowIn);
                  },
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

如何从详细信息页面更改列表项状态？

0 个答案: