SliverPersistentHeader与Cupertino导航栏重叠问题求助

在使用CustomScrollView搭配CupertinoSliverNavigationBar和自定义SliverPersistentHeader（内含CupertinoSearchTextField与按钮）时，已将自定义SliverPersistentHeader设置为floating: true，但回滚页面时，该自定义Header会被导航栏遮挡。

初始状态：

重叠状态（自定义栏被导航栏遮挡）：

相关代码 #

页面布局代码

class GeneralBalancesScreenLayout extends StatelessWidget {
  const GeneralBalancesScreenLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(slivers: [
      //----------------------------------------------------------------------
      //NavigationBar
      //----------------------------------------------------------------------
      const PlatformWidget(
        defaultWidget: SizedBox.shrink(),
        iosWidget: IosSliverNavigationBar(),
      ),

      const PlatformWidget(
          defaultWidget: SizedBox.shrink(), iosWidget: IosSearchBar()),

      SliverList(
          delegate: SliverChildBuilderDelegate(
              (_, index) => const Center(child: Text("-----"))))
    ]);
  }
}

自定义栏代码

class IosSearchBar extends StatelessWidget {
  const IosSearchBar({super.key});

  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(
      floating: true,
      delegate: GenericSliverHeader(
          maxExtend: 55,
          minExtend: 55,
          backgroundColor:
              CupertinoTheme.of(context).barBackgroundColor.withOpacity(1),
          body: Stack(
            fit: StackFit.expand,
            children: [
              Container(
                  color: CupertinoTheme.of(context).scaffoldBackgroundColor),
              Align(
                alignment: Alignment.bottomCenter,
                child: Row(
                  children: [
                    const Expanded(
                        child: Padding(
                      padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
                      child: CupertinoSearchTextField(),
                    )),
                    CupertinoButton(
                        child: const Text('Добавить'), onPressed: () {})
                  ],
                ),
              )
            ],
          )),
    );
  }
}

问题原因 #

1. CupertinoSliverNavigationBar是固定在顶部的sliver组件，页面滚动时会始终占据顶部位置。
2. 自定义SliverPersistentHeader在CustomScrollView的slivers列表中排在导航栏之后，层级上导航栏处于上层，所以滚动时浮动的搜索栏会被遮挡。
3. 搜索栏内部的背景色设置也加剧了视觉上的重叠问题。

正确实现方式 #

方案1：整合搜索栏到导航栏（推荐）

利用CupertinoSliverNavigationBar的扩展区域，将搜索栏和按钮整合进去，滚动时导航栏的收缩行为会自然带动搜索栏：

class IosSliverNavigationBar extends StatelessWidget {
  const IosSliverNavigationBar({super.key});

  @override
  Widget build(BuildContext context) {
    return CupertinoSliverNavigationBar(
      largeTitle: const Text("总账"),
      trailing: CupertinoButton(
        child: const Text('Добавить'),
        onPressed: () {},
      ),
      // 滚动时导航栏收缩，显示中间的搜索栏
      middle: const CupertinoSearchTextField(),
    );
  }
}

方案2：调整层级分离布局

如果需要保持两个组件独立，通过Stack将搜索栏放在导航栏上方，同时给列表添加顶部内边距避免内容被遮挡：

class GeneralBalancesScreenLayout extends StatelessWidget {
  const GeneralBalancesScreenLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        CustomScrollView(
          slivers: [
            const PlatformWidget(
              defaultWidget: SizedBox.shrink(),
              iosWidget: IosSliverNavigationBar(),
            ),
            // 给列表添加顶部padding，避开搜索栏的位置
            const SliverPadding(padding: EdgeInsets.only(top: 55)),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => const Center(child: Text("-----")),
              ),
            ),
          ],
        ),
        // 将搜索栏固定在导航栏下方
        Positioned(
          top: 44, // 对应Cupertino导航栏默认高度
          left: 0,
          right: 0,
          child: Container(
            height: 55,
            color: CupertinoTheme.of(context).scaffoldBackgroundColor,
            child: Row(
              children: [
                const Expanded(
                  child: Padding(
                    padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
                    child: CupertinoSearchTextField(),
                  ),
                ),
                CupertinoButton(
                  child: const Text('Добавить'),
                  onPressed: () {},
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

方案3：使用SliverAppBar实现灵活布局

如果不局限于纯Cupertino组件，SliverAppBar的floating和pinned属性能更好地控制头部行为：

class GeneralBalancesScreenLayout extends StatelessWidget {
  const GeneralBalancesScreenLayout({super.key});

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        SliverAppBar(
          backgroundColor: CupertinoTheme.of(context).barBackgroundColor,
          floating: true,
          pinned: true,
          title: const Text("总账"),
          bottom: PreferredSize(
            preferredSize: const Size.fromHeight(55),
            child: Container(
              height: 55,
              color: CupertinoTheme.of(context).scaffoldBackgroundColor,
              child: Row(
                children: [
                  const Expanded(
                    child: Padding(
                      padding: EdgeInsets.fromLTRB(15, 0, 0, 0),
                      child: CupertinoSearchTextField(),
                    ),
                  ),
                  CupertinoButton(
                    child: const Text('Добавить'),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (_, index) => const Center(child: Text("-----")),
          ),
        ),
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者maverick