TabController中的NotificationListener用于无限滚动 [英] NotificationListener in TabController for infinite scroll
问题描述
我有4个标签，我想在其中添加延迟加载或无限滚动选项.早些时候，我尝试使用Scroll Controller，但是当它到达终点时.事件触发不止一次.因此，有多个对API的Future http请求.
I have 4 tabs and I want to add lazy load or infinite scroll option in them. Earlier I tried with Scroll Controller but when it reaches to the end. Event firing more than once. Hence there are multiple Future http request to API.
我阅读了关于SO的一些问题，发现我可能需要使用NotificationListener.我不确定是否需要一次或为所有选项卡定义它.我不知道如何使用NotificationListener.
I read some question on SO and found I might need to use NotificationListener. I am not sure I need to define it once or for all the tabs. I have no idea how to use NotificationListener.
class _Searchstate extends State<Search> with SingleTickerProviderStateMixin{
ScrollController _scrollController = new ScrollController();
final _scaffoldKey = GlobalKey<ScaffoldState>();
TabController _controller;
TabBarView(
controller: _controller,
children: [
// Text("TAB ONE CONTENT"),
RefreshIndicator(
onRefresh: refreshData,
child:Container(
decoration: BoxDecoration(
color: Colors.black87,
),
padding: EdgeInsets.only(top: 10, bottom: 5),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
controller: _scrollcontroller,
itemCount: (recommended) ? lists.length : searchlists.length,
itemBuilder: (BuildContext context, int index) {
return buildList1(context, index);
}),
),
),
//Text("TAB TWO CONTENT"),
RefreshIndicator(
onRefresh: refreshData1,
child:Container(
decoration: BoxDecoration(
color: Colors.black54,
),
padding: EdgeInsets.only(top: 10, bottom: 5),
height: MediaQuery.of(context).size.height,
width: double.infinity,
child: ListView.builder(
controller: _scrollcontroller,
itemCount: (nearme) ? lists1.length : searchlists1.length,
itemBuilder: (BuildContext context, int index) {
return buildList2(context, index);
}),
),
),
下面是我使用Listview.Builder来显示来自数据库的数据的buildList.我也尝试像下面这样使用ScrollController.
Below is the buildList where I am using the Listview.Builder to show the data which is coming from database. I tried to use ScrollController in this too like below.
Widget buildList1(BuildContext context, int index) {
_scrollController.addListener((){
print(_scrollController.position.pixels);
print(_scrollController.position.maxScrollExtent);
if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
print(recommended);
if(recommended){
//getData();
print('getData()1;');
}
// getData();
}
});
我只在这个问题中添加了一些相关的代码，因为完整的代码很长.
I have added some relevant codes only in this question as full code is very long.
我尝试使用Notification侦听器，如果我在Scaffold上一次定义了它，那么它至少可以正常工作，我可以看到滚动事件，但是我有4个选项卡，而且我不确定如何为所有实现它.因为要为所有这四个选项卡设置条件都非常困难.
I tried using Notification listener and if I define it once around Scaffold then it is working at least I can see the scroll events but I have 4 tabs and I am not sure how can I implement it for all. Because it would be quite hard to set condition for all those 4 tabs.
@override
Widget build(BuildContext context) {
return NotificationListener<ScrollNotification>(
child:Scaffold(
---- -- - - - - - More Codes -----
onNotification: (notificationInfo) {
if (notificationInfo is ScrollEndNotification) {
print("scroll");
print("detail:"+notificationInfo.dragDetails.toString());
/// your code
}
return true;
},
);
我尝试在选项卡中放入相同的代码，但未检测到滚动事件.
Same code I tried to put inside the tabs but it is not detecting the scroll event.
推荐答案
我设法使其正常运行，但不确定这是否有效.也许其他可能遇到过类似问题的人也会如此.
I managed to get it work but not sure this is the efficient way or not. May be it will others who may have faced similar issue.
下面的代码将有助于识别活动标签.
Below code will help to identify the active tab.
void initState(){
_controller = TabController(vsync: this, length: 4);
currentTab = (_controller.index);
_controller.addListener(() {
if(_controller.indexIsChanging) {
print("tab is animating. from active (getting the index) to inactive(getting the index) ");
}else {
//tab is finished animating you get the current index
print(_controller.index);
currentTab = (_controller.index);
_handleTabSelection();
}
});
以及下面的代码我已添加到NotificationListner中.
and below code i have added in NotificationListner.
onNotification: (notificationInfo) {
if (notificationInfo is ScrollEndNotification && notificationInfo.metrics.pixels == notificationInfo.metrics.maxScrollExtent) {
print("scroll");
if(currentTab == 0){
if(recommended == true && tab0 == 'Suggested' ){
// getData();
print('fire the 1 event');
}else{
print('Name()1;');
}
}
if(currentTab == 1){
if(nearme == true && tab1 == 'Near Me'){
//getData();
print('fire the 2nd event ');
}else{
}
}
if(currentTab == 2){
if(byRating == true && tab2 == 'By Rating'){
//getData();
print('fire the 3rd event');
}else{
}
}
if(currentTab == 3){
if(byprice == true && tab3 == 'Active'){
//getData();
print('fire the 4 event');
}else{
}
}
/// your code
}
return true;
},
);
编辑:由于我多次点击，因此上述代码也在左右滚动时触发.为防止这种情况，我将代码更改为如下.
Edit: As i have multiple taps so, above code is firing on left and right scroll too. To prevent that i have changed the code to as below.
if (notificationInfo is ScrollEndNotification && notificationInfo.metrics.axisDirection == AxisDirection.down && notificationInfo.metrics.pixels == notificationInfo.metrics.maxScrollExtent) {
这篇关于TabController中的NotificationListener用于无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
