Flutter表格粘性头部插件sticky_table的使用

一个可以固定表头、首尾列、以及可以自定义单元格和表头的表格组件。

开始使用

在命令行中执行以下命令来获取 sticky_table 插件：

flutter pub add sticky_table

效果演示

固定列，表头自动固定

demo() {
  StickyTable(
      data: [1, 2, 3, 4, 5],
      columns: [
        StickyTableColumn(
          "Title",
          // 固定在开头
          fixedStart: true,
          // 固定在结尾
          fixedEnd: false,
        )
      ]
  );
}

去除默认的单元格内边距

demo() {
  StickyTable(
    cellPadding: EdgeInsets.zero,
  );
}

自定义 表格的头、尾的背景描述符

demo() {
  StickyTable(
    titleDecoration: BoxDecoration(
        color: Colors.white
    ),
    rowDecoration: BoxDecoration(
        color: Colors.black12
    ),
  );
}

显示斑马线/ Show the zebra crossing

demo() {
  StickyTable(
    showZebraCrossing: true,
    zebraCrossingColor: (Colors.white, const Color(0xfff5f5f5)),
    zebraCrossingRadius: const Radius.circular(12),
  );
}

完整使用方式 / 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
        fixedStart: true,
        // 是否在开头固定 / Is it fixed at the beginning?
        showSort: true,
        // 是否支持排序 / Support sorting
        sort: sort,
        // 排序图标 / Sort icon
        // 列宽：支持百分比和自适应 / Column width, Support percentage and adaptive
        columnWidth: const FixedColumnWidth(80),
        // 单元格的对齐方式 / Align cells
        alignment: Alignment.centerLeft,
        // 标题的点击事件 / Click event of the title
        onTitleClick: (context, title) {
          ScaffoldMessenger.of(context).hideCurrentSnackBar();
          ScaffoldMessenger.of(context)
              .showSnackBar(const SnackBar(content: Text("排序")));
          setState(() {
            sort = !(title.sort ?? false);
          });
        },
        // 自定义渲染单元格 / Custom rendering cells
        renderCell: (context, title, data, row, column) {
          return Text("名称$data");
        },
        // 自定义渲染标题 / Custom rendering title
        renderTitle: (context, title) {
          return Text(
            title.title,
            style: const TextStyle(color: Colors.purple),
          );
        },
      ),
      StickyTableColumn(
        "年龄",
        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(
          "标题$index",
          showSort: true,
          sort: false,
          renderCell: (context, title, data, row, column) {
            return Text("内容$row-$column");
          },
        ),
      ),
      StickyTableColumn(
        "操作",
        // 固定在结尾
        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(
              "删除",
              style: TextStyle(color: Colors.white),
            ),
          );
        },
      ),
    ],
  );
}