微信交流群

# SliverPadding

SliverPadding 组件是sliver系列的Padding组件,配合CustomScrollView使用。

比如给CustomScrollView中SliverList添加内边距:

CustomScrollView(
  slivers: <Widget>[
    SliverPadding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate((content, index) {
          return Container(
            height: 65,
            color: Colors.primaries[index % Colors.primaries.length],
          );
        }, childCount: 50),
      ),
    )
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

image-20200520113545431

有时使用SliverPadding会出现一些意想不到的问题,比如,使用SliverPadding包裹SliverPersistentHeader(pinned:true),会出现SliverPersistentHeader和SliverAppBar重叠的问题,问题代码如下:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('SliverAppBar'),
      pinned: true,
    ),
    SliverPadding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      sliver: SliverPersistentHeader(
        delegate: MySliverPersistentHeaderDelegate(),
        pinned: true,
      ),
    ),
    SliverPadding(
      padding: EdgeInsets.symmetric(horizontal: 10),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate((content, index) {
          return Container(
            height: 65,
            color: Colors.primaries[index % Colors.primaries.length],
          );
        }, childCount: 50),
      ),
    )
  ],
)
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

SliverPadding_1

通过上面的效果图发现SliverPersistentHeader和SliverAppBar发生了重叠。