flutter - 颤动如何在屏幕上进行分页

Question

我是 Flutter 的新手，我已经搜索了 2 天的正确分页结果。我从 API 获得了 1000 多个项目。我只想向用户显示 20 个项目（卡片）。然后如果用户向下滚动，屏幕将显示接下来的 20 个项目。

我的代码：

 class Status extends StatefulWidget {
      Status({Key key, this.title}) : super(key: key);
      String title;
      @override
      _StatusState createState() => _StatusState();
    }

    class _StatusState extends State<Status> with AutomaticKeepAliveClientMixin{
    
      ObdApi obdApi = ObdApi();
      @override
      bool get wantKeepAlive => true;
      @override
      Widget build(BuildContext context) {
        return SafeArea(
            minimum: const EdgeInsets.all(10.0),
            child: Scaffold(
              backgroundColor: Colors.white,
               body: Container(
                  child: FutureBuilder<ActiveObd>(
                      future: obdApi.getActiveObd(),
                      builder: (context, snapshot) {
                        switch (snapshot.connectionState) {
                          case ConnectionState.none:
                            return Text('no connection');
                          case ConnectionState.active:
                          case ConnectionState.waiting:
                            return Center(
                              child: CircularProgressIndicator(),
                            );
                            break;
                          case ConnectionState.done:
                            if (snapshot.hasError) {
                              return Center(
                                child:
                                new CircularProgressIndicator(),
                              );
                            } else {
                              if (snapshot.hasData) {
                                var activeobd = snapshot.data;
                                return ListView.builder(
                                  itemCount:snapshot.data.obds.length,
                                  itemBuilder: (context , index){
                                    final obd = activeobd.obds[index];
                                    DateTime date = DateTime.parse(obd.dateOBDCommand);
                                    String result = DateFormat('yyyy-MM-dd H:m:s').format(date);
                                    return Card(
                                      child: Column(
                                        mainAxisSize: MainAxisSize.min,
                                        children: <Widget>[
                                          ListTile(
                                            title: Container(
                                              height: 30,
                                                child: Text("${obd.description}")),
                                            subtitle: Text(result.toString()),
                                            trailing: Text("${obd.value}"),
                              } else {
                                return Text('No Data');
                              }
                            }
                            break;
                          default:
                            return Container();
                            break;
}

我怎么能这样做？提前致谢

标签： flutterdart

Answer 1

使用infinite_scroll_pagination包。页面上也有指向教程的链接。