时间戳

首页 > 解决方案 > 来自 API 的 Flutter DataTable

flutter - 来自 API 的 Flutter DataTable

问题描述

我有一个颤振应用程序，用于获取和显示数据。我从 api 获取数据，然后将其显示在数据表中。我想显示一次列标题，然后显示列表中的数据，而不是在每个数据项中重复列标题，如下图所示应用截图

这是显示数据表的代码

                Expanded(
                    child: ListView.builder(
                        itemCount: loans.results.length,
                        itemBuilder: (context, index) {
                          final y = loans.results[index].customer.firstname +
                              " " +
                              loans.results[index].customer.lastname;

                          final x = loans
                              .results[index].loanParticulars.amountApplied;
                          final z = loans.results[index].stage.name;
                          final w =
                              loans.results[index].loanApplicationStatus.name;

                          return SingleChildScrollView(
                            scrollDirection: Axis.horizontal,
                            child: DataTable(columnSpacing: 38.0, columns: [
                              DataColumn(label: Text('Name')),
                              DataColumn(label: Text('Amount')),
                              DataColumn(label: Text('Status')),
                              DataColumn(label: Text('Stage')),
                            ], rows: [
                              DataRow(cells: [
                                DataCell(Container(width: 75, child: Text(y))),
                                DataCell(Container(child: Text(x))),
                                DataCell(Container(child: Text(w))),
                                DataCell(Container(child: Text(z)))
                              ])
                            ]),
                          );
                        }))

标签： flutterdartdatatableflutter-layout

解决方案

您DataColumn还为每个索引值生成一个标题。您应该只为索引值生成 DataRows。

替换下面的代码片段而不是Expanded小部件并检查：

  Expanded(
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
        columnSpacing: 38.0,
        columns: [
          DataColumn(label: Text('Name')),
          DataColumn(label: Text('Amount')),
          DataColumn(label: Text('Status')),
          DataColumn(label: Text('Stage')),
        ],
        rows: List.generate(loans.results.length, (index) {
          final y = loans.results[index].customer.firstname +
              " " +
              loans.results[index].customer.lastname;

          final x = loans.results[index].loanParticulars.amountApplied;
          final z = loans.results[index].stage.name;
          final w = loans.results[index].loanApplicationStatus.name;

          return DataRow(cells: [
            DataCell(Container(width: 75, child: Text(y))),
            DataCell(Container(child: Text(x))),
            DataCell(Container(child: Text(w))),
            DataCell(Container(child: Text(z)))
          ]);
        }),
      ),
    ),
  );

推荐阅读