Flutter控件--SliverAppBar

flutter控件練習demo地址：github

SliverAppBar

1.1 簡介

SliverAppBar 「應用欄」 至關於升級版的 appbar 於 AppBar 位置的固定的應用最上面的; 而 SliverAppBar 是能夠跟隨內容滾動的;

注意點：一般結合 CustomScrollView 、 NestedScrollView 來使用它, NestedScrollView裏面能夠嵌套Listview 完成滑動

1.2 基本用法

除了和appbar同樣的屬性以外還有：

• pinned = false, //是否固定在頂部,往上滑，導航欄能夠隱藏
• flexibleSpace 。能夠展開區域，一般是一個FlexibleSpaceBar
• elevation, Z軸高度，也就是陰影 默認是4 默認就是有高度 陰影的，這個也能夠修改的
• forceElevated false,//展開flexibleSpace以後是否顯示陰影
• expandedHeight: 200.0, 可滾動視圖的高度，伸縮區域大小

注意屬性（查文檔，都是下面的寫法，可是本身沒有測試出來）

• snap:false, //與floating結合使用
• floating = false,//是否隨着滑動隱藏標題 滑動到最上面，再滑動是否隱藏導航欄的文字和標題等的具體內容，爲true是隱藏，爲false是不隱藏

1.3 圖片

當 pinned = true 的時候

當 pinned = false 的時候

1.4 demo

import 'package:flutter/material.dart';

class SliverAppBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        body: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            //leading, // 若是省略了 leading ，但 AppBar 在帶有 Drawer 的 Scaffold 中，則會插入一個 button 以打開 Drawer。若是沒有Drawer ， 默認的是個返回箭頭
            //title, // 標題
            //actions, // 右邊的icon， 通常的是icon 或者是文字
            //bottom,         //底部內容區域  一般是個 tabbar
            //elevation, //陰影,紙墨設計中控件的 z 座標順序，默認值爲 4，對於可滾動的 SliverAppBar，當 SliverAppBar 和內容同級的時候，該值爲 0， 當內容滾動 SliverAppBar 變爲 Toolbar 的時候，修改 elevation 的值
            //brightness,   // 狀態欄 兩種  Brightness.light,   白底黑字 Brightness.dark:黑底白字
            //centerTitle,     //標題是否居中, 標題是否居中顯示，默認值根據不一樣的操做系統，顯示方式不同
            primary: true,// 預留狀態欄

            forceElevated: false, //展開flexibleSpace以後是否顯示陰影

            automaticallyImplyLeading: true,   // 若是有 leading 這個不會管用 ,至關於忽略這個參數 ； 若是沒有leading ，當有側邊欄的時候， false：不會顯示默認的圖片，true 會顯示 默認圖片，並響應打開側邊欄的事件

//            titleSpacing: NavigationToolbar.kMiddleSpacing,//flexibleSpace 和 title 的距離 默認是重合的

            expandedHeight: 200.0,//200.0, 可滾動視圖的高度  伸縮區域大小

            snap: true,//與floating結合使用
            floating: true, //是否隨着滑動隱藏標題,滑動到最上面，再snap滑動是否隱藏導航欄的文字和標題等的具體內容，爲true是隱藏，爲false是不隱藏
//            title: _title(),
            pinned: false,  //是否固定在頂部,往上滑，導航欄能夠隱藏
            leading:Icon(Icons.menu),
            flexibleSpace:
            FlexibleSpaceBar(
              //能夠展開區域，一般是一個FlexibleSpaceBar
              centerTitle: true,
              title: _title(),
              background: Image.asset(
                "images/header_bg.jpg",
                fit: BoxFit.fill,
              ),
            ),
          )
        ];
      },
      body: Center(
        child: ListView.builder(
          padding: const EdgeInsets.all(16.0),
          shrinkWrap: true,
          itemBuilder: (BuildContext context, int index) {
            if (index.isOdd) return new Divider();
            return ListItem(index/2);
          },
          itemCount: 40,
        ),
          ),
    ));
  }

  _title() {
    return Text("標題",
        style: TextStyle(
          color: Colors.white,
          fontSize: 16.0,
        ));
  }

  Widget ListItem(var index) {
    return new ListTile(
      title:  Center(child: Text(
        "條目$index",
        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w700),
      ),),
    );
  }
}

複製代碼