Flutter滑动吸顶tab实现

在Flutter中，可以使用SliverAppBar和TabBar来实现滑动吸顶的Tab效果。以下是一个简单的示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Sliding Tabs Example'),
            bottom: TabBar(
              tabs: <Widget>[
                Tab(text: 'Tab 1'),
                Tab(text: 'Tab 2'),
                Tab(text: 'Tab 3'),
              ],
            ),
          ),
          body: NestedScrollView(
            headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverAppBar(
                  pinned: true,
                  expandedHeight: 200.0,
                  flexibleSpace: FlexibleSpaceBar(
                    title: Text('Sliding Tabs Example'),
                  ),
                  bottom: TabBar(
                    tabs: <Widget>[
                      Tab(text: 'Tab 1'),
                      Tab(text: 'Tab 2'),
                      Tab(text: 'Tab 3'),
                    ],
                  ),
                ),
              ];
            },
            body: TabBarView(
              children: <Widget>[
                Center(child: Text('Tab 1 Content')),
                Center(child: Text('Tab 2 Content')),
                Center(child: Text('Tab 3 Content')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了SliverAppBar来创建一个吸顶的AppBar，并且设置了pinned属性为true以实现滑动时app bar的固定效果。TabBar被放置在AppBar的bottom属性中，以实现在内容滚动时标签的固定。TabBarView则是根据不同的标签显示不同的内容。这样就实现了滑动时的吸顶Tab栏效果。