flutter - Flutter getx无限滚动刷新listview每次结束滚动
问题描述
我正在尝试在列表视图中进行无限滚动。我正在从 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,
}
...
解决方案
我认为这应该可以解决您的问题。
itemCount: exploreController.articleList.length + 1
并在 itemBuilder 添加条件if (index == exploreController.articleList.length) //show progress indicator or somthing else
或者您可以这样做 将您的列更改为列表视图并这样做
ListView(
children: <Widget>[
Obx(() {
return ListView.separated(
physics:NeverScrollableScrollPhysics(),
controller: scrollController,
itemCount: exploreController.articleList.length,
itemBuilder(context,index){
//show your widget
}
})
Obx(()=>exploreController.isLoading.value?
Container(height: 100, child: CupertinoActivityIndicator())
: Container() )
]
推荐阅读
- log4j - 如何在纱线上配置 log4j?
- powershell - 适用于 Windows Server 2003 的 Powershell 调用命令
- javascript - 在 vuejs 组件中监听 javascript 自定义事件
- scala - 如何从 Scala 程序中检测堆大小?
- html - 多个类选择器不工作 CSS?
- python - Python 3 中的 Lambda 排序
- python - 为什么isdigit()在数字之间有空格时返回false以及如何解决它
- html - bxSlider 响应式设计 - 调整图像大小
- linux - 检查字符串是否以某个字符串开头并以数字结尾 - sh 脚本
- authentication - 在 Yocto Dunfell 中,哪个配方正在写出 `/lib/systemd/system/getty@.service`