flutter 做一表格,带线框的表格。 表格的标头内容:货款,含税货款,税费,差额
时间: 2024-03-29 12:40:07 浏览: 171
Flutter 分页功能表格控件详细解析
可以使用Flutter中的Table和TableRow来实现表格,同时使用Container来添加线框效果。以下是一个简单的示例代码:
```dart
Table(
border: TableBorder.all(width: 1.0, color: Colors.grey), //设置表格边框
children: [
TableRow(
decoration: BoxDecoration(color: Colors.grey[200]), //设置表头背景色
children: [
TableCell(child: Center(child: Text('货款'))),
TableCell(child: Center(child: Text('含税货款'))),
TableCell(child: Center(child: Text('税费'))),
TableCell(child: Center(child: Text('差额'))),
],
),
TableRow(
children: [
TableCell(
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Text('1000'),
),
),
TableCell(
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Text('1200'),
),
),
TableCell(
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Text('200'),
),
),
TableCell(
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
child: Text('0'),
),
),
],
),
],
),
```
在上面的代码中,我们定义了一个Table,并设置了边框样式。接着定义了两个TableRow,第一个TableRow为表头,第二个TableRow为表格内容。每个TableRow中都包含了四个TableCell,分别对应四个表格单元格。在每个TableCell中,我们使用了一个Container来添加线框效果,并设置了padding来增加内容与线框之间的距离。
阅读全文