滾動組件-Sliver

若想要自定義滾動效果的介面功能，就需要使用 CustomScrollView 以及 Silvers 的應用結合。我們先看看SmallStoneSK已實作的範例來看看能夠達到的滾動效果有哪些。

挑戰目標

學習 Widgets

• Sliver的概念

Sliver 是什麼？

先前說到滾動組件可以提供一個區塊顯示可滾動的內容，這個可滾動的內容如果數量很多的時候，我們只能夠看到這個可滾動的內容的部份內容。例如我們在 ListView 的範例裡，我們可以透過 builder 的建構方法建構了一個無限的列表內容，在滾動的過程裡才會動態的創建需要呈現的內容，這個概念就是Sliver的本質。

CustomScrollView 做為 Slivers 組件運行的容器，提供單一滾動的環境，因此在滾動的過程裡，只有即將呈現在畫面上的 Slivers 才會被處理。

注意 CustomScrollView 子元素只能夠是 Slivers 類別的組件。

我們來看一下範例吧，會使用到的 Slivers 如下：

• SliverToBoxAdapter
• SliverGrid
• SliverList
• SliverAppBar

SliverToBoxAdapter

CustomScrollView 子元素只能夠是 Silver 類別的，因此一般組件需要包裝在SliverToBoxAdapter容器內。

SliverGrid

Slivers 中的 GridView，使用delegate屬性定義動態的內容，gridDelegate屬性定義網格參數。

  Widget _buildGridView() {
    return SliverGrid(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 100.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            child: Text(index.toString()),
          );
        },
        childCount: 15,
      ),
    );
  }

SliverList

Slivers 中的 ListView，使用delegate屬性定義動態的內容，childCount屬性定義列的數量。

  Widget _buildListView() {
    return SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          // print(index);
          return Container(
            height: 50,
            color: Colors.primaries[(index % 18)],
            child: Center(
              child: Text(
                index.toString(),
              ),
            ),
          );
        },
        childCount: 15,
      ),
    );
  }

SliverAppBar

SliverAppBar可以建立一個浮動的 AppBar 的效果。

 Widget _buildAppBar() {
    return SliverAppBar(
      pinned: true,
      snap: true,
      floating: true,
      expandedHeight: 180.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('SliverAppBar'),
        stretchModes: const <StretchMode>[
          StretchMode.zoomBackground,
          StretchMode.blurBackground,
          StretchMode.fadeTitle,
        ],
        background: Container(
          width: double.infinity,
          height: 340,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/xFrame.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }

今日成果如下

Image 使用xframe圖庫的照片

小結

練習成果

Slivers 為滾動組件帶來更多的滾動效果可以自行定義，搭配圖片的使用可以讓整個操作的質感加分不少。