DraggableSheet与SliverPersistentHeader：固定持久垂直间距实现问题

嘿，我看了你的问题和代码，终于搞明白为啥你加的SliverToBoxAdapter没达到预期效果了！你想要的是固定在pinned的SliverPersistentHeader下方、不管怎么滚动都不会消失的垂直间距，但现在用SliverToBoxAdapter套SizedBox的方式，这个间距是属于列表内容的一部分——当你滚动列表时，它会跟着列表往上跑，最后被固定在顶部的header给挡住，所以看起来就像“没创建出空间”一样。

给你两个实用的解决方案，你可以根据需求选：

方案一：给列表整体加顶部内边距（推荐） #

这个方法不用改动header的任何设置，只需要把你的SliverFixedExtentList用SliverPadding包裹，给顶部加20的内边距就行。这样整个列表的顶部会一直和header保持20的间距，不管怎么滚动，这个空隙都稳稳待在header下面。

修改后的完整代码如下：

return CustomScrollView(
  controller: scrollController,
  slivers: [
    SliverPersistentHeader(
      pinned: true,
      floating: false,
      delegate: _SliverAppBarDelegate(
        minHeight: 50.0,
        maxHeight: 50.0,
        child: Align(
          alignment: Alignment.bottomCenter,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(
                "What is Lorem Ipsum?",
                style: titleText,
              ),
              Flexible(
                child: Text(
                  "Lorem Ipsum is simply dummy text of the",
                  style: text,
                ),
              ),
            ],
          ),
        ),
      ),
    ),
    // 移除原来的SliverToBoxAdapter，用SliverPadding给列表加顶部间距
    SliverPadding(
      padding: const EdgeInsets.only(top: 20.0),
      sliver: SliverFixedExtentList(
        itemExtent: 100.0,
        delegate: SliverChildBuilderDelegate(
          (BuildContext context, int index) {
            return Container(
              alignment: Alignment.center,
              color: Colors.lightBlue[100 * ((index +1) % 9)],
              child: Text('List Item $index'),
            );
          },
        ),
      ),
    ),
  ],
);

方案二：把间距整合到SliverPersistentHeader里 #

如果你能接受header的整体高度增加，可以直接把20的间距加到header的child里，同时调整header的min和maxHeight来容纳新增的空间。这样间距就变成header的一部分，会跟着header一起固定在顶部。

修改后的header代码片段：

SliverPersistentHeader(
  pinned: true,
  floating: false,
  delegate: _SliverAppBarDelegate(
    // 把高度从50改成70，容纳原内容+20的间距
    minHeight: 70.0,
    maxHeight: 70.0,
    child: Align(
      alignment: Alignment.bottomCenter,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "What is Lorem Ipsum?",
            style: titleText,
          ),
          Flexible(
            child: Text(
              "Lorem Ipsum is simply dummy text of the",
              style: text,
            ),
          ),
          // 在这里加间距
          SizedBox(height: 20.0),
        ],
      ),
    ),
  ),
),
// 记得移除原来的SliverToBoxAdapter哦

两个方案的小区别： #

• 方案一的好处是完全保留header的原有高度，视觉上是header和列表之间的独立空隙，滚动时列表内容不会跑到header下方，完美匹配你“固定持久空间”的需求。
• 方案二更适合需要header整体高度增加的场景，但会占用更多顶部屏幕空间。

根据你的描述，方案一应该是最贴合你需求的选择，赶紧试试吧！

内容来源于stack exchange