如何更改 PaginatedDataTable 上的列宽？

Question

现在列之间有很大的空间，即使我有一个 4 个字符的标题和一个 1 到 3 位的排名值，就好像我可以在每列中放置 4 倍。

我尝试使用较小的字体，但分隔保持不变。

这是我用来设置 PaginatedDataTable 的内容。我在 Table/Row/Cell/etc 中找不到任何似乎会影响宽度的参数。这个空间似乎是自动的，但完全没有必要。谢谢。

Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: const Text('Tour Rankings')),
        body:
        new ListView(
            padding: const EdgeInsets.all(5.0),
            children: <Widget>[
              new PaginatedDataTable(
                  header: const Text('Current Rankings'),
                  rowsPerPage: _rowsPerPage,
                  onRowsPerPageChanged: (int value) { setState(() { _rowsPerPage = value; }); },
                  sortColumnIndex: _sortColumnIndex,
                  sortAscending: _sortAscending,
                  columns: <DataColumn>[
                    new DataColumn(
                        label: new Text('Rank', style: new TextStyle(fontSize: 8.0)),
                        numeric: true,
                        onSort: (int columnIndex, bool ascending) => _sort<num>((Player d) => d.rank, columnIndex, ascending)
                    ),
                    new DataColumn(
                        label: new Text('Prev', style: new TextStyle(fontSize: 8.0)),
                        numeric: true,
                        onSort: (int columnIndex, bool ascending) => _sort<num>((Player d) => d.prevRank, columnIndex, ascending)
                    ),...

Answer 1

flutter中有一个分页数据表的属性为columnSpacing。 根据 Material Design 规范，此值默认为 56.0。

您可以根据需要更改该值以更改列内容之间的水平边距。

              PaginatedDataTable(
                showCheckboxColumn: false,
                columnSpacing: 10.0,
                header: Center(
                  child: Text("Statement"),
                ),
                columns: [
                  DataColumn(label: Text("Date")),
                  DataColumn(label: Text("Particular")),
                  DataColumn(label: Text("Debit")),
                  DataColumn(label: Text("Credit")),
                  DataColumn(label: Text("Detail")),
                ],
                source: YourDataSource(),
              ),

它应该看起来像这样：

Answer 2

在this diff之后可以设置horizontalMargin和columnSpacing来实现自定义列宽。

  /// The horizontal margin between the edges of the table and the content
  /// in the first and last cells of each row.
  ///
  /// When a checkbox is displayed, it is also the margin between the checkbox
  /// the content in the first data column.
  ///
  /// This value defaults to 24.0 to adhere to the Material Design specifications.
  final double horizontalMargin;

  /// The horizontal margin between the contents of each data column.
  ///
  /// This value defaults to 56.0 to adhere to the Material Design specifications.
  final double columnSpacing;

Answer 3

flutter PaginatedDataTable 布局的灵活性我也遇到过同样的问题。 我的解决方案是使用布局变量扩展 DataTable 的构造函数：

FlexibleDataTable({
    Key key,
    @required this.columns,
    this.sortColumnIndex,
    this.sortAscending = true,
    this.onSelectAll,
    this.headingRowHeight = 56.0,
    this.dataRowHeight = 48.0,
    this.tablePadding = 24.0,
    this.columnSpacing = 56.0,
    this.sortArrowPadding = 2.0,
    this.headingFontSize = 12.0,
    @required this.rows,
  }

当然，我必须实现 FlexiblePaginatedDatatable 才能使用 FlexibleDataTable：

new SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: new FlexibleDataTable(
        key: _tableKey,
        columns: widget.columns,
        sortColumnIndex: widget.sortColumnIndex,
        sortAscending: widget.sortAscending,
        onSelectAll: widget.onSelectAll,
        columnSpacing: 20.0,
        dataRowHeight: 40.0,
        rows: _getRows(_firstRowIndex, widget.rowsPerPage)
    )
),

Flutter 团队应该在 DataTable 和 PaginatedDataTable 的正式版本中包含这些功能，这样其他人就不需要为这些琐碎的东西实现 ad hoc 版本。问题存在，我们将看到它何时完成。 https://github.com/flutter/flutter/issues/12775