如何在 Flutter 中执行分页

Question

我浏览了各种关于 flutter 分页的文章，但其中 none 似乎对我有用。我正在使用的 API 端点看起来像这样 http://camx.heropp.com/api/connect?offset=0（这是一个示例 link，因此它不会起作用）而我发出请求时得到的响应如下所示

{
    "result": {
        "connectUsers": [
            {
                "_id": "5f6a412d2ea9350017bec99f",
                "userProfile": {
                    "rep_points": 0.75,
                    "visits": 0,
                    "bio": "Nothing for you ",
                    "gender": "Male",
                    "university": "University Of Technology",
                    "avatar": "https://camx.heroapp.com/5f6a412d2ea9350017bec99f"
                },
                "name": "Joseph Henshaw ",
                "userTag": "bigjo",
                "id": "5f6a412d2ea9350017bec99f",
                "sameCampus": true
            },
            {
                "_id": "5f6bbf1cbd5faa00170d92b1",
                "userProfile": {
                    "rep_points": 0,
                    "visits": 0
                },
                "name": "John Doe",
                "userTag": "@doee",
                "id": "5f6bbf1cbd5faa00170d92b1",
                "sameCampus": false
            }
        ]
    }
}

我想要实现的是对来自 api 的数据进行分页。偏移量从 0 开始并以 10 增加，即获取更多数据 0ffset=20..30..等等在

这是我为获得上面显示的 JSON 响应而提出的请求

Future<void> fetchConnect() async {
    var uri = Uri.parse('http://campusx.herokuapp.com/api/v1/users/connect');
    uri = uri.replace(query: 'offset=$offsetNumber');
    print(uri);
    try {
      final response = await http.get(
        uri,
        headers: {
          HttpHeaders.authorizationHeader: "Bearer $userToken",
        },

      );
      // List<Photo> fetchedPhotos = Photo.parseList(json.decode(response.body));
      if (response.statusCode == 200 || response.statusCode == 201) {
         print("IT works")
      } else {
        print(response.statusCode);
      }
      List<ConnectUsers> fetchedConnects =
          ConnectUsers.parseList(json.decode(response.body));
      setState(() {
        connectMore = fetchedConnects.length == defaultConnectsPerPageCount;
        loading = false;
        offsetNumber = offsetNumber + 10;
        connects.addAll(fetchedConnects);
      });
    } catch (e) {
      setState(() {
        loading = false;
        error = true;
      });
    }
  }

这就是我的 UI 显示获取数据的方式（小部件 getConnect 放置在我的脚手架

的主体中

 Widget getConnects() {
    if (connects.isEmpty) {
      if (loading) {
        return Center(
            child: Padding(
          padding: const EdgeInsets.all(8),
          child: CircularProgressIndicator(),
        ));
      } else if (error) {
        return Center(
            child: InkWell(
          onTap: () {
            setState(() {
              loading = true;
              error = false;
              fetchConnects();
            });
          },
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Text("Error while loading connects, tap to try again"),
          ),
        ));
      }
    } else {
      return ListView.builder(
          itemCount: connects.length + (connectMore ? 10 : 0),
          itemBuilder: (context, index) {
            if (index == connects.length - nextPageThreshold) {
              fetchConnects();
            }
            if (index == connects.length) {
              if (error) {
                return Center(
                    child: InkWell(
                  onTap: () {
                    setState(() {
                      loading = true;
                      error = false;
                      fetchConnects();
                    });
                  },
                  child: Padding(
                    padding: const EdgeInsets.all(16),
                    child:
                        Text("Error while loading connects, tap to try agin"),
                  ),
                ));
              } else {
                return Center(
                    child: Padding(
                  padding: const EdgeInsets.all(8),
                  child: CircularProgressIndicator(),
                ));
              }
            }
            // final Photo photo = photos[index];
            final ConnectUsers connect = connects[index];
            return Card(
              child: Column(
                children: <Widget>[
                  // Image.network(
                  //   connect.name.connectUsers[index].userProfile.avatar,
                  //   fit: BoxFit.fitWidth,
                  //   width: double.infinity,
                  //   height: 160,
                  // ),
                  Padding(
                    padding: const EdgeInsets.all(16),
                    child: Text(connect.name,
                        // connect
                        // .result.connectUsers[index].userProfile.university,
                        style: TextStyle(
                            fontWeight: FontWeight.bold, fontSize: 16)),
                  ),
                ],
              ),
            );
          });
    }
    return Container();
  }

