Flutter DataTable单元格文本未在行内换行

问题描述 投票:0回答:1

我正在尝试将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中固有的文本换行?

flutter text datatable row word-wrap
1个回答
0
投票

我想这是因为Row的自然工作方式。它占用尽可能多的水平轴。尽管mainAxisSize可以根据子级进行配置(最小或最大),但是DataTable没有初始宽度,因此导致Text没有被包装。

为了快速修复,您可以将Data Table包裹在Container中,并为其指定const宽度。

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

Snippet:

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.')
                        ],
                      ),
                    )
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}
© www.soinside.com 2019 - 2024. All rights reserved.