修复 flutter 中数据表的顶行

Question

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

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

我的标题（第一行）元素随着每个请求而不断变化，其实现方式是，单击它击中 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;
  }

像这样在这里

其中第一行是恒定的，第一列也是恒定的。

Answer 1

好的，你有一种方法getTable来获取数据内容，在其中你调用了两种方法

1) 获取行

2) 获取列。

但你没有显示Widget的代码DataTable。

我认为它是 ListView 或 Column。

Row因此，在您的 DataTable Widget 中，您应该为该标题创建一个静态内容。

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

        /// Your row and column

      ],
    );

根据您提供的信息，我认为它会对您有所帮助。