flutter CustomScrollView实现代表头的表格,每次固定显示10条数据
时间: 2024-10-20 13:04:02 浏览: 9
在 Flutter 中,`CustomScrollView` 结合 `SliverList` 和 `SliverChildBuilderDelegate` 可以实现一个分页的滚动视图,其中头部表现为表格形式并固定显示一定数量的数据,比如每页10条。下面是一个简单的示例:
```dart
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class ScrollTableWithFixedHeader extends StatelessWidget {
final List<String> headerData;
final List<List<dynamic>> dataList;
const ScrollTableWithFixedHeader({
Key? key,
required this.headerData,
required this.dataList,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[
// 固定的头部表格
SliverToBoxAdapter(
child: SizedBox(height: kHeaderHeight, child: TableSection(headerData)),
),
// 动态加载的滚动区域
SliverChildBuilderDelegate(
builder: (context, index) {
if (index >= dataList.length) { // 如果已超出数据范围,则停止添加
return null;
}
return SliverRow(
children: dataList[index].map((item) => Text(item.toString())).toList(),
);
},
maxCount: 10, // 每次只加载10行数据
),
],
);
}
Widget TableSection(List<String> data) {
return Table(
border: Border.all(color: Colors.black),
children: data.map((title) => TableRow(cells: [Text(title)])).toList(),
);
}
}
// 使用示例
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final headerData = ['Name', 'Age', 'Occupation'];
final dataList = ... // 这里填充你的数据列表,长度大于10
return MaterialApp(
home: Scaffold(body: ScrollTableWithFixedHeader(headerData: headerData, dataList: dataList)),
);
}
}
```
在这个例子中,我们首先创建了一个固定的头部表格,然后使用 `SliverChildBuilderDelegate` 来动态构建滑动列表的内容。`maxCount` 参数决定了每次滚动会加载多少行数据。
阅读全文