Flutter中如何在ListView滑动时保持TabBar的固定位置？

这个问题的关键在于布局结构和滚动视口的管理，用 SliverAppBar 和 CustomScrollView 就能很好地解决。

你可以把 TabBar 放到 SliverAppBar 的 bottom 属性里，然后把 ListView 替换成 SliverList 或者 SliverChildBuilderDelegate，这样就能让 TabBar 固定在顶部，同时内容区域可以正常滚动。

下面是一个完整的代码示例：

import 'package:flutter/material.dart';



class FixedTabBarPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return DefaultTabController(

      length: 3,

      child: Scaffold(

        body: CustomScrollView(

          slivers: [

            SliverAppBar(

              pinned: true,

              expandedHeight: 200.0,

              flexibleSpace: FlexibleSpaceBar(

                title: Text('商品分类'),

              ),

              bottom: TabBar(

                tabs: [

                  Tab(text: '分类1'),

                  Tab(text: '分类2'),

                  Tab(text: '分类3'),

                ],

              ),

            ),

            SliverFillRemaining(

              child: TabBarView(

                children: [

                  ListView.builder(

                    itemCount: 50,

                    itemBuilder: (context, index) => ListTile(title: Text('商品$index')),

                  ),

                  ListView.builder(

                    itemCount: 50,

                    itemBuilder: (context, index) => ListTile(title: Text('商品$index')),

                  ),

                  ListView.builder(

                    itemCount: 50,

                    itemBuilder: (context, index) => ListTile(title: Text('商品$index')),

                  ),

                ],

              ),

            ),

          ],

        ),

      ),

    );

  }

}

这里有几个关键点：
1. SliverAppBar 的 pinned 属性设置为 true，确保 TabBar 在滚动时固定在顶部。
2. TabBar 被放在 SliverAppBar 的 bottom 属性中，而不是单独放一个 Stack，避免了滚动冲突。
3. 使用 CustomScrollView 来组合 SliverAppBar 和 SliverFillRemaining，保证滚动行为统一管理。

如果你需要更复杂的效果，比如动态调整 TabBar 的高度或者透明度，也可以通过 SliverPersistentHeader 实现。不过对于大部分场景来说，上面这种写法已经足够用了。

说实话，Flutter 的嵌套有时候确实让人头大，但只要理解了 Sliver 系列组件的工作原理，这些问题都能迎刃而解。

用NestedScrollView就对了，把TabBar放在headerSliverBuilder里，ListView放body里。代码直接这样写：

NestedScrollView(

  headerSliverBuilder: (context, innerBoxIsScrolled) {

    return [

      SliverAppBar(

        pinned: true,

        expandedHeight: 56.0,

        flexibleSpace: TabBar(

          tabs: [Tab(text: '分类1'), Tab(text: '分类2')],

        ),

      )

    ];

  },

  body: TabBarView(

    children: [

      ListView.builder(itemBuilder: (context, index) => ListTile(title: Text('商品$index'))),

      ListView.builder(itemBuilder: (context, index) => ListTile(title: Text('商品$index')))

    ],

  ),

)

pinned设置true就能让TabBar固定在顶部，滑动时不会跑。记得SliverAppBar和TabBarView要配合着用，不然容易出问题。我之前也踩过这个坑，这样写最稳。