在Flutter中如何通过页面id创建自动无限滚动分页？

Question

我正在尝试使用自动滚动创建分页，但使用此模型（在底部），我无法执行此操作？我是颤振的初学者，我从头开始努力尝试，但不幸的是无法找到答案。那么有人可以帮助我在这个颤动屏幕中创建无限自动滚动分页吗？ 这是我的测试屏幕代码：

class Test extends StatefulWidget {

  Test({Key key}) : super(key: key);

  @override
  createState() => _Test();
}

class _Test extends State<Test3> {
  Future<getTotalLeadsListss> getLeads;
  String _value='total';
  @override
  void initState() {
    super.initState();
    loading=false;
    getLeads=_getDatacall();
  }
  int page =1;
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FutureBuilder<getTotalLeadsListss>(
          future: _getDatacall(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              var dataB =snapshot.data;
              return dataB.leadFollowupss.length<=0?
              Center(child: Column(
                children: [
                  Image(image:AssetImage(Assets.noDataImg),)
                ],
              )):
              ListView.builder(
                  controller: _scrollController,
                  itemCount:dataB.leadFollowupss.length,
                  itemBuilder: (BuildContext context, int index){
                    return Container(
                        margin: EdgeInsets.only(left: 8.0,right: 8.0,top: 3.0,bottom: 3.0),
                        child: GestureDetector(
                            onTap:(){},
                            child: Card(
                                color: Colors.grey,
                                elevation: 2.0,
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(5.0),
                                ),
                                child: ListTile(
                                  contentPadding: EdgeInsets.only(left:8.0,right:8.0),
                                  title: new Text(dataB.leadFollowupss[index].name,maxLines: 1,
                                    overflow: TextOverflow.ellipsis,
                                    softWrap: false,
                                    style: TextStyle(
                                        fontSize: 18.0,fontWeight: FontWeight.w600),
                                  ),
                                  subtitle: Text(
                                    dataB.leadFollowupss[index].nextMeeting.toString(),
                                    style: TextStyle(),
                                  ),
                                )
                            )
                        )
                    );
                  }
              );
            }
            else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            } else if (snapshot.connectionState==ConnectionState.waiting){
              return Container(child: Center(child: Image(image:AssetImage(Assets.loaderImg),)));
            }
            return Container(child: Center(child: Image(image:AssetImage(Assets.loaderImg),)));
          },
        )
      ),

    );
  }
  Future<getTotalLeadsListss> _getDatacall()async{
    TotalLeadsListss wrapper = new TotalLeadsListss();
    return wrapper.getAllLeadsListss(_value,page);
  }
}

/// get all leads list
class TotalLeadsListss {
  String _value;
  Future<getTotalLeadsListss> getAllLeadsListss(_value,page) async {
    final response  = await http.post(Uri.parse('${mainUrl}lead-list'),
        headers:{
          'Accept': 'application/json',
          HttpHeaders.authorizationHeader: 'Bearer $accessToken',
        },
        body: {
          'type':'$_value',
          'page':'$page',
        }
    );
    if (response.statusCode == 200) {
      String  data = response.body;
      return getTotalLeadsListss.fromJson( json.decode(response.body) );
    } else {
      print('failed to get data');
      throw Exception('No records found');
    }
  }

}
class getTotalLeadsListss {
  bool status;
  String msg;
  List<LeadFollowupss> leadFollowupss;

  getTotalLeadsListss({this.status, this.msg, this.leadFollowupss});

  getTotalLeadsListss.fromJson(Map<String, dynamic> json) {
    status = json['status'];
    msg = json['message'];
    if (json['data'] != null) {
      leadFollowupss = new List<LeadFollowupss>();
      json['data'].forEach((v) {
        leadFollowupss.add(new LeadFollowupss.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['status'] = this.status;
    data['message'] = this.msg;
    if (this.leadFollowupss != null) {
      data['data'] = this.leadFollowupss.map((v) => v.toJson()).toList();
    }
    return data;
  }
}
class LeadFollowupss {

  String id,name,nextMeeting;

  LeadFollowupss(
      {this.id,this.name,this.nextMeeting});

  LeadFollowupss.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['business_name'];
    nextMeeting=json['next_meeting'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['business_name'] = this.name;
    data['next_meeting'] = this.nextMeeting;
    return data;
  }
}

Answer 1

你需要听

ScrollController

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  late ScrollController controller;
  List<String> items = List.generate(20, (index) => 'item $index');

  @override
  void initState() {
    super.initState();
    controller = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    controller.removeListener(_scrollListener);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        child: ListView.builder(
          controller: controller,
          itemBuilder: (context, index) {
            return Text(items[index]);
          },
          itemCount: items.length,
        ),
    );
  }

  void _scrollListener() {
    print(controller.position.extentAfter);
    if (controller.position.extentAfter < 500) {
      setState(() {
        items.addAll(List.generate(20, (index) => 'item $index'));
      });
    }
  }
}

如果您从

setState

中的服务器请求数据中获取数据，并且当用户向下滚动时您需要每个数据范围

Answer 2

我以前用

ScrollController

来做这个，但是条件太麻烦，所以我改用

NotificationListener<ScrollNotification>

，它有一个

ScrollEndNotification

事件。

它的工作原理如下：

NotificationListener<ScrollNotification>(
  onNotification: (scrollNotification) {
  if (scrollNotification is ScrollEndNotification) {
    onScrollListener();
  }

  return true;
}

void onScrollListener() {
  if (reachedEnd) {
    return;
  }

  if (!isPageLoading) {
    isPageLoading = true;
    Future.microtask(() async {
      final newItems = await getItemsUseCase.get(page: nextPage);
      if (newItems.length < pageSize) {
        reachedEnd= true;
      } else {
        nextPage++;
      }

      allItems.addAll(newItems);
      isPageLoading = false;
    });
  }
}

我在这里添加了完整的代码示例。