我们可以通过增加 SliverAppBar 的高度来避免重叠。这里提供三种实现方式。

1. 将 SliverAppBar 的高度设置为非零值

CustomScrollView(
  slivers: [
    SliverAppBar(
      backgroundColor: Colors.transparent,
      expandedHeight: 200.0, // 增加高度即可
      flexibleSpace: FlexibleSpaceBar(
        title: Text("Title"),
      ),
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 200.0,
        color: Colors.red,
      ),
    ),
  ],
)

2. 使用 SliverOverlapAbsorber 和 SliverOverlapInjector

DefaultTabController(
  length: 2,
  child: NestedScrollView(
    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
      return [
        SliverOverlapAbsorber(
          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
          child: SliverAppBar(
            backgroundColor: Colors.transparent,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Title"),
            ),
            expandedHeight: 200.0,
            pinned: true,
          ),
        ),
      ];
    },
    body: TabBarView(
      children: [
        SliverOverlapInjector(
          handle:
              NestedScrollView.sliverOverlapAbsorberHandleFor(context), // 这里需要传 handle
          child: SliverToBoxAdapter(
            child: Container(
              color: Colors.red,
              height: 200.0,
            ),
          ),
        ),
        // ...
      ],
    ),
  ),
)

3. 使用 CustomScrollView 和 SliverOverlapAbsorber

CustomScrollView(
  slivers: [
    SliverOverlapAbsorber(
      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
      child: SliverAppBar(
        backgroundColor: Colors.transparent,
        flexibleSpace: FlexibleSpaceBar(
          title: Text("Title"),
        ),
        expandedHeight: 200.0,
        pinned: true,
      ),
    ),
    SliverOverlapInjector(
      handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
    ),
    SliverToBoxAdapter(
      child: Container(
        color: Colors.red,
        height: 200.0,
      ),
    ),
  ],
)