我正在开发 Flutter 桌面应用程序并使用 PaginatedDataTable2 显示分页表。我希望第一列(例如“产品名称”)比其他列占用更多空间,但我很难实现这一点。
使用:data_table_2包
分页数据表的自定义小部件
import 'package:data_table_2/data_table_2.dart';
class TpaginatedDatatable extends StatelessWidget {
const TpaginatedDatatable(
{super.key,
this.rowPerPerPage = 25,
required this.source,
required this.columns,
this.onPageChanged,
this.dataRowHeight = 35,
this.tableHeight = 786,
this.minWidth,
this.showCheckboxColumn = true});
final int rowPerPerPage;
final DataTableSource source;
final List<DataColumn> columns;
final Function(int)? onPageChanged;
final double dataRowHeight;
final double tableHeight;
final double? minWidth;
final bool showCheckboxColumn;
@override
Widget build(BuildContext context) {
return PaginatedDataTable2(
source: source,
columns: columns,
columnSpacing: 12,
minWidth: minWidth,
dividerThickness: 2.5,
horizontalMargin: 12,
rowsPerPage: rowPerPerPage,
availableRowsPerPage: const [10, 20, 25],
showFirstLastButtons: true,
// Checkbox Column
showCheckboxColumn: showCheckboxColumn,
onPageChanged: onPageChanged,
// pagination
onRowsPerPageChanged: (noOfRows) {},
renderEmptyRowsInTheEnd: false,
dataRowHeight: dataRowHeight,
headingTextStyle: Theme.of(context).textTheme.titleMedium,
headingRowColor:
WidgetStateProperty.resolveWith((states) => Colors.white),
empty: Text("no data"),
headingRowDecoration: BoxDecoration(),
);
}
}
使用它
TpaginatedDatatable(
columns: const [
DataColumn(label: Text("Product Name")),
DataColumn(label: Text("Ctn RP")),
DataColumn(label: Text("Psc RP")),
DataColumn(label: Text("Ctn TP")),
DataColumn(label: Text("Psc TP")),
DataColumn(label: Text("Ctn Qty")),
DataColumn(label: Text("Pcs Qty")),
DataColumn(label: Text("Bon (Rs)")),
DataColumn(label: Text("Dis (Rs)")),
DataColumn(label: Text("Dis (%)")),
DataColumn(label: Text("Total")),
],
source: ProductDataSource(productController),
showCheckboxColumn: true,
)
数据源
class ProductDataSource extends DataTableSource {
final ProductController productController;
ProductDataSource(this.productController);
@override
DataRow getRow(int index) {
if (index >= productController.filteredData.length) {
return const DataRow(cells: []);
}
final product = productController.filteredData[index];
return DataRow(
selected: productController.isSelected(product.id),
onSelectChanged: (selected) {
if (selected != null) {
productController.toggleSelection(product.id);
notifyListeners();
}
},
cells: [
DataCell(SizedBox(width: 200, child: Text(product.name))),
DataCell(Text('Rs ${product.retailCtnPrice.toStringAsFixed(2)}')),
DataCell(Text('Rs ${product.retailPcsPrice.toStringAsFixed(2)}')),
DataCell(Text('Rs ${product.tradeCtnPrice.toStringAsFixed(2)}')),
DataCell(Text('Rs ${product.tradePcsPrice.toStringAsFixed(2)}')),
// DataCell(Text('PKR ${product.retail.toStringAsFixed(2)}')),
DataCell(buildQuantityInput(
controller: product.ctnQuantityController,
onChanged: (newQty) {
productController.updateCtnQuantity(index, newQty);
notifyListeners();
},
enabled: productController.isSelected(product.id),
)),
DataCell(buildQuantityInput(
controller: product.pcsQuantityController,
onChanged: (newQty) {
productController.updatePcsQuantity(index, newQty);
notifyListeners();
},
enabled: productController.isSelected(product.id),
)),
DataCell(buildQuantityInput(
controller: product.bonController,
onChanged: (newBon) {
productController.updateBon(index, newBon);
notifyListeners();
},
enabled: productController.isSelected(product.id),
)),
DataCell(buildQuantityInput(
controller: product.discountInRsController,
onChanged: (newDiscount) {
productController.updateDiscountInRs(index, newDiscount);
notifyListeners();
},
enabled: productController.isSelected(product.id),
)),
DataCell(buildQuantityInput(
controller: product.discountInPercentController,
onChanged: (newDiscount) {
productController.updateDiscountInPercent(index, newDiscount);
notifyListeners();
},
enabled: productController.isSelected(product.id),
)),
DataCell(Text(
'Rs ${productController.calculateProductTotal(product).toStringAsFixed(2)}',
style: const TextStyle(
fontSize: 14, fontWeight: FontWeight.bold, color: Colors.green),
)),
],
);
}
@override
bool get isRowCountApproximate => false;
@override
int get rowCount => productController.filteredData.length;
@override
int get selectedRowCount => 0;
}
解决方法尝试
我尝试过以下方法:
1)使用SizedBox:
我将第一列的标签包裹在具有特定宽度的 SizedBox 中:
DataColumn(
label: SizedBox(width: 200, child: Text("Product Name")),
)
它没有按预期工作,因为宽度似乎仍然受到限制。
2)使用 flex 扩展:
我尝试在列标题(DataColumn)和数据单元格(DataCell)中使用 Row 和 Expanded:
DataCell(
Row(
children: [
Expanded(
flex: 2,
child: Text("Product Name"),
),
],
),
);
该柱没有像预期的那样展开。
3)调整 minWidth 和 columnSpacing: 我增加了 minWidth 并减少了 columnSpacing,但这并不能解决问题。
你的包里有这个选项吗?也许能帮到你...