簡介

對(duì)于一個(gè)APP來說，肯定會(huì)有一個(gè)AppBar，這個(gè)AppBar一般包含了APP的導(dǎo)航信息等。雖然我們可以用一個(gè)固定的組件來做為AppBar，但是這樣就會(huì)丟失很多特效，比如將AppBar固定在頂部，AppBar可以在滑動(dòng)的過程中進(jìn)行大小變換等。

當(dāng)然這一切都不需要自己來實(shí)現(xiàn)，flutter已經(jīng)為我們提供了一個(gè)非常強(qiáng)大的AppBar組件，這個(gè)組件叫做SliverAppBar。

SliverAppBar詳解

我們先來看下SliverAppBar的定義：

class SliverAppBar extends StatefulWidget

可以看到SliverAppBar是一個(gè)StatefulWidget，它里面的狀態(tài)包含的是一些配置信息，包括FloatingHeaderSnapConfiguration,OverScrollHeaderStretchConfiguration和PersistentHeaderShowOnScreenConfiguration等。

SliverAppBar可以接收很多屬性，我們接下來會(huì)講解其中最重要和最常用的幾個(gè)屬性。

1.forceElevated

forceElevated是一個(gè)bool值，表示是否顯示AppBar的陰影效果,默認(rèn)值是false。

2.primary

primary使用來配置AppBar的屬性，表示AppBar是否顯示在界面的Top位置。如果設(shè)置為true，那么AppBar將會(huì)被放置在Top的位置，并且使用的高度是系統(tǒng)status bar的高度。

3.floating

floating是一個(gè)非常重要的屬性，因?yàn)閷?duì)于SliverAppBar來說，當(dāng)界面向遠(yuǎn)離SliverAppBar的方向滾動(dòng)的時(shí)候，SliverAppBar會(huì)隱藏或者縮寫為status bar的高度，floating的意思就是當(dāng)我們向SliverAppBar滑動(dòng)的時(shí)候，SliverAppBar是否浮動(dòng)展示。

4.pinned

表示SliverAppBar在滾動(dòng)的過程中是否會(huì)固定在界面的邊緣。

5.snap

snap是和floating一起使用的屬性，snap表示當(dāng)向SliverAppBar滾動(dòng)的時(shí)候，SliverAppBar是否立即展示完全。

6.automaticallyImplyLeading

automaticallyImplyLeading是用在AppBar中的屬性，表示是否需要實(shí)現(xiàn)leading widget。

其中最常用的就是floating，pinned和snap這幾個(gè)屬性。

另外還有一個(gè)flexibleSpace組件，他是SliverAppBar在float的時(shí)候展示的widget，通常和expandedHeight配合使用。

SliverAppBar的使用

上面講解了SliverAppBar的構(gòu)造函數(shù)和基礎(chǔ)屬性，接下來我們通過具體的例子來講解SliverAppBar如何使用。

通常來說SliverAppBar是和CustomScrollView一起使用的，也就是說SliverAppBar會(huì)被封裝在CustomScrollView中。

CustomScrollView中除了SliverAppBar之外，還可以添加其他的sliver組件。

首先我們定義一個(gè)SliverAppBar：

SliverAppBar(
          pinned: true,
          snap: true,
          floating: true,
          expandedHeight: 200.0,
          flexibleSpace: FlexibleSpaceBar(
            title: const Text('SliverAppBar'),
            background: Image.asset("images/head.jpg"),
          ),
        ),

這里我們?cè)O(shè)置pinned，snap和floating的值都為true，然后設(shè)置了expandedHeight和flexibleSpace。

這里的flexibleSpaces是一個(gè)FlexibleSpaceBar對(duì)象，這里我們?cè)O(shè)置了title和background屬性。

接著我們需要把SliverAppBar放到CustomScrollView中進(jìn)行展示。

 Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
         ...
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              return Container(
                color: index.isOdd ? Colors.white : Colors.green,
                height: 100.0,
                child: Center(
                  child: ListTile(
                    title: Text(
                      '1888888888' + index.toString(),
                      style: TextStyle(fontWeight: FontWeight.w500),
                    ),
                    leading: Icon(
                      Icons.contact_phone,
                      color: Colors.blue[500],
                    ),
                  ),
                ),
              );
            },
            childCount: 10,
          ),
        ),
      ],
    );

在SliverAppBar之外，我們還提供了一個(gè)SliverList，這里使用了SliverChildBuilderDelegate來構(gòu)造10個(gè)ListTile對(duì)象。

最后運(yùn)行可以得到下面的界面：

默認(rèn)情況下SliverAppBar是展開狀態(tài)，如果我們將下面的SliverList向上滑動(dòng)，flexibleSpace就會(huì)被隱藏，我們可以得到下面的界面：

當(dāng)我們向上慢慢滑動(dòng)的時(shí)候，因?yàn)樵O(shè)置的是floating=true, 并且snap=true，所以只要向上滑動(dòng)，就會(huì)展示所有的flexibleSpace:

當(dāng)我們將floating設(shè)置為false的時(shí)候，只有向上滑動(dòng)到頂端的時(shí)候，flexibleSpace才會(huì)全部展示出來。

總結(jié)

簡單點(diǎn)說，SliverAppBar就是一個(gè)在滑動(dòng)中可變大小的AppBar,我們可以通過設(shè)置不同的參數(shù)來實(shí)現(xiàn)不同的效果。

到此這篇關(guān)于詳解Android Flutter中SliverAppBar的使用教程的文章就介紹到這了,更多相關(guān)Android Flutter SliverAppBar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論