如何在Flutter中更改DataTable的列宽？

Question

我在我的Flutter应用程序中有一个DataTable。问题是，当数据被填充时，列的宽度会自动设置并且太大了。我该如何手动设置列宽？我尝试在“Widget build”中更改宽度参数，但这会改变整个表格的宽度，而不是所需的列。

- Smith

---

DataTable 中的每一列都是一个小部件，因此您可以使用 Container 对其进行包装，并以这种方式设置宽度。 - Reginaldo Costa

我可以在Widget的build方法中包装DataTable，但我无法在DataTable方法中包装所需的列。 - Smith

请查看下面的答案。 - Reginaldo Costa

Answer 1

为 DataTable 添加 columnSpacing 属性。默认设置为 56.0。

 columnSpacing: 30.0

- vishalknishad

---

columnSpacing设置列之间的间距，但不会改变列的宽度。在这种情况下，他想要调整列的宽度 - 虽然columnSpacing技术上可以做到这一点，但实际上并未改变列宽度。 - Zilbert97

Answer 2

@Smith，你的意思是你不能做这个吗？如果你能分享一些代码...

Widget build(BuildContext context) {
    return Scaffold(
      body: DataTable(
        columns: [DataColumn(label: Text('label'))],
        rows: [
          DataRow(cells: [DataCell(
            Container(
              width: 200, //SET width
              child: Text('text')))
              ])
        ]
      ),
    );

- Reginaldo Costa

---

我添加了一些代码，在widget build中，我只有一个DataTable子项：_databody()。表格在_databody()方法中填充。 - Smith

好的，我找到了我的错误，我忘记在文本中添加“child”。 - Smith

Answer 3

使用 DataTable 中的 columnSpacing 属性。当设置为 0 时，它会采用文本内容的长度。

columnSpacing: 0, 

- Maxamed Nuur

---

我尝试添加了这个，而副驾驶提供了以下建议"// 这似乎不起作用" - 副驾驶是正确的。 - undefined

Answer 4

与其使用已接受答案中提到的 Container，更好的做法是使用 ConstrainedBox，这样只有在内容等于或超过约束宽度时单元格大小才会增加。

import 'package:flutter/material.dart';

void main() async {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Card(
          child: DataTable(columns: [
            DataColumn(
                label: Text(
              'short text column'.toUpperCase(),
              style: TextStyle(fontWeight: FontWeight.bold),
            )),
            DataColumn(
                label: Text(
              'long text column'.toUpperCase(),
              style: TextStyle(fontWeight: FontWeight.bold),
            )),
          ], rows: [
            DataRow(cells: [
              DataCell(Text('short text')),
              DataCell(ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: 250), //SET max width
                  child: Text('very long text blah blah blah blah blah blah',
                      overflow: TextOverflow.ellipsis))),
            ]),
            DataRow(cells: [
              DataCell(Text('short text')),
              DataCell(ConstrainedBox(
                  constraints: BoxConstraints(maxWidth: 250), //SET max width
                  child: Text('very long text blah blah blah blah blah blah',
                      overflow: TextOverflow.ellipsis))),
            ])
          ]),
        ),
      ),
    ),
  );
}

查看Dartpad示例

- jnt

Answer 5

除了Reginaldo Costa的回答之外，我还添加了LayoutBuilder来获取约束条件，并将其与SizedBox一起使用，使宽度根据宽度约束动态变化。

这在开发Flutter Web时可能会很有用。在这里，我设置一个列宽为90％，另一个列宽为10％。

return Column(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
  LayoutBuilder(builder: (context, constraints) {
    return PaginatedDataTable(
      rowsPerPage: 5,
      source: dataSource,
      showFirstLastButtons: true,
      columnSpacing: 50,
      horizontalMargin: 0,
      columns: [
        DataColumn(
            label: SizedBox(
                // 130 is the amount of space consumed by horizontal Paddings and Margins
                width: (constraints.maxWidth - 130) * 0.9,
                child: const Padding(
                  padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
                  child: Text('Username'),
                ))),
        DataColumn(
            label: SizedBox(
                width: (constraints.maxWidth - 130) * 0.1,
                child: const Padding(
                  padding: EdgeInsets.fromLTRB(15, 8, 8, 8),
                  child: Text('Actions'),
                )))
      ],
    );
  })
]);

- Rephael Charis