Flutter Slivers that hide themselves underneath Persistent Headers without a background - Stack Overflow

admin管理员组

文章数量:1410705

I'm trying to build a UI that utilizes Flutter's Slivers to have a Sliver that sticks to the top and every Sliver after it continues scrolling while also hiding itself when it hits the bottom of the stickied PersistentHeader.

The easiest solution to this is to have a PersistentHeader that has a background. However, I have to use a custom background applied in a parent Widget to set the background to this page.

How do I make it so that the Slivers after the PersistentHeader hide themselves when they hit the bottom of the PersistentHeader?

The end of the PersistentHeader is marked by a Divider(). I have built a NestedScrollView that should be handling the overlap with a SliverOverlapAbsorber and SliverOverlapInjector. In practice, however, the overlap does nothing and the CustomScrollView underneath goes past the PersistentHeader and all the way to the screen's SafeEdge before disappearing.

Here is what I have so far:

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

  @override
  Widget build(BuildContext context) {
    return NestedScrollView(
      
        headerSliverBuilder: (context, innerBoxisScrolled) {
          return [
            SliverToBoxAdapter(
                child: Padding(
              padding: const EdgeInsets.all(16),
              child: HeroLocationSelect(locations: mockupLocations),
            )),
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverPersistentHeader(
                  pinned: true,
                  delegate: FixedHeaderDelegate(
                    child: const PreferredSize(
                      preferredSize: Size.fromHeight(110),
                      child: Column(
                        children: [HeroSearchBar(), ServiceScrollBar(), Divider()],
                      ),
                    ),
                    height: 110,
                  )),
            ),
          ];
        },
        body: Builder(
          builder: (context) {
            return CustomScrollView(
              slivers: [
                SliverOverlapInjector(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context)),
                SliverList(
                  delegate: SliverChildListDelegate([
                    const HomeHeroSlider(),
                    const HomeCarouselBuilder(type: MerchantType.brand),
                    const HomeCarouselBuilder(type: MerchantType.business)
                  ]),
                )
              ],
            );
          },
        ));
  }
}

No matter which way I try to implement the SliverOverlaps, nothing will make the CustomScrollView underneath the NestedScrollView's headerSliverBuilder respect the overlap.

While I'm not sure if this helps, here is the code to the SliverPersistentHeader delegate:

class FixedHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;
  final double height;

  FixedHeaderDelegate({required this.child, required this.height});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  double get maxExtent => height;

  @override
  double get minExtent => height;

  @override
  bool shouldRebuild(covariant FixedHeaderDelegate oldDelegate) {
    return oldDelegate.height != height || oldDelegate.child != child;
  }
}

本文标签： Flutter Slivers that hide themselves underneath Persistent Headers without a backgroundStack Overflow