1794647-dec358b37a46f5c7.gif

做過安卓的知道，安卓里CoordinatorLayout+ AppBarLayout控件再加app:layout_behavior="@string/appbar_scrolling_view_behavior"屬性可以做到這個(gè)效果。

在flutter中g(shù)oole也提供了同樣效果的控件NestedScrollView+Sliver系列的東西，
NestedScrollView沒多少可選參數(shù)，這邊主要SliverAppBar。

• SliverAppBar參數(shù)說明：

    this.leading,//前導(dǎo)標(biāo)題
    this.title,//標(biāo)題
    this.actions,//菜單
    this.flexibleSpace,//可以展開區(qū)域，通常是一個(gè)FlexibleSpaceBar
    this.bottom,//底部內(nèi)容區(qū)域
    this.elevation,//陰影
    this.forceElevated: false,
    this.backgroundColor,背景顏色
    this.brightness,//主題明亮
    this.iconTheme,圖標(biāo)主題
    this.textTheme,//文字主題
    this.primary: true,//是否預(yù)留高度
    this.centerTitle,標(biāo)題是否居中
    this.expandedHeight,//展開高度
    this.floating: false,//是否隨著滑動隱藏標(biāo)題
    this.pinned: false,//是否固定在頂部

• 下面直接上代碼

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  ScrollController _scrollViewController;
  TabController _tabController;

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

  @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(//頭部整個(gè)背景顏色
                        height: double.infinity,
                        color: Color(0xffcccccc),
                        child: Column(
                          children: <Widget>[
                            _buildBanner(),
                            _buildButtons(),
                            _buildTabBarBg()
                          ],
                        ),
                      ),
                    ),
                    bottom: TabBar(controller: _tabController, tabs: [
                      Tab(text: "aaa"),
                      Tab(text: "bbb"),
                      Tab(text: "ccc"),
                    ]),
                  )
                ];
              },
              body: TabBarView(controller: _tabController, children: [
                _buildListView("aaa:"),
                _buildListView("bbb:"),
                _buildListView("ccc:"),
              ]))),
    );
  }

  Widget _buildBanner() {
    return Container(
      margin: EdgeInsets.only(left: 16.0, right: 16.0, top: 12.0),
      height: 144,
      child: Swiper(//第三方的banner庫：flutter_swiper
          itemBuilder: (BuildContext context, int index) {
            return Container(
              width: double.infinity,
              height: 144,
              child: Image.network(
                "https://github.com/best-flutter/flutter_swiper/raw/master/banner.jpg",
                height: double.infinity,
                fit: BoxFit.fill,
              ),
            );
          },
          itemCount: 3,
          scale: 0.9,
          pagination: new SwiperPagination()),
    );
  }

  //banner下面的按鈕
  Widget _buildButtons() {
    return Expanded(
      child: Row(
        children: <Widget>[
          _buildButtonItem(Icons.chat, "xxxx"),
          Image.asset("assets/images/phone_flow_chart_arrow.png", height: 8),
          _buildButtonItem(Icons.pages, "xxxx"),
          Image.asset("assets/images/phone_flow_chart_arrow.png", height: 8),
          _buildButtonItem(Icons.phone_android, "xxxx"),
          Image.asset("assets/images/phone_flow_chart_arrow.png", height: 8),
          _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 個(gè)條目")));
        });
  }
}