Flutter构建含不可滚动区域的CustomScrollView及问题求助

我来帮你逐个搞定这三个问题，让你的页面完美匹配需求～

问题1：让顶部SliverGrid（图片区域）不可滚动 #

你现在的SliverGrid是作为CustomScrollView的一个Sliver组件，会跟着整体滚动。要让它固定在顶部不滚动，我们可以把它换成SliverToBoxAdapter包裹的固定容器（毕竟你只需要一张图片，用SliverGrid有点大材小用啦）；如果一定要保留SliverGrid，就把它放在SliverPersistentHeader里并设置pinned: true，这样它就会牢牢固定在顶部，不会随列表滚动滑走。

问题2：让AppBar启动时恰好位于屏幕底部 #

要实现初始状态下AppBar在屏幕底部，我们需要让顶部图片区域的高度 + AppBar（含TabBar）的高度刚好等于屏幕高度。可以通过MediaQuery获取屏幕高度，再减去AppBar的默认总高度（工具栏56px + TabBar48px）来设置图片的高度。另外，改用NestedScrollView会比纯CustomScrollView更适合这种场景，它能更好地处理头部区域和可滚动内容的联动。

问题3：滚动到顶部时列表跳过部分项 #

这个问题是因为CustomScrollView中Sliver组件的尺寸计算和滚动偏移没有对齐导致的。改用NestedScrollView可以从根源避免这个问题，它将头部区域和可滚动主体分离，确保列表的初始位置准确，不会被头部区域的尺寸干扰而出现跳过项的情况。

修改后的完整代码 #

import 'package:flutter/material.dart';

class CustomTabPage extends StatefulWidget {
  @override
  _CustomTabPageState createState() => _CustomTabPageState();
}

class _CustomTabPageState extends State<CustomTabPage> with SingleTickerProviderStateMixin {
  late TabController _tabController;
  final List<Tab> _bars = [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ];

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: _bars.length, vsync: this);
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 获取屏幕高度
    final screenHeight = MediaQuery.of(context).size.height;
    // AppBar默认总高度：工具栏高度 + TabBar高度
    final appBarTotalHeight = kToolbarHeight + kTabBarHeight;
    // 图片区域高度 = 屏幕高度 - AppBar总高度，确保初始时AppBar在屏幕底部
    final imageHeight = screenHeight - appBarTotalHeight;

    return Scaffold(
      body: NestedScrollView(
        // 头部区域：固定图片 + 固定TabBar的AppBar
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          // 顶部不可滚动的图片区域
          SliverToBoxAdapter(
            child: Container(
              height: imageHeight,
              color: Colors.red,
              child: Center(child: Text('IMG HERE', style: TextStyle(fontSize: 20, color: Colors.white))),
            ),
          ),
          // 带TabBar的AppBar，滚动后固定在顶部
          SliverAppBar(
            title: Text("title"),
            floating: false,
            pinned: true,
            primary: true,
            actions: [
              IconButton(
                icon: const Icon(Icons.arrow_upward),
                onPressed: () {},
              ),
            ],
            bottom: TabBar(
              controller: _tabController,
              isScrollable: true,
              tabs: _bars,
            ),
          ),
        ],
        // 主体内容：Tab对应的可滚动列表
        body: TabBarView(
          controller: _tabController,
          children: _bars.map((tab) {
            return CustomScrollView(
              slivers: [
                SliverFixedExtentList(
                  itemExtent: 100.0,
                  delegate: SliverChildBuilderDelegate(
                    (context, index) {
                      return Container(
                        alignment: Alignment.center,
                        color: Colors.lightGreen[100 * (index % 9)],
                        child: Text('${tab.text} list item $index'),
                      );
                    },
                  ),
                ),
              ],
            );
          }).toList(),
        ),
      ),
    );
  }
}

代码说明 #

1. 顶部不可滚动区域：用SliverToBoxAdapter包裹固定高度的容器，确保它完全固定在顶部，不会随列表滚动移动。
2. AppBar初始在屏幕底部：通过精准计算图片区域高度，让头部区域（图片+AppBar）刚好填满屏幕，初始状态下AppBar自然卡在屏幕底部。
3. 解决列表跳过问题：NestedScrollView将头部和滚动主体分离，列表的滚动逻辑独立于头部区域，彻底避免了滚动偏移导致的列表项跳过问题。同时用TabBarView配合TabController，让Tab切换列表的逻辑更清晰合理。

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