这是我在使用这段代码时遇到的错误

The getter 'isEmpty' was called on null.
Receiver: null
Tried calling: isEmpty

Answer 1

看起来您正在您的小部件中调用 connects.isEmpty，但您没有初始化连接 -> 连接为空，所以您会收到上述错误。您可以进行空检查或初始化连接

...
// initialise so connects is not null
connects = []
...
 Widget getConnects() {
    if (connects.isEmpty) {
      if (loading) {
        return Center(
(...)

 Widget getConnects() {
// do a null check before calling member
    if (connects == null || connects.isEmpty) {
      if (loading) {
        return Center(
(...)

Answer 2

我已经解决了问题，这是我使用的方法

这是我的model.dartclass


import 'package:flutter/foundation.dart';

ConnectModel payloadFromJson(String str) =>
    ConnectModel.fromJson(json.decode(str));

String payloadToJson(ConnectModel data) => json.encode(data.toJson());

class ConnectModel {
  ConnectModel({
    this.result,
  });

  Result result;

  factory ConnectModel.fromJson(Map<String, dynamic> json) => ConnectModel(
        result: Result.fromJson(json["result"]),
      );

  Map<String, dynamic> toJson() => {
        "result": result.toJson(),
      };
}

class Result {
  Result({
    this.connect,
  });

  List<Connect> connect;

  factory Result.fromJson(Map<String, dynamic> json) => Result(
        connect: List<Connect>.from(
            json["connectUsers"].map((x) => Connect.fromJson(x))),
      );

  Map<String, dynamic> toJson() => {
        "connectUsers": List<dynamic>.from(connect.map((x) => x.toJson())),
      };
}

class Connect with ChangeNotifier {
  Connect({
    this.id,
    this.name,
    this.userTag,
    this.university,
    this.checkIsFollowing,
    this.avatar,
  });
  String name;
  String userTag;
  String id;
  String university;
  String avatar;
  bool checkIsFollowing;

  factory Connect.fromJson(Map<String, dynamic> json) => Connect(
        id: json["_id"],
        name: json["name"],
        userTag: json["userTag"],
        university: json["userProfile"]["university"],
        checkIsFollowing: json["checkIsFollowing"],
        avatar: json["userProfile"]["avatar"],
      );

  Map<String, dynamic> toJson() => {
        "_id": id,
        "name": name,
        "userTag": userTag,
        "userProfile"
            "university": university,
        "userProfile"
            "avatar": avatar,
        "checkIsFollowing": checkIsFollowing
      };
}

这是我的方法，offsetNumber默认初始化为0

  List<Connect> mainList = [];
  List<String> nameList = [];
  Future<List<Connect>> getConnectionsList(var offsetNumber) async {
    var uri = "http://campusx.herokuapp.com/api/v1/users/connect?$offsetNumber";
    var token = "pass_your_token_here";
    try {
      final response =
          await http.get(uri, headers: {"Authorization": "Bearer $token"});
      if (response.statusCode == 200) {
        var data = json.decode(response.body);
        var d = data['result']['connectUsers'];
        for (var u in d) {
          Connect c = Connect.fromJson(u);
          mainList.add(c);
        }
        setState(() {
          nameList = mainList.map((e) => e.name).toList();
          //add other parameters gotten from the endpoint here, i used name only for test purposes
        });
      } else {
        print(response.body);
      }
    } catch (e) {
      print(e);
    }
    return mainList;
  }

这是我在

中显示名称的 ListView 生成器

     ListView.builder(
          itemCount: mainList.length,
          itemBuilder: (_, index) {
            return Container(
              height: 120,
              child: Text(
                nameList[index],
                style: TextStyle(fontSize: 39),
               ),
            );
          },
       )

然后是 onClick 或按钮，或者当列表到达 phone 屏幕底部时，您将 setState (() {});并增加 offsetNumber 的大小。像这样：

setState(() {
  offsetNumber = offsetNumber + 10;
  future = getConnectionsList(offsetNumber);
});

如何在 Flutter 中执行分页

How to perform Pagination in Flutter

pagination

dart

flutter

flutter-layout

我已经解决了问题，这是我使用的方法

这是我的model.dartclass