我可以想出一个使用滚动控制器的解决方法，如下所示：Video
基本上它是第一行的水平滚动，第一列的垂直滚动和子表的混合水平和垂直滚动。然后，当您移动子表时，其控制器会移动列和行。
这是一个自定义小部件，其中包含如何使用它的示例：
final _rowsCells = [
[7, 8, 10, 8, 7],
[10, 10, 9, 6, 6],
[5, 4, 5, 7, 5],
[9, 4, 1, 7, 8],
[7, 8, 10, 8, 7],
[10, 10, 9, 6, 6],
[5, 4, 5, 7, 5],
[9, 4, 1, 7, 8],
[7, 8, 10, 8, 7],
[10, 10, 9, 6, 6],
[5, 4, 5, 7, 5],
[9, 4, 1, 7, 8],
[7, 8, 10, 8, 7],
[10, 10, 9, 6, 6],
[5, 4, 5, 7, 5],
[9, 4, 1, 7, 8]
];
final _fixedColCells = [
"Pablo",
"Gustavo",
"John",
"Jack",
"Pablo",
"Gustavo",
"John",
"Jack",
"Pablo",
"Gustavo",
"John",
"Jack",
"Pablo",
"Gustavo",
"John",
"Jack",
];
final _fixedRowCells = [
"Math",
"Informatics",
"Geography",
"Physics",
"Biology"
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: CustomDataTable(
rowsCells: _rowsCells,
fixedColCells: _fixedColCells,
fixedRowCells: _fixedRowCells,
cellBuilder: (data) {
return Text('$data', style: TextStyle(color: Colors.red));
},
),
);
}
class CustomDataTable<T> extends StatefulWidget {
final T fixedCornerCell;
final List<T> fixedColCells;
final List<T> fixedRowCells;
final List<List<T>> rowsCells;
final Widget Function(T data) cellBuilder;
final double fixedColWidth;
final double cellWidth;
final double cellHeight;
final double cellMargin;
final double cellSpacing;
CustomDataTable({
this.fixedCornerCell,
this.fixedColCells,
this.fixedRowCells,
@required this.rowsCells,
this.cellBuilder,
this.fixedColWidth = 60.0,
this.cellHeight = 56.0,
this.cellWidth = 120.0,
this.cellMargin = 10.0,
this.cellSpacing = 10.0,
});
@override
State<StatefulWidget> createState() => CustomDataTableState();
}
class CustomDataTableState<T> extends State<CustomDataTable<T>> {
final _columnController = ScrollController();
final _rowController = ScrollController();
final _subTableYController = ScrollController();
final _subTableXController = ScrollController();
Widget _buildChild(double width, T data) => SizedBox(
width: width, child: widget.cellBuilder?.call(data) ?? Text('$data'));
Widget _buildFixedCol() => widget.fixedColCells == null
? SizedBox.shrink()
: Material(
color: Colors.lightBlueAccent,
child: DataTable(
horizontalMargin: widget.cellMargin,
columnSpacing: widget.cellSpacing,
headingRowHeight: widget.cellHeight,
dataRowHeight: widget.cellHeight,
columns: [
DataColumn(
label: _buildChild(
widget.fixedColWidth, widget.fixedColCells.first))
],
rows: widget.fixedColCells
.sublist(widget.fixedRowCells == null ? 1 : 0)
.map((c) => DataRow(
cells: [DataCell(_buildChild(widget.fixedColWidth, c))]))
.toList()),
);
Widget _buildFixedRow() => widget.fixedRowCells == null
? SizedBox.shrink()
: Material(
color: Colors.greenAccent,
child: DataTable(
horizontalMargin: widget.cellMargin,
columnSpacing: widget.cellSpacing,
headingRowHeight: widget.cellHeight,
dataRowHeight: widget.cellHeight,
columns: widget.fixedRowCells
.map((c) =>
DataColumn(label: _buildChild(widget.cellWidth, c)))
.toList(),
rows: []),
);
Widget _buildSubTable() => Material(
color: Colors.lightGreenAccent,
child: DataTable(
horizontalMargin: widget.cellMargin,
columnSpacing: widget.cellSpacing,
headingRowHeight: widget.cellHeight,
dataRowHeight: widget.cellHeight,
columns: widget.rowsCells.first
.map((c) => DataColumn(label: _buildChild(widget.cellWidth, c)))
.toList(),
rows: widget.rowsCells
.sublist(widget.fixedRowCells == null ? 1 : 0)
.map((row) => DataRow(
cells: row
.map((c) => DataCell(_buildChild(widget.cellWidth, c)))
.toList()))
.toList()));
Widget _buildCornerCell() =>
widget.fixedColCells == null || widget.fixedRowCells == null
? SizedBox.shrink()
: Material(
color: Colors.amberAccent,
child: DataTable(
horizontalMargin: widget.cellMargin,
columnSpacing: widget.cellSpacing,
headingRowHeight: widget.cellHeight,
dataRowHeight: widget.cellHeight,
columns: [
DataColumn(
label: _buildChild(
widget.fixedColWidth, widget.fixedCornerCell))
],
rows: []),
);
@override
void initState() {
super.initState();
_subTableXController.addListener(() {
_rowController.jumpTo(_subTableXController.position.pixels);
});
_subTableYController.addListener(() {
_columnController.jumpTo(_subTableYController.position.pixels);
});
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Row(
children: <Widget>[
SingleChildScrollView(
controller: _columnController,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
child: _buildFixedCol(),
),
Flexible(
child: SingleChildScrollView(
controller: _subTableXController,
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
controller: _subTableYController,
scrollDirection: Axis.vertical,
child: _buildSubTable(),
),
),
),
],
),
Row(
children: <Widget>[
_buildCornerCell(),
Flexible(
child: SingleChildScrollView(
controller: _rowController,
scrollDirection: Axis.horizontal,
physics: NeverScrollableScrollPhysics(),
child: _buildFixedRow(),
),
),
],
),
],
);
}
}
由于第一列、第一行和子表是独立的，我不得不为每一个创建一个DataTable。并且由于DataTable有无法删除的表头，所以第一列和子表的表头都被第一行隐藏了。
另外，我必须使第一列和第一行不能手动滚动，因为如果滚动它们，子表将不会滚动。
这可能不是最好的解决方案，但目前似乎不是另一种方法。您可以尝试改进这种方法，也许使用Table 或其他小部件而不是DataTable，至少可以避免隐藏子表和第一列的标题。