Question

我想在DataTable中显示一些数据，我有9列，除第一个列外，其他所有列都是数字。

我遇到的问题是，我只能看到前5列，这不是因为数据太长，而是因为每一列之间都有很多空间。

有没有一种方法可以使DataColumn用我选择的填充包装数据？这是我的代码：

Scaffold(
  appBar: AppBar(
    title: Text('DataTable Sample'),
  ),
  body: Container(
    child: DataTable(columns: <DataColumn>[
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('A'),
          ),
          DataColumn(
            label: Text('B'),
          ),
          DataColumn(
            label: Text('C'),
          ),
          DataColumn(
            label: Text('D'),
          ),
          DataColumn(
            label: Text('E'),
          ),
          DataColumn(
            label: Text('F'),
          ),
          DataColumn(
            label: Text('G'),
          ),
          DataColumn(
            label: Text('H'),
          ),
        ], rows: <DataRow>[
          DataRow(cells: [
            DataCell(Text('1 Boston')),
            DataCell(Text('3')),
            DataCell(Text('3')),
            DataCell(Text('7')),
            DataCell(Text('1')),
            DataCell(Text('30')),
            DataCell(Text('8')),
            DataCell(Text('+2')),
            DataCell(Text('-22')),
          ]),
          DataRow(cells: [
            DataCell(Text('2 London')),
            DataCell(Text('3')),
            DataCell(Text('4')),
            DataCell(Text('12')),
            DataCell(Text('44')),
            DataCell(Text('7')),
            DataCell(Text('44')),
            DataCell(Text('-98')),
            DataCell(Text('0')),
          ]),
          DataRow(cells: [
            DataCell(Text('3 Rome')),
            DataCell(Text('10')),
            DataCell(Text('50')),
            DataCell(Text('90')),
            DataCell(Text('4')),
            DataCell(Text('7')),
            DataCell(Text('33')),
            DataCell(Text('+5')),
            DataCell(Text('-61')),
          ]),
        ]
        )
  ),
);

Answer 1

试试：

