用于多列显示的Flutter表

Question

我一直在尝试在表上显示数据，我使用了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')),

]),
],
),
]))

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

Answer 1

您可以尝试使用SingleChildScrollView()小部件使页面可滚动并显示表的内容，但不确定如何使设备横向。你可以看看这个帖子，看看它是否回答了你的横向问题：Flutter：如何防止设备方向改变和强制人像？

Answer 2

所以我可以通过在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')),

]),
],
),
]))

Answer 3

您的表小部件在SingleChildScrollView((中添加，并添加滚动方向：轴水平，

body: Container(
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: Colors.blue,
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,
),
//add this scrollview & ScrollDirection
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Container(
child: 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')),

]),
],
),
),
),
]),
),