DataTable中的列占用了太多空间

Question

我正在Flutter Web应用程序中使用DataTable小部件来显示一些内容。问题是，当我减少屏幕宽度时，表无法适应它。我以前实现了这个小部件，它似乎工作得很好。小部件使第二列溢出，而不是减少第一列和第二列之间的空间。

EDIT：删除columnSpaceing会使DataTable占用可用空间，但字体类型文本小部件仍然溢出。

有什么办法我能解决这个问题吗？

问题的屏幕截图

这是我的代码：

void addRows() {
searchRows = [];
loadedFonts.forEach((font) {
searchRows.add(DataRow(
cells: [
DataCell(Row(
mainAxisSize: MainAxisSize.min,
children: [
FontImage(font),
SizedBox(
width: 15,
),
Text(font.family),
],
)),
DataCell(Text(font.type)),
DataCell(Text(font.weights.length.toString())),
DataCell(Text(font.isPaid ? "No" : "Yes", style: TextStyle(color: font.isPaid ? Color(0xff9b475d) : Color(0xff447c69)),),),
],
onSelectChanged: (value) {
print(font.family);
},
));
});
}
@override
Widget build(BuildContext context) {
return DataTable(
showCheckboxColumn: false,
headingTextStyle: MyTheme.cardValue.copyWith(fontSize: 20),
dataTextStyle: MyTheme.cardKey.copyWith(fontSize: 17, letterSpacing: 0.8),
horizontalMargin: 0,
dataRowHeight: 60.0,
sortAscending: famSort,
sortColumnIndex: 0,
columnSpacing: 1,
columns: [
DataColumn(
label: Text("Font Family"),
onSort: (columnIndex, ascending) {
sortByFamily(ascending);
},
),
DataColumn(
label: Text("Font Type"),
onSort: (columnIndex, ascending) {
sortByType();
},
),
DataColumn(label: Text("Weights")),
DataColumn(
label: Text("Free"),
onSort: (columnIndex, ascending) {
sortByPay();
},
),
],
rows: searchRows,
);
}

Answer 1

如果您正在渲染一组大数据，那么您可以尝试使用谷歌图表api。

1. 查看官方文档：(https://developers.google.com/chart/interactive/docs/gallery/table(
2. 结合dart-js网络互操作性(https://dart.dev/web/js-interop(

我希望这有助于回答您的问题。分享你是如何解决这个问题的。