Flutter DataTable删除多余的填充

时间：2019-03-20 22:33:56

标签： flutter

我想在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 个答案:

答案 0 :(得分：1)

试试：

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

答案 1 :(得分：0)

您可以使用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,),
          ]
         ),
        ]
      ),
    )
  ),

答案 2 :(得分：0)

当前，即使我仍然遇到相同的问题，但我找到了一个替代此问题的方法，您可以您 看到您所有的 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')),
      ]),
    ]
    )
  ),
  }
  

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

答案 3 :(得分：0)

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

答案 4 :(得分：0)

您可以将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')),
          ]),
        ],
      ),
    ),
  ),
);

答案 5 :(得分：0)

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

答案 6 :(得分：0)

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

相关问题
最新问题