flutter - 如何解决列表视图中的索引不正确

Question

我在 Flutter 中使用列表视图 + 分页来显示我的响应数据。

当我选择第一个列表项时，我遇到了这个问题，诸如 id 之类的详细信息是另一个列表项 id。我曾经print()检查过身份证，它总是显示错误的身份证。

我想显示有关我的图像的详细信息，但它给了我错误的 ID。所以它会显示其他图像。

我该如何解决这个问题？

标签： flutter

Answer 1

无需将id和定义title为State对象的变量。您可以将它们作为参数传递给selectedItem方法，问题是您始终将idand设置title为最后构建的项目，因此它将始终使用其详细信息而不是实际选择的项目进行导航。

class _HomePage State extends State<HomePage > {
GlobalKey<PaginatorState> paginatorGlobalKey = GlobalKey();

@override
Widget build(BuildContext context) {
body: return Paginator.listView(
key: paginatorGlobalKey,
pageLoadFuture: sendPagesDataRequest,
pageItemsGetter: listItemsGetterPages,
listItemBuilder: listItemBuilder,
loadingWidgetBuilder: loadingWidgetMaker,
errorWidgetBuilder: errorWidgetMaker,
emptyListWidgetBuilder: emptyListWidgetMaker,
totalItemsGetter: totalPagesGetter,
pageErrorChecker: pageErrorChecker,
scrollPhysics: BouncingScrollPhysics(),
);
}

Future<PagesData> sendPagesDataRequest(int page) async {
String url = Uri.encodeFull("https://API_URL?page=$page");
http.Response response = await http.get(url);
PagesData pagesData = pagesDataFromJson(response.body);
return pagesData;

List<dynamic> listItemsGetterPages(PagesData pagesData) {
List<Project> list = [];
pagesData.data.forEach((value) {
 list.add(value);
 });
 return list;
}

Widget listItemBuilder(dynamic item, int index) {

 return InkWell(
  onTap: () => selectedItem(item,context), // pass the item iteself in the selectedItem function
  child:  new CachedNetworkImage(
   imageUrl:= item.image,
   placeholder: (context, url) => new CircularProgressIndicator(),
   errorWidget: (context, url, error) => new Icon(Icons.error),
   fit:BoxFit.fill,
   ),
);
}

Widget loadingWidgetMaker() {
 return Container(
 alignment: Alignment.center,
 height: 160.0,
 child: CircularProgressIndicator(),
 );
 }

void selectedItem(dynamic item,BuildContext context) { // add a parameter for item
 Navigator.of(context).pushNamed(
  DetailsPage.routeName,
  arguments: {
   'id': item.id, // Move the item.id here
   'title': item.title // Move the item.title here
   });    
  }
}