Flutter自定义Sliver AppBar与TabBar滚动异常问题求助

核心是用NestedScrollView配合SliverAppBar来实现滚动联动，以下是可直接运行的示例代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const SliverTabBarDemo(),
    );
  }
}

class SliverTabBarDemo extends StatefulWidget {
  const SliverTabBarDemo({super.key});

  @override
  State<SliverTabBarDemo> createState() => _SliverTabBarDemoState();
}

class _SliverTabBarDemoState extends State<SliverTabBarDemo> with SingleTickerProviderStateMixin {
  late TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        // 头部Sliver区域：自定义头部 + 固定的TabBar
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            // 自定义头部：上滑时会被收起
            SliverToBoxAdapter(
              child: Container(
                height: 200,
                color: Colors.blue[100],
                alignment: Alignment.center,
                child: const Text('自定义头部区域', style: TextStyle(fontSize: 20)),
              ),
            ),
            // 固定在顶部的TabBar容器
            SliverAppBar(
              pinned: true, // 关键：设置为true让TabBar固定在顶部
              backgroundColor: Colors.white,
              elevation: 2,
              bottom: TabBar(
                controller: _tabController,
                tabs: const [
                  Tab(text: '标签1'),
                  Tab(text: '标签2'),
                ],
                labelColor: Colors.blue,
                unselectedLabelColor: Colors.grey,
              ),
            ),
          ];
        },
        // 内容区域：Tab对应的可滚动内容
        body: TabBarView(
          controller: _tabController,
          children: [
            // 第一个标签页的内容：用ListView确保可滚动
            ListView.builder(
              padding: EdgeInsets.zero,
              itemCount: 50,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('标签1 内容项 $index'),
                );
              },
            ),
            // 第二个标签页的内容：也可以用CustomScrollView
            CustomScrollView(
              slivers: [
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (context, index) => ListTile(
                      title: Text('标签2 内容项 $index'),
                    ),
                    childCount: 50,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

关键要点说明： #

• NestedScrollView：负责协调头部Sliver和body内容的滚动联动，解决滚动冲突问题。
• SliverAppBar(pinned: true)：这是让TabBar固定在顶部的核心设置，上滑时SliverAppBar会保持在顶部，不会被收起。
• TabBarView的子组件：必须使用可滚动组件（如ListView、CustomScrollView），如果直接用Column会导致内容无法滚动且被TabBar遮挡。

你之前遇到的内容无法滚动问题，大概率是没有用NestedScrollView来包裹，或者TabBarView的子组件没有用可滚动容器，导致布局约束出错。

内容的提问来源于stack exchange，提问作者amit.flutter