sticky_table

Description:

sticky table

sticky_table #
一个可以固定表头、首尾列、以及可以自定义单元格和表头的表格组件。
A table component that can fix headers, first and end columns, and customize cells and headers.
Getting started #
In the command line
flutter pub get sticky_table
copied to clipboard
效果演示 #

固定列，表头自动固定 #
// Fixed column, header automatically fixed
demo() {
StickyTable(
data: [1, 2, 3, 4, 5],
columns: [
StickyTableColumn(
"Title",
//固定在开头
fixedStart: true,
//固定在结尾
fixedEnd: false,
)
]
);
}
copied to clipboard
去除默认的单元格内边距 #
demo() {
StickyTable(
cellPadding: EdgeInsets.zero,
);
}
copied to clipboard
自定义 表格的头、尾的背景描述符 #
demo() {
StickyTable(
titleDecoration: BoxDecoration(
color: Colors.white
),
rowDecoration: BoxDecoration(
color: Colors.black12
),
);
}
copied to clipboard
显示斑马线/ Show the zebra crossing #

支持显示斑马线
设置斑马线颜色：单行、双行
设置斑马线首尾的圆角弧度

demo() {
StickyTable(
showZebraCrossing: true,
zebraCrossingColor: (Colors.white, const Color(0xfff5f5f5)),
zebraCrossingRadius: const Radius.circular(12),
);
}
copied to clipboard
完整使用方式 / Full Usage #
demo() {
return StickyTable(
// 支持任意数据数组
data: List.generate(50, (index) => sort ? 50 - index : index),
// 默认列宽
defaultColumnWidth: const FixedColumnWidth(80),
// 标题的高度 default: 58
titleHeight: 58,
// 单元格高度 default: 58
cellHeight: 58,
// 每一列的配置
columns: [
StickyTableColumn(
"Title", // 标题 / TITLE
fixedStart: true,
//是否在开头固定 / Is it fixed at the beginning?
showSort: true,
//是否支持排序 /Support sorting
sort: sort,
//排序图标 / Sort i
//列宽：支持百分比和自适应 / Column width, Support percentage and adaptive
columnWidth: const FixedColumnWidth(80),
//单元格的对齐方式 /Align cells
alignment: Alignment.centerLeft,
// 标题的点击时间 / Click time of the title
onTitleClick: (context, title) {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(content: Text("Sort")));
setState(() {
sort = !(title.sort ?? false);
});
},
// 自定义渲染单元格 / Custom rendering cells
renderCell: (context, title, data, row, column) {
return Text("Name$data");
},
//自定义渲染标题 / Custom rendering title
renderTitle: (context, title) {
return Text(
title.title,
style: const TextStyle(color: Colors.purple),
);
},
),
StickyTableColumn(
"Age",
showSort: true,
sort: false,
onCellClick: (context, title, data, row, column) {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("年龄$data")));
},
renderCell: (context, title, data, row, column) {
return Text("*$data");
},
),
...List.generate(
10,
(index) =>
StickyTableColumn(
"Sub Title $index",
showSort: true,
sort: false,
renderCell: (context, title, data, row, column) {
return Text("Content $row-$column");
},
),
),
StickyTableColumn(
"Option",
// 固定在结尾
fixedEnd: true,
columnWidth: const FixedColumnWidth(100),
renderCell: (context, title, data, row, column) {
return MaterialButton(
onPressed: () {
ScaffoldMessenger.of(context).hideCurrentSnackBar();
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text("删除$data成功")));
},
color: Colors.red,
minWidth: 0,
child: const Text(
"Delete",
style: TextStyle(color: Colors.white),
),
);
},
),
],
);
}
copied to clipboard
Thanks ~ #
掘金分享更多：https://juejin.cn/user/660178231645965?utm_source=gold_browser_extension
致谢 #
❤️❤️❤️
Thanks to sync_scroll_controller ❤️