Flutter 数据表列宽问题

我正试图在

flatter

中构建一个全宽

DataTable

，左侧有一个固定宽度的列，其他两个列应将剩余的列除以

但是，即使左侧标题文本被截断，中间和右侧列也不会采用剩余的宽度，如下所示：

如果文本太宽，无法在一行中显示，但

wrap

无法按预期工作，我还希望将其包装到单元格中

我如何解决我的问题

代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: Container(
              constraints: BoxConstraints.expand(width: double.infinity),
              child: SingleChildScrollView(
                child: DataTable(
                    headingRowHeight: 32,
                    dataRowHeight: 24,
                    columns: [
                      DataColumn(
                        label: ConstrainedBox(
                          constraints: BoxConstraints(
                            maxWidth: 20,
                            minWidth: 20,
                          ),
                          child: Text('Short column'),
                        ),
                      ),
                      DataColumn(label: Text('Long column')),
                      DataColumn(label: Text('Long column')),
                    ],
                    rows: [
                      DataRow(
                        cells: [
                          DataCell(
                            ConstrainedBox(
                              constraints: BoxConstraints(
                                maxWidth: 20,
                                minWidth: 20,
                              ),
                              child: Text('1'),
                            ),
                          ),
                          DataCell(
                            Wrap(
                              children: [
                                Text(
                                    """Some long content i would like to be wrapped when column width is not
                              enought to fully display it"""),
                              ],
                            ),
                          ),
                          DataCell(Text('Some more text')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Container(
                            color: Colors.pink,
                            child: ConstrainedBox(
                              constraints: BoxConstraints(
                                maxWidth: 20,
                                minWidth: 20,
                              ),
                              child: Text('2'),
                            ),
                          )),
                          DataCell(
                            Wrap(
                              children: [
                                Container(
                                    color: Colors.yellow,
                                    child: Text(
                                        """Some long content i would like to be wrapped when column width is not
                              enought to fully display it""")),
                              ],
                            ),
                          ),
                          DataCell(Text('Some more text')),
                        ],
                      )
                    ]),
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: Container(
              child: SingleChildScrollView(
                child: Table(
                  border: TableBorder.all(width: 1),
                  columnWidths: {
                    0: FixedColumnWidth(20),
                  },
                  defaultColumnWidth: FlexColumnWidth(),
                  children: [
                    TableRow(children: [
                      Text('Short column'),
                      Text('Long column'),
                      Text('Long column')
                    ]),
                    TableRow(
                      children: [
                        Text('1'),
                        Text(
                            'Some long content i would like to be wrapped when column width is not enought to fully display it'),
                        Container(
                          child: Text('Some more text'),
                        )
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

编辑

感谢@ Auiik的答案，但在你的例子中，表没有完全的设备宽度，它仍然在中间，有一个大屏幕，这不是我想要的。 此外，行高度是恒定的，如果内容需要更高的高度，它不会增加

---

有什么可以做的吗？

数据表有一些默认值：

DataTable({
  Key key,
  @required this.columns,
  this.sortColumnIndex,
  this.sortAscending = true,
  this.onSelectAll,
  this.dataRowHeight = kMinInteractiveDimension,
  this.headingRowHeight = 56.0,
  this.horizontalMargin = 24.0,
  this.columnSpacing = 56.0,

下面是删除了一些小部件的固定示例

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: DataTable(
            horizontalMargin: 6.0,
            columnSpacing: 6.0,
            headingRowHeight: 32.0,
            dataRowHeight: 100.0,
            columns: [
              DataColumn(
                label: ConstrainedBox(
                  constraints: BoxConstraints(
                    maxWidth: 20,
                    minWidth: 20,
                  ),
                  child: Text('Short column'),
                ),
              ),
              DataColumn(label: Text('Long column')),
              DataColumn(label: Text('Three')),
            ],
            rows: [
              DataRow(
                cells: [
                  DataCell(
                    Text('1'),
                  ),
                  DataCell(
                    Container(
                      child: Text(
                        'Some long content i would like to be wrapped ',
                      ),
                    ),
                  ),
                  DataCell(Text('Some more text')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Container(
                    color: Colors.pink,
                    child: Text('2'),
                  )),
                  DataCell(
                      Container(
                        height: 500,
                        color: Colors.yellow,
                        child: Text(
                          'Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it Some long content i would like to be wrapped when column width is not enought to fully display itSome long content i would like to be wrapped when column width is not display it 555',
                        ),
                      ),
                      placeholder: false),
                  DataCell(Text('Some more text')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

编辑

代码已更新

该表不是全宽的，因为我们使用了树为“”的多行字符串。如果使用常规字符串，则该行为是正常的

行的高度在构造函数中设置，无法动态更改

子：数据表( 水平边距：6.0， 柱间距：6.0， 头向生长高度：32.0， 数据行高度：100.0

最后，我个人的观点是，使用这个

DataTable

---

我发现一个普通的

表格

允许我做我想做的事情：我可以对某一列使用

FixedColumnWidth

，对其他列使用

FlexColumnWidth

，以占用剩余的空间

此外，文本被正确包装，行高增加以适应内容，如下图中的小屏幕宽度和大屏幕宽度：

这是代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: Container(
              constraints: BoxConstraints.expand(width: double.infinity),
              child: SingleChildScrollView(
                child: DataTable(
                    headingRowHeight: 32,
                    dataRowHeight: 24,
                    columns: [
                      DataColumn(
                        label: ConstrainedBox(
                          constraints: BoxConstraints(
                            maxWidth: 20,
                            minWidth: 20,
                          ),
                          child: Text('Short column'),
                        ),
                      ),
                      DataColumn(label: Text('Long column')),
                      DataColumn(label: Text('Long column')),
                    ],
                    rows: [
                      DataRow(
                        cells: [
                          DataCell(
                            ConstrainedBox(
                              constraints: BoxConstraints(
                                maxWidth: 20,
                                minWidth: 20,
                              ),
                              child: Text('1'),
                            ),
                          ),
                          DataCell(
                            Wrap(
                              children: [
                                Text(
                                    """Some long content i would like to be wrapped when column width is not
                              enought to fully display it"""),
                              ],
                            ),
                          ),
                          DataCell(Text('Some more text')),
                        ],
                      ),
                      DataRow(
                        cells: [
                          DataCell(Container(
                            color: Colors.pink,
                            child: ConstrainedBox(
                              constraints: BoxConstraints(
                                maxWidth: 20,
                                minWidth: 20,
                              ),
                              child: Text('2'),
                            ),
                          )),
                          DataCell(
                            Wrap(
                              children: [
                                Container(
                                    color: Colors.yellow,
                                    child: Text(
                                        """Some long content i would like to be wrapped when column width is not
                              enought to fully display it""")),
                              ],
                            ),
                          ),
                          DataCell(Text('Some more text')),
                        ],
                      )
                    ]),
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(children: [
          Expanded(
            child: Container(
              child: SingleChildScrollView(
                child: Table(
                  border: TableBorder.all(width: 1),
                  columnWidths: {
                    0: FixedColumnWidth(20),
                  },
                  defaultColumnWidth: FlexColumnWidth(),
                  children: [
                    TableRow(children: [
                      Text('Short column'),
                      Text('Long column'),
                      Text('Long column')
                    ]),
                    TableRow(
                      children: [
                        Text('1'),
                        Text(
                            'Some long content i would like to be wrapped when column width is not enought to fully display it'),
                        Container(
                          child: Text('Some more text'),
                        )
                      ],
                    )
                  ],
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

---

谢谢@awaik的回答，但这并不能解决我的问题。请检查我的编辑。我尝试了更新的代码，但仍然没有达到全宽。无论如何，正如你所说，我发现

DataTable

可能不是满足我需要的最佳小部件