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

问题描述

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

应用截图： https://ibb.co/mqtDp8x

https://ibb.co/JkrkC9T

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

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

一个月前我刚刚开始使用 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);
                  },);
  }
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）