logo标签列表

Flutter DataTable 去除多余的填充间距

flutter
9

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

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

enter image description here

是否有一种方法可以使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')),
          ]),
        ]
        )
  ),
);
7个回答
13
尝试将horizontalMargin设置为0，因为默认值为24.0：

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

参考DataTable horizontalMargin的官方文档。

13

您可以使用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')),
          ]),
        ],
      ),
    ),
  ),
);
在这种情况下，FittedBox无效，因为它的目的是适应父级的限制区域，而父级是无限增长的。 - Oleg Novosad
12

是的，最近Flutter团队更新了这个Widget。它现在只在“master”渠道上（您可能在“stable”上），要切换，请在终端中运行flutter channel master 然后再运行flutter upgrade。这样做后，您可以通过设置DataTable的columnSpacing参数来控制每列之间的空白。有关更多信息，请查看此已关闭的问题

我一开始以为这个不起作用，因为我正在开发Flutter For Web，如果有更多的空间可用，它将适当地展开您的列。 - jaredbaszler
2
尝试在“DataTable()”函数中传递columnSpacing参数，它似乎可以接受它。默认值为56，减小它会使列变窄，增大它会将数据分散开。
1

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

1
请提供一个代码片段展示如何实现这个功能。 - Lulupointu
1

你可以使用表格代替DataTable。更多参考 - 视频。

这是如何使用它的：

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,),
          ]
         ),
        ]
      ),
    )
  ),
我也遇到了同样的问题，无法看到整个表格，而且我想使用 DataTable，因为它具有一些像是数据 Sorting 的功能。 - ler
他问了一个关于 DataTable 而不是 Table 的问题。 - x86
1

目前，即使我也遇到了同样的问题，但我找到了一个解决方案，可以让你 看到所有9列。看看它是否能帮助你。

使用SingleChildScrollView来水平滚动Datatable

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

在“Widget build(BuildContext context) {}”之外创建一个如下所示的函数。
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')),
      ]),
    ]
    )
  ),
  }

让我知道它是否解决了你的问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接