颤动:TabController中的NotificationListener用于无限滚动 [英] flutter: 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. Let me know if you need more code.
我尝试使用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屋！
