Flutter Dart 上 DataTable 的固定列和行标题 [英] Fixed column and row header for DataTable on Flutter Dart

问题描述

我使用 DataTable 在 Flutter Dart 上建立了一个表格.这个表非常大，我同时使用垂直和水平滚动.滚动时我失去了对列的引用，我需要知道列是什么.

举个例子.在屏幕截图上，除非我滚动到顶部，否则我不知道 20.0 和 25.0 上的数字是什么意思.

我添加了一个 GIF 示例来说明我想要实现的目标.(使用 LibreOffice).我需要固定的列名(第一行).

表格示例，在表格中间滚动时:

我想做的例子:

我的表的代码示例:

 return SingleChildScrollView(滚动方向:Axis.vertical，孩子:SingleChildScrollView(滚动方向:Axis.horizo​​ntal，孩子:数据表(列:MyDataSet.getColumns(),行:widget._data.map((row) => DataRow(onSelectChanged: (d) {设置状态((){选择行 = d ?row.hashCode:空；});},选择:row.hashCode == selectedRow，单元格:MyDataSet.toDataCells(row))).toList())),);

缺少代码示例:

return columns.map((name) => DataColumn(标签:文本(名称，样式:TextStyle(fontWeight:FontWeight.bold，颜色:Colors.black)，))).toList();

---

更新 (24/10/2019)

如果标题名称与单元格内容的大小相同，则当前代码运行良好.否则两种尺寸都会不同.

---

更新 (21/02/2020)

人们创建了一个包来做到这一点.:D

解决方案

试试 Flutter 包

I've build a table on Flutter Dart using DataTable. This table is very large, and I'm using both Vertical and Horizontal scrolling. When scrolling I lose reference to columns, I need to know what is the column.

As example. On the screenshot i don't know what the numbers 20.0 and 25.0 on the means, unless I scroll to the top.

I've added a GIF example of what i want to achieve. (Using LibreOffice). I need fixed column name (first row).

Example of the table, while scrolling around the middle of the table:

Example of what i want to do:

Code sample for my table:

    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: DataTable(
          columns: MyDataSet.getColumns(),
          rows: widget._data.map<DataRow>((row) => DataRow(
            onSelectChanged: (d) {
              setState(() {
                selectedRow = d ? row.hashCode : null;
              });
            },
            selected: row.hashCode == selectedRow,
            cells: MyDataSet.toDataCells(row)
          )).toList()
        )
      ),
    );

Missing code sample:

return columns.map<DataColumn>((name) => DataColumn(
      label: Text(name, style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),)
    )).toList();

---

Update (24/10/2019)

Current code works well if header name is the same size as cell content. Otherwise both sizes will be different.

---

Update (21/02/2020)

People created a package to do that. :D

https://pub.dev/packages/table_sticky_headers

Image from pub.dev!

解决方案

Try the flutter package horizontal_data_table
A Flutter Widget that create a horizontal table with fixed column on left hand side.

dependencies:
  horizontal_data_table: ^2.5.0

这篇关于Flutter Dart 上 DataTable 的固定列和行标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！