Flutter嵌套滚动问题：子列表与父滚动联动及内容截断修复

将页面内容嵌入Sliver列表后，滚动时页面内部列表与Sliver列表的滚动行为相互独立，无法同步滚动。尝试使用CustomScrollView、NestedScrollView，并设置NeverScrollPhysics，但会导致页面底部内容被截断。

主Sliver代码 #

return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar.medium(
            pinned: true,
            clipBehavior: Clip.none,
            backgroundColor: Theme.of(context).primaryColor,
            surfaceTintColor: Colors.transparent,
            title: FittedBox(
              fit: BoxFit.fitWidth,
              child: Text(
                widget.festival.name,
                style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.white),
                softWrap: true,
                maxLines: 2,
              ),
            ),
            iconTheme: const IconThemeData(color: Colors.white),
            actions: [
              IconButton(
                icon: const Icon(Icons.more_vert),
                onPressed: () {},
              ),
            ],
          ),
          SliverToBoxAdapter(
            child: Stack(
              children: [
                if (widget.festival.banner != null)
                  Image(
                    image: NetworkImage('${config!.imageBaseUrl}${widget.festival.banner!}'),
                    errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                      return const Center(child: Text('Image not found'));
                    },
                  ),
              ],
            ),
          ),
          SliverPinnedHeader(
            key: const ValueKey('navigation'),
            child: Container(
              width: double.infinity,
              height: 50,
              color: Theme.of(context).primaryColor,
              child: TabBar(
                tabs: _tabs,
                controller: _tabController,
                unselectedLabelColor: Colors.white,
                labelColor: Theme.of(context).colorScheme.primary,
              ),
            ),
          ),
          SliverFillRemaining(
            child: TabBarView(
              controller: _tabController,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: FestivalInfo(festival: widget.festival),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(widget.festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
                ),
              ],
            ),
          ),
        ],
      ),
    );

Tab页面内容代码 #

return ListView(
      children: [
        Text(festival.startDateFormatted, style: Theme.of(context).textTheme.bodyLarge),
        const SizedBox(height: 20),
        BannerCarousel(
          banners: BannerImages.listBanners,
          customizedIndicators: const IndicatorModel.animation(width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
          height: 200,
          activeColor: Colors.amberAccent,
          disableColor: Colors.white,
          animation: true,
          borderRadius: 10,
          width: screenWidth,
          indicatorBottom: true,
        ),
        const SizedBox(height: 20),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('About',
              style: Theme.of(context).textTheme.titleLarge!.copyWith(fontWeight: FontWeight.w500, color: Colors.white)),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(festival.description!, style: Theme.of(context).textTheme.bodyLarge),
        ),
        if (festival.longDescription != null)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
          ),
      ],
    );

核心问题是使用了SliverFillRemaining，它会强制占据剩余空间导致内部Tab内容被截断；同时Tab内嵌套的ListView会创建独立滚动轴，引发滚动不同步。

修改步骤： #

1. 替换主页面的CustomScrollView为NestedScrollView：
   NestedScrollView专为滚动头部+可滚动body的场景设计，能完美同步头部Sliver和body内容的滚动。将原有Sliver组件移到headerSlivers中，TabBarView作为body。

2. 改造Tab内的内容结构：
   移除Tab内的ListView，改用SingleChildScrollView包裹Column，并设置physics: NeverScrollableScrollPhysics()和primary: false，让滚动事件完全交给外层NestedScrollView处理，避免独立滚动。

修改后的代码： #

主页面代码

return Scaffold(
  body: NestedScrollView(
    headerSlivers: [
      SliverAppBar.medium(
        pinned: true,
        clipBehavior: Clip.none,
        backgroundColor: Theme.of(context).primaryColor,
        surfaceTintColor: Colors.transparent,
        title: FittedBox(
          fit: BoxFit.fitWidth,
          child: Text(
            widget.festival.name,
            style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.white),
            softWrap: true,
            maxLines: 2,
          ),
        ),
        iconTheme: const IconThemeData(color: Colors.white),
        actions: [
          IconButton(
            icon: const Icon(Icons.more_vert),
            onPressed: () {},
          ),
        ],
      ),
      SliverToBoxAdapter(
        child: Stack(
          children: [
            if (widget.festival.banner != null)
              Image(
                image: NetworkImage('${config!.imageBaseUrl}${widget.festival.banner!}'),
                errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                  return const Center(child: Text('Image not found'));
                },
              ),
          ],
        ),
      ),
      SliverPinnedHeader(
        key: const ValueKey('navigation'),
        child: Container(
          width: double.infinity,
          height: 50,
          color: Theme.of(context).primaryColor,
          child: TabBar(
            tabs: _tabs,
            controller: _tabController,
            unselectedLabelColor: Colors.white,
            labelColor: Theme.of(context).colorScheme.primary,
          ),
        ),
      ),
    ],
    body: TabBarView(
      controller: _tabController,
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: FestivalInfo(festival: widget.festival),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(widget.festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
        ),
      ],
    ),
  ),
);

Tab页面代码（FestivalInfo）

return SingleChildScrollView(
  physics: const NeverScrollableScrollPhysics(),
  primary: false,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(festival.startDateFormatted, style: Theme.of(context).textTheme.bodyLarge),
      const SizedBox(height: 20),
      BannerCarousel(
        banners: BannerImages.listBanners,
        customizedIndicators: const IndicatorModel.animation(width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
        height: 200,
        activeColor: Colors.amberAccent,
        disableColor: Colors.white,
        animation: true,
        borderRadius: 10,
        width: screenWidth,
        indicatorBottom: true,
      ),
      const SizedBox(height: 20),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text('About',
            style: Theme.of(context).textTheme.titleLarge!.copyWith(fontWeight: FontWeight.w500, color: Colors.white)),
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(festival.description!, style: Theme.of(context).textTheme.bodyLarge),
      ),
      if (festival.longDescription != null)
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
        ),
    ],
  ),
);

说明 #

• NestedScrollView的headerSlivers负责顶部固定/滚动的Sliver组件，body负责Tab切换内容，两者共享同一滚动控制器，实现同步滚动。
• 禁用Tab内SingleChildScrollView的滚动能力，确保所有滚动事件由外层NestedScrollView处理，既解决滚动冲突，又避免内容截断。

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