flutter:tabbar吸顶停靠效果

一，代码：

import 'package:flutter/material.dart';

class StickyTabPage extends StatefulWidget {
  @override
  _StickyTabPageState createState() => _StickyTabPageState();
}

class _StickyTabPageState extends State<StickyTabPage> with SingleTickerProviderStateMixin {
  late ScrollController _scrollViewController;
  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _scrollViewController = ScrollController(initialScrollOffset: 0.0);
    _tabController = TabController(vsync: this, length: 5);
  }

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

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(primaryColor: Colors.white),
      child: Scaffold(
          appBar: AppBar(
            elevation: 1.0,
            title: Text("首页"),
          ),
          body: NestedScrollView(
              controller: _scrollViewController,
              headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                return <Widget>[
                  SliverAppBar(
                    pinned: true,
                    floating: true,
                    expandedHeight: 280,
                    flexibleSpace: FlexibleSpaceBar(
                      collapseMode: CollapseMode.pin,
                      background: Container(//头部整个背景颜色
                        height: double.infinity,
                        color: Color(0xffcccccc),
                        child: Column(
                          children: <Widget>[
                            _buildBanner(),
                            _buildButtons(),
                            _buildTabBarBg()
                          ],
                        ),
                      ),
                    ),
                    bottom: TabBar(
                        isScrollable: true,
                        tabAlignment: TabAlignment.start,
                        controller: _tabController,

                        tabs: [
                      Tab(text: "aaaaaa"),
                      Tab(text: "bbbbbb"),
                      Tab(text: "cccccc"),
                      Tab(text: "测试可滑动文字比较长"),
                      Tab(text: "测试可滑动2文字比较长"),
                    ]),
                  )
                ];
              },
              body: TabBarView(controller: _tabController, children: [
                _buildListView("aaa:"),
                _buildListView("bbb:"),
                _buildListView("ccc:"),
                _buildListView("ddd:"),
                _buildListView("eee:"),
              ]))),
    );
  }

  Widget _buildBanner() {
    return Container(
      margin: EdgeInsets.only(left: 16.0, right: 16.0, top: 12.0),
      height: 144,
      child:  Container(
    width: double.infinity,
    height: 144,
    child: Image.network(
    "https://wx2.sinaimg.cn/mw690/687bf156ly1i0ac6f8bi5j20j60csagf.jpg",
    height: double.infinity,
    fit: BoxFit.fill,
    ),
      ),
    );
  }

  //banner下面的按钮
  Widget _buildButtons() {
    return Expanded(
      child: Row(
        children: <Widget>[
          _buildButtonItem(Icons.chat, "xxxx"),
          _buildButtonItem(Icons.pages, "xxxx"),
          _buildButtonItem(Icons.phone_android, "xxxx"),
          _buildButtonItem(Icons.print, "xxxx"),
        ],
      ),
    );
  }

  Widget _buildButtonItem(IconData icon, String text) {
    return Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(icon, size: 28.0),
            Container(
              margin: EdgeInsets.only(top: 8.0),
              child: Text(text, style: TextStyle(color: Color(0xff999999), fontSize: 12)),
            )
          ],
        ));
  }

  Widget _buildTabBarBg() {
    return Container(  //TabBar圆角背景颜色
      height: 50,
      child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(15), topRight: Radius.circular(15)),
          child: Container(color: Colors.white)),
    );
  }

  Widget _buildListView(String s){
    return ListView.separated(
        itemCount: 20,
        separatorBuilder: (BuildContext context, int index) =>Divider(color: Colors.grey,height: 1,),
        itemBuilder: (BuildContext context, int index) {
          return Container(color: Colors.white, child: ListTile(title: Text("$s第$index 个条目")));
        });
  }
}

tabbar有多个标签显示不完整时，可以用
isScrollable: true,            //使可滚动
tabAlignment: TabAlignment.start,      //居左对齐显示

二，测试效果: