![](/img/trans.png)
[英]How to make an infinite scrolling list view based on a finite list of items in flutter?
[英]how to implement infinite scrolling in list view in flutter
我正在嘗試制作列表,以便最初加載 10 個數據,並從 api 加載附加數據以響應列表滾動。 我使用 getx 作為 state 管理。 需要幫忙。 新聞頭條屏幕
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:get/get.dart';
import 'package:janadharana/core/widget/drawer.dart';
import 'package:janadharana/feature/news_headline/controller/news_headline_controller.dart';
class NewsHeadlineScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final controller = Get.find<NewsHeadlineController>();
return Scaffold(
appBar: AppBar(
title: Text("News Headline"),
),
drawer: getAppDrawer(),
body: Obx((){
return controller.isLoading.isTrue
? Center(child: CircularProgressIndicator())
: Container(
margin: const EdgeInsets.all(10),
child: ListView.builder(
itemBuilder: (context, index){
return GestureDetector(
onTap: () => Get.toNamed("/details", arguments: [controller.articleList[index]]),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
controller.articleList[index].imageUrl == null ?
Container():
Image.network(controller.articleList[index].imageUrl??""),
SizedBox(height: 8,),
Text(controller.articleList[index].title??"", style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),),
SizedBox(height: 4,),
Html(data: controller.articleList[index].description??"",),
],),
);
},
itemCount: controller.articleList?.length ?? 0,
),
);
}),
);
}
}
新聞頭條控制器
import 'package:get/get.dart';
import 'package:janadharana/core/model/article.dart';
import 'package:janadharana/services/api_service.dart';
class NewsHeadlineController extends GetxController {
RxBool isLoading = true.obs;
List<Article> articleList = [];
@override
void onInit() {
// TODO: implement onInit
fetchArticles();
super.onInit();
}
void fetchArticles() async {
try{
isLoading(true);
var articles = await ApiServices.getArticles();
print(articles[0].cover);
if(articles != null) {
articleList= articles;
}
else{
print("article list is null");
}
}catch(e){
print(e);
}
finally{
isLoading(false);
}
}
}
*** 我可以加載前 10 篇文章,但在滾動列表時我需要加載更多。 我嘗試訪問谷歌中的一些文檔。 但事情沒有幫助。 滾動時如何加載其他數據..***
您可以使用這個庫: https://pub.dev/packages/pull_to_refresh特別是屬性onLoading: _onLoading,
這將允許您加載更多數據:
void _onLoading() {
// load more data from API and add them to your list
}
...
SmartRefresher(
enablePullUp: true, // This set to true to pull more data
header: WaterDropHeader(),
footer: ClassicFooter(),
onLoading: _onLoading,
child: // Your list of data
),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.