我已经创建了带有未来构建器的列表视图构建器，当到达页面末尾时，我将在其中获取下一页的详细信息，但是列表却在不断重复。例如，当我再次到达第一页的末尾时，我将获得第一页列表，而当我再次到达第一页的末尾时，它将显示第二页列表。谁能帮我避免重复列出。
class Herbs extends StatefulWidget {
final String title;
Herbs(this.title);
@override
_HerbsState createState() => new _HerbsState();
}
class _HerbsState extends State<Herbs> {
ScrollController _scrollController = new ScrollController();
var cname;
String gcm;
List pages;
@override
void initState() {
super.initState();
pages = [];
if (gcm == null) {
gcm = '';
this.fetchPost(gcm);
} else {
this.fetchPost(gcm);
}
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
setState(() {
print('Page reached end of page');
fetchPost(gcm);
});
}
});
}
Future<Herbslist> fetchPost(gcm) async {
String url =
'https://example.org/api.php?action=query&gcmtitle=Category:$cname&pilimit=max&prop=pageimages&pithumbsize=200&generator=categorymembers&format=json&gcmcontinue=$gcm';
final response = await http.get(url);
print(url);
if (response.statusCode == 200) {
var data = Herbslist.fromJson(json.decode(response.body));
return data;
} else {
throw (e) {
print("Exception thrown: $e");
Exception(e);
};
}
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
cname = widget.title;
return new Scaffold(
appBar: AppBar(
title: Align(
alignment: Alignment(-0.2, 0.3),
child: Text(
cname,
),
),
),
body: Center(
child: FutureBuilder<Herbslist>(
future: fetchPost(gcm),
builder: (context, snapshot) {
if (snapshot.hasData) {
// List pages = snapshot.data.query.pages.values.toList();
pages.addAll(snapshot.data.query.pages.values);
return Scrollbar(
child: ListView.builder(
controller: _scrollController,
shrinkWrap: true,
itemCount: pages.length,
itemBuilder: (BuildContext context, int index) {
gcm = snapshot.data.herbslistContinue.gcmcontinue;
var img = pages[index].thumbnail.source;
return Container(
child: Card(
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Detailpage(
pages[index].title,
),
));
},
child: ListTile(
contentPadding: EdgeInsets.symmetric(
horizontal: 8.0, vertical: 8.0),
leading: Container(
padding: EdgeInsets.only(right: 10.0),
decoration: new BoxDecoration(
border: new Border(
right: new BorderSide(
width: 1.5, color: Colors.grey)),
),
// ignore: unrelated_type_equality_checks
child: img == img.isEmpty
? SizedBox(
height: 50.0,
width: 50.0,
child: Image.asset('image.png'),
)
: SizedBox(
height: 50.0,
width: 50.0,
child: FadeInImage.assetNetwork(
placeholder: 'image.png',
image: img,
fit: BoxFit.fill,
),
)),
title: Text(pages[index].title),
),
)));
},
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
),
);
}
}
JSON
{
"batchcomplete": "",
"continue": {
"gcmcontinue": "page|41434143494120464552525547494e4541202d204152494d45444148|3704",
"continue": "gcmcontinue||"
},
"query": {
"pages": {
"225": {
"pageid": 225,
"ns": 0,
"title": "Abrus precatorius - Gunja",
"thumbnail": {
"source": "https://example.org/images/thumb/c/cb/Abrus_precatorius_%281463017430%29.jpg/600px-Abrus_precatorius_%281463017430%29.jpg",
"width": 600,
"height": 450
},
"pageimage": "Abrus_precatorius_(1463017430).jpg"
},
"625": {
"pageid": 625,
"ns": 0,
"title": "Abies webbiana - Talispatra",
"thumbnail": {
"source": "https://example.org/images/thumb/b/b1/Red_fir.jpg/397px-Red_fir.jpg",
"width": 397,
"height": 600
},
"pageimage": "Red_fir.jpg"
},
"15995": {
"pageid": 15995,
"ns": 0,
"title": "Abelmoschus esculentus - Bhenda",
"thumbnail": {
"source": "https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/India_-_Koyambedu_Market_-_Ladies_Finger_03_%283986242135%29.jpg/600px-India_-_Koyambedu_Market_-_Ladies_Finger_03_%283986242135%29.jpg",
"width": 600,
"height": 450
},
"pageimage": "India_-_Koyambedu_Market_-_Ladies_Finger_03_(3986242135).jpg"
}
}
},
"limits": {
"pageimages": 500
}
}
class.dart
class Herbslist {
String batchcomplete;
Continue herbslistContinue;
Query query;
Limits limits;
Herbslist({
this.batchcomplete,
this.herbslistContinue,
this.query,
this.limits,
});
factory Herbslist.fromJson(Map<String, dynamic> json) => Herbslist(
batchcomplete: json["batchcomplete"] == null ? null : json["batchcomplete"],
herbslistContinue: json["continue"] == null ? Continue(gcmcontinue:'0',continueContinue: '') : Continue.fromJson(json["continue"]),
query: json["query"] == null ? null : Query.fromJson(json["query"]),
limits: json["limits"] == null ? null : Limits.fromJson(json["limits"]),
);
Map<String, dynamic> toJson() => {
"batchcomplete": batchcomplete == null ? null : batchcomplete,
"continue": herbslistContinue == null ? null : herbslistContinue.toJson(),
"query": query == null ? null : query.toJson(),
"limits": limits == null ? null : limits.toJson(),
};
}
class Continue {
String gcmcontinue;
String continueContinue;
Continue({
this.gcmcontinue,
this.continueContinue,
});
factory Continue.fromJson(Map<String, dynamic> json) => Continue(
gcmcontinue: json["gcmcontinue"] == null ? null : json["gcmcontinue"],
continueContinue: json["continue"] == null ? null : json["continue"],
);
Map<String, dynamic> toJson() => {
"gcmcontinue": gcmcontinue == null ? null : gcmcontinue,
"continue": continueContinue == null ? null : continueContinue,
};
}
class Limits {
int pageimages;
Limits({
this.pageimages,
});
factory Limits.fromJson(Map<String, dynamic> json) => Limits(
pageimages: json["pageimages"] == null ? null : json["pageimages"],
);
Map<String, dynamic> toJson() => {
"pageimages": pageimages == null ? null : pageimages,
};
}
class Query {
Map<String, Page> pages;
Query({
this.pages,
});
factory Query.fromJson(Map<String, dynamic> json) => Query(
pages: json["pages"] == null ? null : Map.from(json["pages"]).map((k, v) => MapEntry<String, Page>(k, Page.fromJson(v))),
);
Map<String, dynamic> toJson() => {
"pages": pages == null ? null : Map.from(pages).map((k, v) => MapEntry<String, dynamic>(k, v.toJson())),
};
}
class Page {
int pageid;
int ns;
String title;
Thumbnail thumbnail;
String pageimage;
Page({
this.pageid,
this.ns,
this.title,
this.thumbnail,
this.pageimage,
});
factory Page.fromJson(Map<String, dynamic> json) => Page(
pageid: json["pageid"] == null ? null : json["pageid"],
ns: json["ns"] == null ? null : json["ns"],
title: json["title"] == null ? null : json["title"],
thumbnail: json["thumbnail"] == null ? Thumbnail(source:'',width:0,height:0) : Thumbnail.fromJson(json["thumbnail"]),
pageimage: json["pageimage"] == null ? null : json["pageimage"],
);
Map<String, dynamic> toJson() => {
"pageid": pageid == null ? null : pageid,
"ns": ns == null ? null : ns,
"title": title == null ? null : title,
"thumbnail": thumbnail == null ? null : thumbnail.toJson(),
"pageimage": pageimage == null ? null : pageimage,
};
}
class Thumbnail {
String source;
int width;
int height;
Thumbnail({
this.source,
this.width,
this.height,
});
factory Thumbnail.fromJson(Map<String, dynamic> json) => Thumbnail(
source: json["source"] == null ? null : json["source"],
width: json["width"] == null ? null : json["width"],
height: json["height"] == null ? null : json["height"],
);
Map<String, dynamic> toJson() => {
"source": source == null ? null : source,
"width": width == null ? null : width,
"height": height == null ? null : height,
};
}
答案 0 :(得分：0)
我不确定我是否正确理解了您的问题，但是由于以下原因，我认为这种情况正在发生：
pages.addAll(snapshot.data.query.pages.values);
bug的原因是，每次 FutureBuilder 运行时，数据都会追加到 pages 数组中，并包含重复的内容。 您应该每次都这样做：
pages = [];
答案 1 :(得分：0)
我看到的第一个问题是您的initState方法。在initState中，super.InitState应该是第一行。但这可能不是导致您遇到问题的原因。
其次，滚动控制器上的侦听器正在调用setState，并运行网络请求，这还将重新构建整个FutureBuilder-由于将函数直接传递到“ future”参数中，该操作也将再次运行网络请求。
尝试将小部件分成较小的块，问题可能会变得更加清楚。