...
DataTable(
   horizontalMargin: 0,
   columnSpacing: 10,
   columns: [
...

Answer 2

您可以使用Table代替DataTable。进一步参考-video。

这是使用方法：

Scaffold(
    appBar: AppBar(title: Text('DataTable Sample')),
    body: Container(
      child: Table(
        columnWidths: {0:FractionColumnWidth(.2)},
        children: [
        TableRow(
          children: [
            Text("Name",),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
            Text("A",textAlign: TextAlign.center,),
            Text("B",textAlign: TextAlign.center,),
          ]
         ),
         TableRow(
          children: [
            Text("1 Boston",),
            Text('3',textAlign: TextAlign.center,),
            Text('3',textAlign: TextAlign.center,),
            Text('7',textAlign: TextAlign.center,),
            Text('1',textAlign: TextAlign.center,),
            Text('30',textAlign: TextAlign.center,),
            Text('8',textAlign: TextAlign.center,),
            Text('+2',textAlign: TextAlign.center,),
            Text('-22',textAlign: TextAlign.center,),
          ]
         ),
         TableRow(
          children: [
            Text('2 London',),
            Text('3',textAlign: TextAlign.center,),
            Text('4',textAlign: TextAlign.center,),
            Text('12',textAlign: TextAlign.center,),
            Text('44',textAlign: TextAlign.center,),
            Text('7',textAlign: TextAlign.center,),
            Text('44',textAlign: TextAlign.center,),
            Text('-98',textAlign: TextAlign.center,),
            Text('0',textAlign: TextAlign.center,),
          ]
         ),
        TableRow(
          children: [
              Text('3 Rome'),
              Text('10',textAlign: TextAlign.center,),
              Text('50',textAlign: TextAlign.center,),
              Text('90',textAlign: TextAlign.center,),
              Text('4',textAlign: TextAlign.center,),
              Text('7',textAlign: TextAlign.center,),
              Text('33',textAlign: TextAlign.center,),
              Text('+5',textAlign: TextAlign.center,),
              Text('-61',textAlign: TextAlign.center,),
          ]
         ),
        ]
      ),
    )
  ),

Answer 3

当前，即使我仍然遇到相同的问题，但我找到了一个替代此问题的方法，您可以您看到您所有的 9列。看看它是否可以帮助您。

使用 SingleChildScrollView 来水平滚动数据表

Scaffold( appBar: AppBar(title: Text('DataTable Sample')), body: data() )


在“小部件构建（BuildContext上下文）{}”之外创建函数，如下所示

SingleChildScrollView data() { return SingleChildScrollView( scrollDirection: Axis.horizontal, child: Container( child: DataTable(columns: <DataColumn>[ DataColumn( label: Text('Name'), ), DataColumn( label: Text('A'), ), DataColumn( label: Text('B'), ), DataColumn( label: Text('C'), ), DataColumn( label: Text('D'), ), DataColumn( label: Text('E'), ), DataColumn( label: Text('F'), ), DataColumn( label: Text('G'), ), DataColumn( label: Text('H'), ), ], rows: <DataRow>[ DataRow(cells: [ DataCell(Text('1 Boston')), DataCell(Text('3')), DataCell(Text('3')), DataCell(Text('7')), DataCell(Text('1')), DataCell(Text('30')), DataCell(Text('8')), DataCell(Text('+2')), DataCell(Text('-22')), ]), DataRow(cells: [ DataCell(Text('2 London')), DataCell(Text('3')), DataCell(Text('4')), DataCell(Text('12')), DataCell(Text('44')), DataCell(Text('7')), DataCell(Text('44')), DataCell(Text('-98')), DataCell(Text('0')), ]), DataRow(cells: [ DataCell(Text('3 Rome')), DataCell(Text('10')), DataCell(Text('50')), DataCell(Text('90')), DataCell(Text('4')), DataCell(Text('7')), DataCell(Text('33')), DataCell(Text('+5')), DataCell(Text('-61')), ]), ] ) ), }


让我知道它是否可以解决您的问题

Answer 4

是的。最近，Flutter团队将对此小部件的更新合并。现在仅在“主”通道（您可能处于“稳定”状态）中切换运行flutter channel master，然后在终端中切换flutter upgrade。之后，您可以通过设置columnSpacing的{{1}}参数来控制每列之间的间隔。有关更多信息，请查看已关闭的issue

Answer 5

您可以将SingleChildScrollView和FittedBox用作其父项。

Scaffold(
  appBar: AppBar(
    title: Text('DataTable Sample'),
  ),
  body: SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: FittedBox(
      child: DataTable(
        columns: <DataColumn>[
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('A'),
          ),
          DataColumn(
            label: Text('B'),
          ),
          DataColumn(
            label: Text('C'),
          ),
          DataColumn(
            label: Text('D'),
          ),
          DataColumn(
            label: Text('E'),
          ),
          DataColumn(
            label: Text('F'),
          ),
          DataColumn(
            label: Text('G'),
          ),
          DataColumn(
            label: Text('H'),
          ),
        ],
        rows: <DataRow>[
          DataRow(cells: [
            DataCell(Text('1 Boston')),
            DataCell(Text('3')),
            DataCell(Text('3')),
            DataCell(Text('7')),
            DataCell(Text('1')),
            DataCell(Text('30')),
            DataCell(Text('8')),
            DataCell(Text('+2')),
            DataCell(Text('-22')),
          ]),
          DataRow(cells: [
            DataCell(Text('2 London')),
            DataCell(Text('3')),
            DataCell(Text('4')),
            DataCell(Text('12')),
            DataCell(Text('44')),
            DataCell(Text('7')),
            DataCell(Text('44')),
            DataCell(Text('-98')),
            DataCell(Text('0')),
          ]),
          DataRow(cells: [
            DataCell(Text('3 Rome')),
            DataCell(Text('10')),
            DataCell(Text('50')),
            DataCell(Text('90')),
            DataCell(Text('4')),
            DataCell(Text('7')),
            DataCell(Text('33')),
            DataCell(Text('+5')),
            DataCell(Text('-61')),
          ]),
        ],
      ),
    ),
  ),
);

Answer 6

要删除每列之间的空间，您可以更改columnSpacing的值，默认值为56。

Answer 7

尝试在您的'DataTable（）'函数内传递 columnSpacing 参数，似乎可以接受，默认值为56，减小该值将限制列，增大该值将分散数据

Flutter DataTable删除多余的填充

7 个答案: