用于多列显示的 Flutter Table

Posted 2023-02-23

【中文标题】用于多列显示的 Flutter Table

【英文标题】：Flutter Table for multiple column display

【发布时间】：2021-02-08 03:11:02

【问题描述】：

一直在尝试在表格上显示数据，我使用了 Datatable，但我只显示了 4 列，其余列隐藏了。并且大多数列的标题显示错误“右溢出 12 像素”，但是当我转动我的设备横向时，它会显示其他的，有些仍然隐藏。以下是我的代码：

                 body: SingleChildScrollView(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                      child: Text(
                        'Rejected',
                        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                      )),
                  SizedBox(
                    height: 10,
                  ),

                    Material(
                    elevation: 3.0,
    borderRadius: BorderRadius.circular(30.0),
    color: colorBlue,
    child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () async 

    ,child: Text(
      "ADD NEW",
      style: TextStyle(
        color: Colors.white,
      ),
    ),
    )
                    ),
                  SizedBox(
                    height: 10,
                  ),

                  DataTable(
                    columns: [
                      DataColumn(label: Text('No')),
                      DataColumn(label: Text('PO Ref')),
                      DataColumn(label: Text('Req Ref')),
                      DataColumn(label: Text('Requester')),
                      DataColumn(label: Text('Supplier')),
                      DataColumn(label: Text('Created')),
                      DataColumn(label: Text('By')),
                      DataColumn(label: Text('Delivery')),
                      DataColumn(label: Text('Status')),

                    ],
                    rows: [
                      DataRow(cells: [
                        DataCell(Text('1')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),

                      ]),
                      DataRow(cells: [
                        DataCell(Text('2')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                      DataRow(cells: [
                        DataCell(Text('3')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                    ],
                  ),
                ]))

有没有一种方法可以让这个页面横向查看我的所有数据而不隐藏和删除溢出的错误？

【问题讨论】：

如果您使用的是 Row，请尝试包装小部件。并请分享完整代码

我刚刚更新了我的完整代码。我正在使用 SingleScrollView() 来包装它。

【参考方案1】：

所以我可以通过在我的SingleChildScrollView 中简单地添加scrollDirection: Axis.horizontal, 来解决这个问题，下面是我的更新代码：

                     body: SingleChildScrollView(
scrollDirection: Axis.horizontal,//this is the line of code added
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                      child: Text(
                        'Rejected',
                        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                      )),
                  SizedBox(
                    height: 10,
                  ),

                    Material(
                    elevation: 3.0,
    borderRadius: BorderRadius.circular(30.0),
    color: colorBlue,
    child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () async 

    ,child: Text(
      "ADD NEW",
      style: TextStyle(
        color: Colors.white,
      ),
    ),
    )
                    ),
                  SizedBox(
                    height: 10,
                  ),

                  DataTable(
                    columns: [
                      DataColumn(label: Text('No')),
                      DataColumn(label: Text('PO Ref')),
                      DataColumn(label: Text('Req Ref')),
                      DataColumn(label: Text('Requester')),
                      DataColumn(label: Text('Supplier')),
                      DataColumn(label: Text('Created')),
                      DataColumn(label: Text('By')),
                      DataColumn(label: Text('Delivery')),
                      DataColumn(label: Text('Status')),

                    ],
                    rows: [
                      DataRow(cells: [
                        DataCell(Text('1')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),

                      ]),
                      DataRow(cells: [
                        DataCell(Text('2')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                      DataRow(cells: [
                        DataCell(Text('3')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                    ],
                  ),
                ]))

【参考方案2】：

您可以尝试使用SingleChildScrollView() 小部件使页面可滚动并显示表格的内容，但不确定如何使设备横向。你可以看看这个帖子，看看它是否能回答你的风景问题：Flutter: how to prevent device orientation changes and force portrait?

【讨论】：

我刚刚更新了我的代码，我使用了 SingleChildScrollView()，仍然是同样的错误。另外，我按照您提供的链接进行操作，这是为了使整个应用程序纵向，但我只希望此页面是横向的，而其他页面是纵向的。