Flutter DataTable 单元格文本未换行

Question

我正在尝试将 dataTable 放入行小部件中，但是当我这样做时，我丢失了单个单元格中的文本换行。此代码可以正常工作：

  class Testing extends StatefulWidget {
  Testing({Key key}) : super(key: key);

  @override
  _MyDataTableState createState() => _MyDataTableState();
}

class _MyDataTableState extends State<Testing> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DataTable"),
      ),
      body: SingleChildScrollView(        <-- Text wrapping goes away when wrapped in a Row()
        padding: const EdgeInsets.all(8.0),
        child: DataTable(
          // columnSpacing: 100,
          columns: [
            DataColumn(
              label: Container(
                width: 100,
                child: Text('Item Code'),
              ),
            ),
            DataColumn(
              label: Text('Stock Item'),
            ),
          ],
          rows: [
            DataRow(
              cells: [
                DataCell(
                  Text('Yup.  text.'),
                ),
                DataCell(
                  Text(
                      'This is a really long text. It\'s supposed to be long so that I can figure out what in the hell is happening to the ability to have the text wrap in this datacell.  So far, I haven\'t been able to figure it out.'),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
}

有没有一种方法可以在将 DataTable 换行时保留其固有的文本换行？

Answer 1

我猜这是因为 Row 的自然运作方式。它需要尽可能多的可用水平轴。虽然 mainAxisSize 可以根据 children 配置（最小或最大），但 DataTable 没有初始宽度，因此导致 Text 没有被包裹。

为了快速修复，您可以将 Data Table 包裹在 Container 中并为其指定一个常量宽度。

在 DartPad 上快速测试： https://dartpad.dev/a664a29160b6e0443e9ca3bf28d5ec69

片段：

class Testing extends StatefulWidget {
  Testing({Key key}) : super(key: key);

  @override
  _MyDataTableState createState() => _MyDataTableState();
}

class _MyDataTableState extends State<Testing> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DataTable"),
      ),
      body: Row(
        children: [
          Container(
            width: 300, // Give the DataTable a const width.
            child: DataTable(
              columns: [
                DataColumn(
                  label: Container(
                    width: 100,
                    child: Text('Item Code'),
                  ),
                ),
                DataColumn(
                  label: Text('Stock Item'),
                ),
              ],
              rows: [
                DataRow(
                  cells: [
                    DataCell(
                      Text('Yup.  text.'),
                    ),
                    DataCell(
                      Wrap(
                        children: [
                          Text(
                              'This is a really long text. It\'s supposed to be long so that I can figure out what in the hell is happening to the ability to have the text wrap in this datacell.  So far, I haven\'t been able to figure it out.')
                        ],
                      ),
                    )
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 2

将 SingleChildScrollView 换成 Expanded 到。

class Testing extends StatefulWidget {
  Testing({Key key}) : super(key: key);

  @override
  _MyDataTableState createState() => _MyDataTableState();
}

class _MyDataTableState extends State<Testing> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DataTable"),
      ),
      body: Row(
        children: <Widget>[
          //TODO: use Expanded here
          Expanded(
            child: SingleChildScrollView(
              padding: const EdgeInsets.all(8.0),
              child: DataTable(
                // columnSpacing: 100,
                columns: [
                  DataColumn(
                    label: Container(
                      width: 100,
                      child: Text('Item Code'),
                    ),
                  ),
                  DataColumn(
                    label: Text('Stock Item'),
                  ),
                ],
                rows: [
                  DataRow(
                    cells: [
                      DataCell(
                        Text('Yup.  text.'),
                      ),
                      DataCell(
                        Text(
                            'This is a really long text. It\'s supposed to be long so that I can figure out what in the hell is happening to the ability to have the text wrap in this datacell.  So far, I haven\'t been able to figure it out.'),
                      )
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Flutter DataTable 单元格文本未换行

Flutter DataTable cell text not wrapping inside of a row

datatable

text

row

word-wrap

flutter