flutter 中的分页数据表

Question

谁知道flutter中的PaginatedDataTable class？ 我今天发现了它，我想知道它是否不能解决我的问题。 我有来自 API REST (PHP/MYSQL) 的数据，我想在一个多页的表中加载数据。 我更喜欢不要一次加载所有数据，因为它可能很大，因此会减慢移动应用程序的速度。 所以这个想法是一次只加载 10 行，所以如果用户想查看更多，他可以单击下一步查看下一页和下一个数据。

现在，我的代码是：如您所见，我使用 futurebuilder 并将我想要的结果数（20）发送到我的 api，我的 api 返回所以前 20 个结果

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'menu_member.dart';
import 'globals.dart' as globals;
import 'appbar_draw.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:intl/intl.dart';

// Create a Form widget.
class Affiche_Jetons extends StatefulWidget {
  @override

  _Affiche_Jetons_State createState() {
    return _Affiche_Jetons_State();
  }
}

// Create a corresponding State class.
// This class holds data related to the form.

class _Affiche_Jetons_State extends State<Affiche_Jetons> {
  @override

  Future<List<ligne_jeton>> solde;

  num total;
  num resultbypage=20;
  num nbpages=0;
  num pageactuelle=1;
  num premiereEntree=0;

  Future <List<ligne_jeton>> Liste_Solde_Display(num pageact) async {

    // SERVER LOGIN API URL
    var url = 'https://www.fortune-island.com/app/detail_credits.php';

    premiereEntree=(pageact-1)*resultbypage;

    var data = {
      'id_membre': globals.id_membre,
      'premiere': premiereEntree,
      'resultbypage': resultbypage,
    };

    var data_encode = jsonEncode(data);

    print('appel http');
    print(data_encode);
    // Starting Web API Call.
    var response = await http.post(url,body: data_encode,headers: {'content-type': 'application/json','accept': 'application/json','authorization': globals.token});

    // Getting Server response into variable.

    print(json.decode(response.body));
    var jsondata = json.decode(response.body);
    pageactuelle=pageact+1;
    globals.gems=num.parse(jsondata['gems']);
    globals.credits=num.parse(jsondata['credits']);
    total=num.parse(jsondata['total']);
    nbpages=(total/resultbypage).ceil();

    List<ligne_jeton> lines = [];
    var i=0;
    if (jsondata.containsKey('listec')) {
      for (var u in jsondata['listec']) {
        i = i + 1;
        ligne_jeton line = ligne_jeton(
            u["dates"], u["heure"], u["credits"], u["type"]);
        lines.add(line);
      }
    }
    return lines;
  }

  void initState() {
    solde = Liste_Solde_Display(pageactuelle);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: <Color>[
                  Colors.blue[300],Colors.blue[400]
                ],
              ),
            ),
          ),
          Scaffold(
              appBar: drawappbar(true),
              backgroundColor: Colors.transparent,
              drawer: new DrawerOnly(className: Affiche_Jetons()),
              body:
              Container(
                  height: MediaQuery
                      .of(context)
                      .size
                      .height,
                  width: MediaQuery
                      .of(context)
                      .size
                      .width,
                  child:
                  FutureBuilder(
                      future: solde,
                      builder: (BuildContext context, AsyncSnapshot snapshot) {
                        switch (snapshot.connectionState) {
                          case ConnectionState.waiting:
                            return new Center(
                              child: new CircularProgressIndicator(),);
                          default:
                            if (snapshot.hasError) {
                              return new Center(
                                child: new Text('Error: ${snapshot.error}'),);
                            }
                            else {
                              List<ligne_jeton> values = snapshot.data;
                              if (values.isEmpty) {
                                return Container(
                                    child: Center(
                                        child: Text("Aucun mouvement de jetons pour le moment !!!",style: TextStyle(color: Colors.white))
                                    )
                                );
                              }
                              else {
                                return ListView(
                                    children: <Widget>[
                                      Center(
                                        child: Container(
                                            margin: const EdgeInsets.only(top: 20.0),
                                            child: Text("DETAIL DE VOS JETONS",textAlign: TextAlign.center,style: TextStyle(fontSize: 30.0,color: Colors.white))
                                        ),
                                      ),
                                      DataTable(
                                        columnSpacing: 0,
                                        dataRowHeight: 50,
                                        columns: [
                                          DataColumn(
                                            label: Text("DATE",textAlign: TextAlign.center,style: TextStyle(color: Colors.white)),
                                            numeric: false,
                                            tooltip: "",
                                          ),
                                          DataColumn(
                                            label: Text("JETONS",textAlign: TextAlign.center,style: TextStyle(color: Colors.white)),
                                            numeric: false,
                                            tooltip: "",
                                          ),
                                          DataColumn(
                                            label: Text("TYPE",textAlign: TextAlign.center,style: TextStyle(color: Colors.white)),
                                            numeric: false,
                                            tooltip: "",
                                          ),
                                        ],
                                        rows: List.generate(values.length, (index) {
                                          var parsedDate = DateTime.parse(values[index].date);
                                          final formatter = new DateFormat('dd/MM/yyyy HH:mm');
                                          var dat = formatter.format(parsedDate);
                                          return DataRow(
                                              cells: [
                                                DataCell(
                                                  Text(dat,style: TextStyle(fontSize: 12.0,fontWeight: FontWeight.w900,color:Colors.white)),
                                                ),
                                                DataCell(
                                                    RichText(
                                                      text: TextSpan(
                                                        children: [
                                                          TextSpan(
                                                              text: values[index].nb_jeton.toString()+" ",
                                                              style: TextStyle(fontSize: 12,fontWeight: FontWeight.w800,color: Colors.white)
                                                          ),
                                                          WidgetSpan(
                                                              child: Icon(FontAwesomeIcons.coins,color: Colors.amber[200],size:15)
                                                          ),
                                                        ],
                                                      ),
                                                    )
                                                ),
                                                DataCell(
                                                  Text(values[index].type.toString(),style: TextStyle(fontSize: 12.0,fontWeight: FontWeight.w900,color: Colors.white)),
                                                ),
                                              ]
                                          );
                                        }).toList(),
                                      ),
                                    ],
                                );
                              }
                            }
                        }
                      }
                  )
              )
          )
        ]
    );
  }
}

class ligne_jeton {

  final String date;
  final String heure;
  final String nb_jeton;
  final String type;

  const ligne_jeton (this.date,this.heure,this.nb_jeton, this.type);

}

Answer 1

为了实现无限滚动我们需要一个滚动控制器，目前future builder不支持controller，所以尝试使用listview builder而不是future builder或者你可以使用flutter_pagewise插件来实现分页

Answer 2

PaginatedDataTable 提供了一个 paginationController，您可以将其传递给 onPressed function 按钮。 您可以在 function 中增加页码。

onPressed(){
    final PaginatorController _paginatorController = PaginatorController();
    page++;
    _paginatorController.goToNextPage();
    }