Flutter教學目錄持續更新中

Github源代碼持續更新中

1.SliverAppBar介紹

一個Material Design App Bar，跟AppBar差不多，但是支持滾動折疊的效果
這里我們將只介紹SliverAppBar比AppBar多處的屬性，基礎屬性將不再介紹，需要了解基礎屬性的可以看一下之前的文章：Flutter（11）：基礎組件之AppBar

2.SliverAppBar屬性

• leading：在標題前面顯示的一個控件
• title：標題文字
• actions：功能菜單
• flexibleSpace：FlexibleSpaceBar 這里就是用于實現滾動折疊的效果的地方
• bottom：PreferredSizeWidget 通常用來實現Tab導航欄
• elevation：陰影
• shadowColor：陰影顏色
• forceElevated = false：當elevation 不為 0 的時候，是否顯示陰影
• backgroundColor：背景色
• iconTheme：icon主題
• actionsIconTheme：功能菜單icon主題
• textTheme：文本主題
• centerTitle：標題是否居中顯示
• collapsedHeight：折疊高度，不設置的話會折疊到SliverAppBar高度
• expandedHeight：展開高度
• floating = false：true 的時候下滑先展示SliverAppBar，展示完成后才展示其他滑動組件內容
• pinned = false：SliverAppBar收縮到最小高度的時候SliverAppBar是否可見，true：SliverAppBar會以折疊高度固定顯示在頭部，false：縮小到折疊高度后滑出頁面
• snap = false：snap為true，floating也要為true才會有效果。true的時候會監聽你的手勢結束時的動作時是下滑，那么SliverAppBar展開，上滑則是收縮折疊至上一次折疊的位置處，但是這個效果需要一個基礎就是存在上一次折疊的位置，否則不生效
• stretch = false：true：SliverAppBar完全展開后是否可以繼續拉伸，注意這個需要外部滑動組件physics的支持（設置BouncingScrollPhysics()，滑動到標界可以繼續滑動擁有回彈效果），否則是不會生效的
• stretchTriggerOffset = 100.0：拉伸監聽觸發的偏移
• onStretchTrigger：拉伸監聽
• shape：SliverAppBar形狀
• toolbarHeight = kToolbarHeight：SliverAppBar高度 默認56
• leadingWidth：leading寬度

3.FlexibleSpaceBar屬性

• title：標題
• background：widget 背景
• centerTitle：標題是否居中
• titlePadding：標題內邊距
• collapseMode = CollapseMode.parallax：折疊模式
• stretchModes = const <StretchMode>[StretchMode.zoomBackground]：拉伸模式

4.CollapseMode屬性

• CollapseMode.none：背景不跟隨滾動
• CollapseMode.parallax：背景跟隨滾動但是具有滾動視差效果
• CollapseMode.pin：背景完全隨著滾動

5.StretchMode屬性

• zoomBackground：背景小部件將展開以填充額外的空間
• blurBackground：使用[ImageFilter.blur]效果，背景將模糊
• fadeTitle：隨著用戶過度滾動，FlexibleSpaceBar標題將消失

6.使用

  _myOnStretchTrigger() {
    ToastUtil.showToast('onStretchTrigger');
  }

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        SliverAppBar(
          title: Text('SliverAppBar'),
          expandedHeight: 250,
          collapsedHeight: 100,
          floating: false,
          pinned: true,
          snap: false,
          stretch: true,
          stretchTriggerOffset: 100,
          onStretchTrigger: () {
            return _myOnStretchTrigger();
          },
          flexibleSpace: FlexibleSpaceBar(
            title: Text('FlexibleSpaceBar title'),
            background: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(ImageUrlConstant.imageUrl1),
                ),
              ),
              child: Center(
                child: Text(
                  'FlexibleSpaceBar background content',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            centerTitle: false,
            titlePadding: EdgeInsets.all(0),
            collapseMode: CollapseMode.parallax,
            stretchModes: [
              StretchMode.zoomBackground,
              StretchMode.blurBackground,
              StretchMode.fadeTitle,
            ],
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (BuildContext context, int index) {
              return Container(
                height: 50,
                color: Colors.primaries[(index % 10)],
              );
            },
            childCount: 30,
          ),
        ),
      ],
    );
  }

image.png

下一節：Flutter（72）：Sliver組件之SliverList

Flutter（72）：Sliver組件之SliverList

Flutter教學目錄持續更新中

Github源代碼持續更新中