[英]How to create table like ui in flutter
Flutter has a Table class for this (but you can also do it using simple Row + Column combo). Flutter 为此提供了一个Table类(但您也可以使用简单的 Row + Column 组合来实现)。
Here's the link to the Table docs: Flutter Table这是Table文档的链接: Flutter Table
Here's a simple example to get you started:这是一个让您入门的简单示例:
Container(
color: Colors.white,
padding: EdgeInsets.all(20.0),
child: Table(
border: TableBorder.all(color: Colors.black),
children: [
TableRow(children: [
Text('Cell 1'),
Text('Cell 2'),
Text('Cell 3'),
]),
TableRow(children: [
Text('Cell 4'),
Text('Cell 5'),
Text('Cell 6'),
])
],
),
)
Flutter has a DataTable
class that can be used like this. Flutter有一个
DataTable
class可以这样用
DataTable(
columns: [
DataColumn(
label: Text('ID'),
),
DataColumn(
label: Text('Name'),
),
DataColumn(
label: Text('Code'),
),
DataColumn(
label: Text('Quantity'),
),
DataColumn(
label: Text('Amount'),
),
],
rows: [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Arshik')),
DataCell(Text('5644645')),
DataCell(Text('3')),
DataCell(Text('265\$')),
])
])
For advanced configurations, you can check these packages which will help you extend some features like pagination, selection etc.对于高级配置,您可以检查这些包,这将帮助您扩展一些功能,如分页、选择等。
https://pub.dev/packages/data.tables https://pub.dev/packages/data.tables
https://pub.dev/packages/data.table_2 https://pub.dev/packages/data.table_2
Use Table widget !使用表格小部件!
That widget allows you to build a table.该小部件允许您构建表格。 Code :
Table(children : <TableRow>[])
代码:
Table(children : <TableRow>[])
Example :例子 :
Table(
border: TableBorder.all(), // Allows to add a border decoration around your table
children: [
TableRow(children :[
Text('Year'),
Text('Lang'),
Text('Author'),
]),
TableRow(children :[
Text('2011',),
Text('Dart'),
Text('Lars Bak'),
]),
TableRow(children :[
Text('1996'),
Text('Java'),
Text('James Gosling'),
]),
]
),
Note: TableRow is a horizontal group of cells in a Table.
注意: TableRow是表格中的一组水平单元格。
Add many TableRow that you want to添加许多您想要的TableRow
You can learn more about Table by watching this official video or by visiting flutter.dev您可以通过观看此官方视频或访问flutter.dev来了解有关Table的更多信息
You can use DataTable widget.您可以使用DataTable小部件。 This sample shows how to display a DataTable with three columns: name, age, and role.
此示例显示如何显示具有三列的 DataTable:名称、年龄和角色。 enter image description here
在此处输入图片说明
All the above solutions work well for static data.以上所有解决方案都适用于 static 数据。 But if you are looking at using dynamic data then, the solution below is for you.
但是,如果您正在考虑使用动态数据,那么下面的解决方案适合您。
Table(
border: TableBorder(
horizontalInside:
BorderSide(color: scaffoldBgColor, width: 10.0)),
children: [
//This table row is for the table header which is static
TableRow(children: [
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"INDEX",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black87),
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"NAME",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black87),
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Text(
"ACTION",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black87),
),
),
),
]),
// Using the spread operator to add the remaining table rows which have dynamic data
// Be sure to use .asMap().entries.map if you want to access their indexes and objectName.map() if you have no interest in the items index.
...students.asMap().entries.map(
(student) {
return TableRow(
decoration: BoxDecoration(color: tertiary),
children: [
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
student.value.id.toString(),
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Text(
'${student.value.firstName} ${student.value.surName}',
),
),
),
Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Checkbox(
materialTapTargetSize:
MaterialTapTargetSize.shrinkWrap,
onChanged: (val) {},
value: false,
),
),
),
]);
},
)
],
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.