簡介

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

當然這一切都不需要自己來實現，flutter已經為我們提供了一個非常強大的AppBar組件，這個組件叫做SliverAppBar。

SliverAppBar詳解

我們先來看下SliverAppBar的定義：

class SliverAppBar extends StatefulWidget

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

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

1.forceElevated

forceElevated是一個bool值，表示是否顯示AppBar的陰影效果,默認值是false。

2.primary

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

3.floating

floating是一個非常重要的屬性，因為對于SliverAppBar來說，當界面向遠離SliverAppBar的方向滾動的時候，SliverAppBar會隱藏或者縮寫為status bar的高度，floating的意思就是當我們向SliverAppBar滑動的時候，SliverAppBar是否浮動展示。

4.pinned

表示SliverAppBar在滾動的過程中是否會固定在界面的邊緣。

5.snap

snap是和floating一起使用的屬性，snap表示當向SliverAppBar滾動的時候，SliverAppBar是否立即展示完全。

6.automaticallyImplyLeading

automaticallyImplyLeading是用在AppBar中的屬性，表示是否需要實現leading widget。

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

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

SliverAppBar的使用

上面講解了SliverAppBar的構造函數和基礎屬性，接下來我們通過具體的例子來講解SliverAppBar如何使用。

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

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

首先我們定義一個SliverAppBar：

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

這里我們設置pinned，snap和floating的值都為true，然后設置了expandedHeight和flexibleSpace。

這里的flexibleSpaces是一個FlexibleSpaceBar對象，這里我們設置了title和background屬性。

接著我們需要把SliverAppBar放到CustomScrollView中進行展示。

 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之外，我們還提供了一個SliverList，這里使用了SliverChildBuilderDelegate來構造10個ListTile對象。

最后運行可以得到下面的界面：

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

當我們向上慢慢滑動的時候，因為設置的是floating=true, 并且snap=true，所以只要向上滑動，就會展示所有的flexibleSpace:

當我們將floating設置為false的時候，只有向上滑動到頂端的時候，flexibleSpace才會全部展示出來。

總結

簡單點說，SliverAppBar就是一個在滑動中可變大小的AppBar,我們可以通過設置不同的參數來實現不同的效果。

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

最新評論