我试图从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)
1条答案
按热度按时间yc0p9oo01#
可以使用修改器
.family
。例如:在小工具中:
您可以在这里阅读更多:family modifier