flutter 如何根据API中的帖子ID显示帖子的评论/详细信息?

6psbrbz9  于 2023-02-13  发布在  Flutter
关注(0)|答案(1)|浏览(120)

我试图从API中检索"comments"数据,但主要问题是我想根据我选择或按下的帖子来查看帖子的评论,而不是提供一个静态的postId作为查询参数。
下面是我的代码:

    • 注解模型**
class Comment {
  int postId;
  int id;
  String name;
  String email;
  String body;

  Comment({
    required this.postId,
    required this.id,
    required this.name,
    required this.email,
    required this.body,
  });

  factory Comment.fromJson(Map<String, dynamic> json) {
    return Comment(
      postId: json['postId'],
      id: json['id'],
      name: json['name'],
      email: json['email'],
      body: json['body'],
    );
  }
}
    • 注解提供程序(使用了Riverpod和Dio)。注意,我使用postId = 1作为查询参数**
final commentProvider = StateNotifierProvider<CommentProvider, List<Comment>>(
    (ref) => CommentProvider());

List<Comment> commentList = [];

class CommentProvider extends StateNotifier<List<Comment>> {
  CommentProvider() : super([]) {
    getComments(postId: 1);
  }

  Future<void> getComments({required int postId}) async {
    final dio = Dio();
    try {
      final response = await dio.get(Api.commentApi, queryParameters: {
        'postId': postId,
      });
      state = (response.data as List).map((e) => Comment.fromJson(e)).toList();
      commentList = state;
      print(response.data);
    } on DioError catch (err) {
      print(err);
    }
  }
}
    • 这是我从API获取帖子数据的主屏幕**
Consumer(
        builder: (context, ref, child) {
          final posts = ref.watch(postProvider);
          return ListView.builder(
            itemCount: posts.length,
            itemBuilder: (context, index) {
              final data = posts[index];
              return Container(
                child: Column(
                  children: [
                    InkWell(
                      onTap: () {
                        Get.to(() => DetailScreen(), transition: Transition.zoom);
                      },
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        padding: EdgeInsets.all(AppPadding.p16),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                CircleAvatar(
                                  backgroundColor: Colors.grey[300],
                                  radius: 13,
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(data.userId.toString(), style: TextStyle(color: Colors.black, fontSize: 13),),
                                    ],
                                  ),
                                ),
                                Text('#' + data.id.toString(), style: TextStyle(color: Colors.black, fontSize: 13),),
                              ],
                            ),
                            Text(
                              data.title.toString(),
                              style: getSemiBoldStyle(color: Colors.black),
                            ),
                            Text(
                              data.body.toString(),
                              style: getRegularStyle(color: Colors.grey).copyWith(fontSize: FontSize.s14),
                              maxLines: 3,
                              overflow: TextOverflow.fade,
                            ),
                          ],
                        ),
                      ),
                    ),
    • 这是根据提供的帖子ID显示帖子的评论数据的位置**
Consumer(
        builder: (context, ref, child) {
          final posts = ref.watch(commentProvider);
          return ListView.builder(
            itemCount: posts.length,
            itemBuilder: (context, index) {
              final data = posts[index];
              return Container(
                child: Column(
                  children: [
                    Container(
                      width: MediaQuery.of(context).size.width,
                      padding: EdgeInsets.all(AppPadding.p16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // Row(
                          //   children: [
                          //     Text(
                          //       data.email.toString(),
                          //       style: TextStyle(
                          //           color: Colors.black, fontSize: 13),
                          //     ),
                          //     Text(
                          //       '#' + data.id.toString(),
                          //       style: TextStyle(
                          //           color: Colors.black, fontSize: 13),
                          //     ),
                          //   ],
                          // ),
                          // Text(
                          //   data.body.toString(),
                          //   style: getSemiBoldStyle(color: Colors.black),
                          // ),
                          // Text(
                          //   data.body.toString(),
                          //   style: getRegularStyle(color: Colors.grey)
                          //       .copyWith(fontSize: FontSize.s14),
                          //   maxLines: 3,
                          //   overflow: TextOverflow.fade,
                          // ),
                        ],
                      ),
                    ),

我知道如何将帖子ID从一个屏幕传递到另一个屏幕,但我不知道如何使用提供程序根据传递的帖子ID显示评论。例如:当我点击一个帖子id为3的帖子时,我想在下一页看到帖子id为3的评论。2目前,我只能通过提供静态的帖子id值来显示评论。
如果你不明白我的问题,那么请随时问。我会善意地详细说明。任何状态管理解决方案可以提供,但Flutter江荚将不胜感激。
API取自此处:
职位数据:(https://jsonplaceholder.typicode.com/posts
备注数据:(https://jsonplaceholder.typicode.com/posts/{post_id}/comments)或
替代(https://jsonplaceholder.typicode.com/comments?postId=1

yc0p9oo0

yc0p9oo01#

可以使用修改器.family。例如:

final commentsProvider = FutureProvider.family<List<Comment>, int>((ref, postId) async {
    final dio = Dio();
    try {
      final response = await dio.get(Api.commentApi, queryParameters: {
        'postId': postId,
      });
      return (response.data as List).map((e) => Comment.fromJson(e)).toList();
    } on DioError catch (err) {
      print(err);
      return [];
    }
    return [];
});

在小工具中:

Consumer(
  builder: (context, ref, child) {
    ...
    final comments = ref.watch(commentsProvider(postId));
    ...
    }
)

您可以在这里阅读更多:family modifier

相关问题