技術標籤：FlutterflutterscrollviewSliverAppBar

Flutter 小知識:CustomScrollView和SliverAppBar 元件

• CustomScrollView()
• SliverAppBar()

沒有最好，只有更好。那一瞬間，你終於發現，那曾深愛過的人，早在告別的那天，已消失在這個世界。心中的愛和思念，都只是屬於自己曾經擁有過的紀念。我想，有些事情是可以遺忘的，有些事情是可以記念的，有些事情能夠心甘情願，有些事情一直無能為力。我愛你，這是我的劫難。

今日效果圖:

效果圖(1.1):
　　

CustomScrollView()

加粗是必加引數

咋們先來看看physics效果:

BouncingScrollPhysics()	NeverScrollableScrollPhysics()	ClampingScrollPhysics()
拉到最底部有回彈效果	滑動禁止	包裹內容不會回彈(預設)
效果圖(1.2):	效果圖(1.3):	效果圖(1.4):

CustomScrollView()完整程式碼:

CustomScrollView(
	//      滑動型別
	//      BouncingScrollPhysics() 拉到最底部有回彈效果
	//    ClampingScrollPhysics() 包裹內容不會回彈
 

	//    NeverScrollableScrollPhysics() 滑動禁止
        physics: BouncingScrollPhysics(),
        //true反向滑動AppBar
        shrinkWrap: false,

        // 當條目不足時 true可以嘗試滾動 false不可以滾動
        primary: true,
          //快取條目
        cacheExtent: 0,
        //滾動方向
        scrollDirection: Axis.vertical,
        slivers: <Widget>[
      	  ///AppBar
          initSliverAppBar(),
          
          ///SliverFixedExtentList 下一章介紹
          initSliverFixedExtentList(),
          
          ///SliverList 下一章介紹
          initSliverList(),
          
          ///SliverGrid 下一章介紹
          initSliverGrid(),
        ],
      ),

注意:

• CustomScrollView中不能直接使用ListView或GridView,因為CustomScrollView本身是一個可滑動元件,ListView或GridView也是可滑動元件,可滑動元件裡面巢狀可滑動元件會衝突.

這裡程式碼也比較簡單,直接看看效果圖吧:

效果圖(1.5):

這些引數不懂的記得評論區留言哦~

SliverAppBar()

(只列舉常用屬性)

SliverAppBar()程式碼:

 Widget initSliverAppBar() {
    return  SliverAppBar(
      title: Text(
        "flutter",
        style: TextStyle(color: Colors.black),
      ),
      //左側按鈕
      leading: CloseButton(),
      //滑動高度
      expandedHeight: 230.0,
      //當snap = true時 這個引數必須為true!!!
      floating: true,

      //AppBar固定
      pinned: true,

      //AppBar跟隨手指滑動而滑動  floating必須為true才可以使用
      snap: true,

      //滑動背景
      flexibleSpace: new FlexibleSpaceBar(
        background: Image.asset(
          "assets/images/flutter.jpg",
          fit: BoxFit.fill,
        ),
        title: new Text(
          "android",
          style: TextStyle(color: Colors.black),
        ),
        //標題居中
        centerTitle: true,
        //滑動模式  CollapseMode.parallax,
        //          CollapseMode.none,
        collapseMode: CollapseMode.pin,
      ),

      //背景顏色
      backgroundColor: Colors.blue,

      //狀態列主題 Brightness.light灰色 Brightness.dark白色(預設)
      brightness: Brightness.dark,

      //AppBar是否在狀態列下面
      primary: true,

      //標題(title)是否居中
      centerTitle: false,
      // bottom: PreferredSizeWidget(),
      //右側Widget操作
      actions: initAppBarRightIcon(),
    );
  }

滑動背景引數:

collapseMode事例:

CollapseMode.parallax	CollapseMode.none	CollapseMode.pin
背景小部件將以視差方式滾動	沒有摺疊效果	後臺小部件固定到位,直到達到最小範圍
效果圖(1.5):	效果圖(1.6):	效果圖(1.7):

floating,pinned和snap引數事例:

floating: true pinned: true snap: true	floating: true pinned: false snap: true
只要有向下的手勢,AppBar就彈出	AppBar滾動出他原來的位置

SliverAppBar最終效果:

效果圖(1.8):

完整專案

完整程式碼

下一章:Flutter 小知識SliverList(),SliverFixedExtentList(),SliverGrid()元件

原創不易,您的點贊就是對我最大的支援,點個贊支援一下吧~