Question

我有一个数据表，由于可用数据量的缘故，它可以水平和垂直滚动。我希望指定列名称的第一行在向下滚动时始终可见。

code：代码没有问题，我得到结果，但是当我向下滚动时，将不会显示标题。任何人都可以帮助我修复标题（第一行）。

我的页眉（第一行）元素随每个要求而不断变化，它的实现方式是，在我的仪表板中，每当点击击中API的每张卡时，都会显示卡，我将显示其结果，即，标题行字段的内容作为第一行。

标题的内容随每张卡而变化。因此，一旦单击任何卡，就会弹出包含其数据的新页面，在那里我需要修复页眉。

Widget getTable(BuildContext context, var data) {
    Widget _widget;
    _widget = SingleChildScrollView(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          rows: createDataRows(context, data),
          columns: createDataColumns(context, data),
        ),
      ),
    );
    return _widget;
  }

  List<DataRow> createDataRows(BuildContext context, var jsonData) {
    List<DataRow> _dataRows = [];
    List<DataCell> _cells = [];
    String _dataCellTitle;

    Map<String, Object> headers = jsonData['headers'];
    Map<int, String> headerMapping;
    headerMapping = headers.keys
        .toList()
        .asMap()
        .map((index, value) => MapEntry(index + 1, value));

    if (jsonData["data"] == null) {
      _dataRows = [];
    } else {
      for (var j = 0; j < jsonData["data"].length; j++) {
        _cells.add(DataCell(Text('${j + 1}')));
        for (int i = 1; i <= headerMapping.length; i++) {
          _dataCellTitle = "${jsonData["data"][j][headerMapping[i]]}" ?? '-';
          _cells.add(DataCell(Text('$_dataCellTitle')));
        }
        _dataRows.add(DataRow(cells: _cells));
        _cells = [];
      }
    }
    return _dataRows;
  }

  List<DataColumn> createDataColumns(BuildContext context, var jsonData) {
    String columnTitle;
    List<DataColumn> _dataColumns = [];
    Map<String, Object> headers = jsonData['headers'];
    Map<int, String> headerMapping;
    headerMapping = headers.keys
        .toList()
        .asMap()
        .map((index, value) => MapEntry(index + 1, value));
    _dataColumns.add(DataColumn(label: Text('S. No.')));
    for (int i = 1; i <= headerMapping.length; i++) {
      columnTitle = headers[headerMapping[i]];
      _dataColumns.add(
        DataColumn(label: Text('$columnTitle')),
      );
    }
    return _dataColumns;
  }

像here

其中第一行是常数，第一列也是。

Answer 1

好的，所以您有一种方法getTable获取数据内容，在其中调用了两个方法

1）提取行

2）获取列。

但是您没有显示DataTable小部件的代码。

我认为它是ListView或Column。

因此，在您的DataTable小部件中，您应该为该标题创建一个静态Row。

ListView(
      children: <Widget>[
        Row(
          children: <Widget>[
            Text('$heading1'),
            Text('$heading2'),
            Text('$heading3'),
          ],
        ),

        /// Your row and column

      ],
    );

根据您提供的信息，我认为它将为您提供帮助。

Answer 2

我已经使用过，并且工作正常：

SingleChildScrollView dataBody() {
        return SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: DataTable(
                columnSpacing: 10,
                //sortAscending: sort,
                //sortColumnIndex: 0,
                columns: [
                  DataColumn(label: Text("Date"), numeric: false),
                  DataColumn(label: Text("Particulars"), numeric: false),
                  DataColumn(label: Text("Amount"), numeric: true)
                ],
                rows: transactions
                    .map((txn) => DataRow(cells: [
                          DataCell(
                            Text(
                              DateFormat('dd-MMM-yyyy').format(txn.date),
                              style: TextStyle(fontSize: 12.0),
                            ),
                            /*onTap: () {
                          print('Selected ${txn.date}');
                        }*/
                          ),
                          DataCell(FittedBox(
                            child: Text(
                              txn.particulars,
                            ),
                          )),
                          DataCell(Text(txn.amount.toString()))
                        ]))
                    .toList(),
              ),
            ));
      }

固定数据表顶部行

2 个答案: