iT邦幫忙

2021 iThome 鐵人賽

DAY 16
0
Mobile Development

Flutter / Dart 跨平台App開發體驗系列 第 16

Flutter體驗 Day 16-滾動組件-Sliver

滾動組件-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,
            ),
          ),
        ),
      ),
    );
  }

今日成果如下

widget_slivers

Image 使用xframe圖庫的照片

小結

練習成果

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


上一篇
Flutter體驗 Day 15-滾動組件
下一篇
Flutter體驗 Day 17-路由導覽v1
系列文
Flutter / Dart 跨平台App開發體驗30

尚未有邦友留言

立即登入留言