flutter中如何使datatable中的标头部分固定不动
时间: 2024-02-24 19:57:24 浏览: 132
在 Flutter 中,可以使用 `stickyHeaders` 参数来实现在 DataTable 中固定表头。设置 `stickyHeaders` 为 `true` 后,表头将会被固定在视图的顶部,当用户滚动表格内容时,表头不会跟随滚动而消失。
以下是一个示例代码:
```dart
import 'package:flutter/material.dart';
class MyDataTable extends StatefulWidget {
@override
_MyDataTableState createState() => _MyDataTableState();
}
class _MyDataTableState extends State<MyDataTable> {
final List<Map<String, String>> dataList = [
{
'name': 'John Smith',
'age': '30',
'email': 'john.smith@example.com',
},
{
'name': 'Jane Doe',
'age': '25',
'email': 'jane.doe@example.com',
},
{
'name': 'Bob Johnson',
'age': '40',
'email': 'bob.johnson@example.com',
},
];
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
DataColumn(
label: Text('Name'),
),
DataColumn(
label: Text('Age'),
),
DataColumn(
label: Text('Email'),
),
],
rows: dataList
.map(
(data) => DataRow(
cells: [
DataCell(Text(data['name'])),
DataCell(Text(data['age'])),
DataCell(Text(data['email'])),
],
),
)
.toList(),
// 设置 stickyHeaders 为 true
stickyHeaderRows: 1,
),
),
);
}
}
```
在上面的示例代码中,我们通过设置 `stickyHeaderRows` 参数为 `1` 来实现固定表头。这个参数表示表头占据的行数,如果有多行表头,需要设置为对应的行数。
阅读全文