listview - 如何在颤动中滚动到列表末尾时显示加载指示器
问题描述
我正在使用future从服务器加载数据,并通过使用listview builder在列表视图中显示数据,并在我们滚动到列表末尾时添加新列表,但是当新的项目列表是时我无法显示加载指示器正在加载。我在下面附上了我的代码。我已经尝试过loadmore包,但没有运气。
主要.dart
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 data;
var cname;
String gcm = '';
List pages = [];
@override
void initState() {
super.initState();
fetchPost(gcm);
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
print('Page reached end of page');
setState(() {
Text('Loading');
});
fetchPost(gcm);
}
});
}
@override
void dispose() {
_scrollController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
cname = widget.title;
var hgt = MediaQuery.of(context).size.width * 0.65;
var wid = MediaQuery.of(context).size.height * 0.58;
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) {
return Scrollbar(
child: ListView.builder(
controller: _scrollController,
shrinkWrap: true,
itemCount: pages == null ? 0 : pages.length,
itemBuilder: (BuildContext context, int index) {
gcm = snapshot.data.herbslistContinue.gcmcontinue;
var img = pages[index].thumbnail.source;
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Detailpage(
pages[index].title,
),
));
},
child: Card(
child: Column(
children: <Widget>[
CachedNetworkImage(
placeholder: (context, url) => Image.asset(
'images/image.png',
height: hgt,
width: wid,
fit: BoxFit.fill,
),
imageUrl: img,
height: hgt,
width: wid,
fit: BoxFit.fill,
),
ListTile(
title: Text(pages[index].title, style: TextStyle(fontWeight: FontWeight.bold),),
)
],
)));
},
),
);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
},
),
),
);
}
Future<Herbslist> fetchPost(gcm) async {
String url =
'https://eample.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) {
data = Herbslist.fromJson(json.decode(response.body));
pages.addAll(data.query.pages.values);
return data;
} else {
throw (e) {
print("Exception thrown: $e");
Exception(e);
};
}
}
}
解决方案
以下是对我有用的方式(其他人的情况可能不同)
class _HerbsState extends State<Herbs> {
bool _loading = false;
@override
void initState() {
super.initState();
fetchPost(gcm);
_scrollController.addListener(() {
if (_scrollController.position.pixels ==
_scrollController.position.maxScrollExtent) {
print('Page reached end of page');
setState(() {});
fetchPost(gcm);
}
});
}
Widget build(BuildContext context){
return Scaffold(
ListView.builder(
controller: _scrollController,
shrinkWrap: true,
itemCount: pages == null ? 0 : pages.length+1, //add +1 here
itemBuilder: (BuildContext context, int index) {
if(index == pages.length){
_loading=true; // declare the boolean and return loading indicator
return Center(
child: Container(
child: SpinKitThreeBounce(
color: Colors.green,
size: 30,
),
));
}
)
}
}
推荐阅读
- elasticsearch - 当我搜索同义词时,弹性搜索搜索查询不返回
- fullcalendar - 如何在 FullCalendar 时间线年视图中按顺序显示事件
- html - Routerlink isExactActive 更改图像 Vue
- javascript - 使用 html 和 javascript 制作书签
- java - 如何解决 Randoop 中的隐形类错误?
- git - 将文件推送到 gitlab 存储库的问题
- drupal - 如何在 Drupal 8 表单提交中运行 Drush 10 自定义命令?
- facebook - Xamarin.Android : Branch.io - 如何使用 FB SDK 在初始化时读取 FB 应用链接
- git - 如何将请求所有提交历史从主分支拉到空分支?
- php - 在 BATCH 过程中通过 API 批量更新 mailchimp 标签不起作用