如何让Flutter中PaginatedDataTable2的第一列占用更多空间？

Question

我正在开发 Flutter 桌面应用程序并使用 PagulatedDataTable2 来显示分页表。我希望第一列（例如“产品名称”）比其他列占据更多空间，但我很难实现这一点。

使用：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）使用 Expanded 和 flex：

我尝试在列标题 (DataColumn) 和数据单元格 (DataCell) 中使用 Row 和 Expanded：

DataCell(
  Row(
    children: [
      Expanded(
        flex: 2,
        child: Text("Product Name"),
      ),
    ],
  ),
);

该列未按预期展开。

3）调整minWidth和columnSpacing： 我增加了 minWidth 并减少了 columnSpacing，但这并没有解决问题。

Answer 1

 DataColumn2(
    label: Text('Column A'),
    size: ColumnSize.L,
),

您的包裹中有此选项吗？也许可以帮助你...