Flutter 可冻结的侧滑表格 sticky-headers-table 结合 NestedScrollView 吸顶悬浮的使用实践_table_sticky_headers

最近在做flutter web的开发，需要做一个类似云文档中表格固定顶部栏和左侧栏的需求，也就是冻结列表的功能
那么在pub上呢也有不少的开源库，比如：

table_sticky_headers

data_table_2

如果说只是简单的表格和吸顶，那么这两个库就完全可以满足需求，那么到这就不用往下看了

与NestedScrollView结合的吸顶效果实践

实则需求是这样的：希望左侧栏可以悬停的同时，顶部的表头也可以和NestedScrollView的一部分一起悬停在顶部

希望蓝色矩形的这一部分可以吸顶悬停

向上滑到顶的效果（蓝色矩形）

直接撸代码开始实践：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('NestedScrollView with '),
        backgroundColor: Colors.amber,
      ),
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) => _buildHeadWidget(context),
        body: StickyHeadersTable(
          columnsLength: titleColumn.length,
          rowsLength: titleRow.length,
          columnsTitleBuilder: (i) => Text(titleColumn[i]),
          rowsTitleBuilder: (i) => Text(titleRow[i]),
          contentCellBuilder: (i, j) => Text(data[i][j]),
          legendCell: Text('Sticky Legend'),
        ),
      ),
    );
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

List<Widget> _buildHeadWidget(BuildContext context) {
    return [
      SliverToBoxAdapter(
        child: Container(
          alignment: Alignment.center,
          padding: EdgeInsets.symmetric(vertical: 100, horizontal: 30),
          color: Colors.yellow,
          child: Text(
            "header",
            style: TextStyle(fontSize: 65, fontWeight: FontWeight.bold),
          ),
        ),
      ),
      SliverPersistentHeader(
        pinned: true,
        delegate: CommonSilverAppBarDelegate(
          Container(
            height: 100,
            color: Colors.red,
            alignment: Alignment.center,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  padding: EdgeInsets.symmetric(vertical: 30),
                  child: Text(
                    "persistentHeader",
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                  ),
                )
                // _buildHeadTabRowWidget()
              ],
            ),
          ),
        ),
      ),
    ];
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

实现的效果如下图：

数据很少的时候：

整体的效果不尽如人意，用户交互很差劲，主要有这么几个问题：

1. 表格顶部没有跟随NestedScrollView一起吸顶（其实也是预期能想到的，表头并没有写到PersistentHeader里面）
2. 滑动body部分的时候，header部分并没有往上滚动，没有那种粘在一起的效果，在滑动到列表最底部的时候，Header才往上一顿一顿的挪动，感觉一卡一卡的，很难受
3. 在数据量很少的时候会明显的感觉到：向上滑动列表，body里顶部的内容会被吸顶的PersistentHeader遮挡

对于以上问题的解决方案

对于问题1

需要把源码中的头部拿出来，放到NestedScrollView的PersistenHeader里面，这一部分的代码需要提取出来，然后放入PersistenHeader当中

并且需要处理ScrollController联动的情况，需要声明一个该插件中的ScrollControllers对象，并且在build的时候拿到源码内的notification回调方法

对于问题2和3

通过SliverOverlapAbsorber + SliverOverlapInjector的组合可以一起解决

优化后的效果：

在数据量很少的时候：

项目地址

这是项目demo地址：https://github.com/pengboboer/sticky-headers-table

如果对你有帮助，动动小手给一个star，谢谢。