如何解决Flutter getx 无限滚动每次结束滚动刷新列表视图
我正在尝试在列表视图中无限滚动。我正在从 API 获取数据。我正在使用 getx。我的列表视图总是在滚动结束时重建。我找不到我做错的地方。
我的模型类;
List<ExploreModel> exploreModelFromJson(String str) => List<ExploreModel>.from(
json.decode(str).map((x) => ExploreModel.fromJson(x)).toList());
String exploreModelToJson(List<ExploreModel> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
我的控制器;
class ExploreController extends GetxController {
var isLoading = true.obs;
var articleList = <ExploreModel>[].obs;
var offsetCount = 0;
@override
void onInit() {
fetchArticles();
super.onInit();
}
void fetchArticles({int offsetCount = 0}) async {
try {
isLoading(true);
var articles = await ApiService.fetchArticleList(offsetCount);
if (articles != null) {
articleList.addAll(articles);
}
} finally {
isLoading(false);
}
}
}
我的api调用;
static Future<List<ExploreModel>> fetchArticleList(int offsetCount) async {
var url = Uri.http(Config().baseUrl,Config().baseUrlPathGetArticles,{'offsetCount': '$offsetCount'});
var response = await http.get(url);
if (response.statusCode == 200) {
return exploreModelFromJson(utf8.decode(response.bodyBytes));
} else {
return null;
}
我的视图(StatefulWidget);
final ScrollController scrollController = new ScrollController(); int offsetCount = 0;
@override
void initState() {
super.initState();
scrollController.addListener(() {
if (scrollController.position.pixels ==
scrollController.position.maxScrollExtent) {
offsetCount= offsetCount + 5;
exploreController.fetchArticles(offsetCount: offsetCount);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,body: SafeArea(
child: RefreshIndicator(
key: _refreshIndicatorKey,onRefresh: () async {
exploreController.fetchArticles();
},child: Column(
children: <Widget>[
Expanded(
child: Obx(() {
if (exploreController.isLoading.value) {
return CupertinoActivityIndicator();
}
return ListView.separated(
controller: scrollController,itemCount: exploreController.articleList.length,}
...
解决方法
我认为这应该可以解决您的问题。
footer{
background:#464545fa;
height:fit-content;
color: white;
}
ul li{
display: inline;
}
.last-content{
background:#2b2a2afa;
box-sizing: border-box;
margin-top: 12px;
display: block;
}
并在 itemBuilder 中添加条件 itemCount: exploreController.articleList.length + 1
要么
你可以这样做
将您的列更改为列表视图并这样做
if (index == exploreController.articleList.length) //show progress indicator or somthing else
]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。