我正在尝试将分页与gridview.builder集成，它可以在listview中正常工作，但是在gridview中却无法正常工作，我面临的问题是API数据每页返回20个数据，
问题:在API中，它返回20个数据/页，在此API中，它总共返回21个数据，在第1页中包含20个数据，在第2页中仅包含1个数据，分页正在工作，我可以加载数据，但是我无法滚动回第1页数据刚卡在第2页数据中
我正在关注此Tutorial，这与listview一起使用没有问题，但是在gridview中会发生上述问题
InitState和变量初始化
var page = 1;
ScrollController _sccontroller = new ScrollController();
@override
void initState() {
super.initState();
Future token = SharedPrefrence().getToken();
token.then((data) async {
userToken = data;
this.getSearchResult(page);
_sccontroller.addListener(() {
if (_sccontroller.position.pixels ==
_sccontroller.position.maxScrollExtent) {
getSearchResult(page);
}
});
});
setState(() {
title = name;
});
}
@override
void dispose() {
_sccontroller.dispose();
super.dispose();
}
GridView.builder(
controller: _sccontroller,
itemCount: search_result_list.length + 1,
physics: const AlwaysScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(childAspectRatio: 5.2 / 8.0,
crossAxisCount: 2, crossAxisSpacing: 3.0, mainAxisSpacing: 3.0),
itemBuilder: (BuildContext context, int index) {
if (index == search_result_list.length) {
return Center(child: Padding(padding: const EdgeInsets.all(8.0), child: CircularProgressIndicator(),));
} else {
return Container(
child: Padding(
padding: const EdgeInsets.only(top:10),
child: GestureDetector(
onTap: () {
},
child: Container(
// height: 700,
child: Card(
elevation: 2,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(2),
),
child: Container(
width: 300,
//height: 500,
child: Stack(
children: [
Column(
mainAxisSize: MainAxisSize.min,
//crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(2),
child: Image.network(
Urls.baseImageUrl +
search_result_list[index]
.thumb_path,
fit: BoxFit.fill,
height: 180,
width: 180,
),
),
Padding(
padding: const EdgeInsets.all(5),
child: Align(
child: Text(
search_result_list[index].name,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold),
textAlign: TextAlign.left,
),
alignment: Alignment.centerLeft,
)),
],
),
],
)),
),
),
),
),
);
}
},
)
Future<void> getSearchResult(int index) async {
print("size" + index.toString());
if (!isLoading) {
setState(() {
isLoading = true;
});
// ProgressDialog dialog = CustomDialogs().showLoadingProgressDialog(context);
List<PrefrenceModel> tList = List();
var response = await http.get(
"${Urls.baseUrl}${Urls.CategorySearch}?latitude=${Constants
.latitude}&longitude=${Constants
.longitude}&radius=100&locale=en&keyword=${slug}&page=${index
.toString()}&type=item",
headers: {
"Content-Type": "application/json",
"Authorization": "Bearer ${userToken}",
"Accept": "application/json"
},
);
Map<String, dynamic> value = json.decode(response.body);
if (response.statusCode == 200) {
// dialog.dismissProgressDialog(context);
try {
print("response search " + response.body.toString());
Map<String, dynamic> value = json.decode(response.body);
var status = value['success'];
var message = value['message'];
last_page = value['last_page'];
print(message);
if (status == true) {
search_result_list.clear();
try {
var data = value['data']['data'];
if (data.length > 0) {
for (int i = 0; i < data.length; i++) {
var obj = data[i];
//var petrol_obj = obj['petrolstation'];
search_result_list.add(PrefrenceModel(
obj['id'].toString(),
obj['description'].toString(),
obj['valid_from'].toString(),
obj['valid_to'].toString(),
obj['thumbs']['md'].toString(),
obj['status'].toString(),
"",
"",
obj['name'].toString(),
"",
obj['flyer_slug'].toString(),
obj['type'].toString(),
obj['isClipped'],
obj['url'].toString(),
obj['price'].toString(),
obj['flyer_page_id'].toString(),
obj['id'].toString(),
obj['shop_name'].toString(),
obj['shop_logo'].toString(),
obj['brand_name'].toString(),
obj['brand_logo'].toString(),
));
}
setState(() {
isLoading = false;
search_result_list.addAll(tList);
page++;
});
} else {
final snackBar = SnackBar(content: Text("No Data Available"));
_scaffoldKey.currentState.showSnackBar(snackBar);
}
} catch (e) {
e.toString();
}
} else {
print("Error...");
final snackBar = SnackBar(content: Text(message));
_scaffoldKey.currentState.showSnackBar(snackBar);
}
} catch (e) {
print(e.toString());
}
} else {
var message = value['message'];
// dialog.dismissProgressDialog(context);
final snackBar = SnackBar(content: Text(message));
_scaffoldKey.currentState.showSnackBar(snackBar);
}
}
else
{
setState(() { isLoading = false; });
}
}
最佳答案
分页将为您提供与页面相关的数据，例如，第一页将返回1到20的数据，第二页将返回21到40的数据。因此，您必须将第二页的数据添加到第一页的现有数据中。您正在调用search_result_list.clear();，这将删除旧数据并将仅新数据放入列表中。
关于flutter - 分页gridview失败，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64609320/