Flutter實(shí)戰(zhàn) 可滾動組件簡介

當(dāng)組件內(nèi)容超過當(dāng)前顯示視口(ViewPort)時，如果沒有特殊處理，F(xiàn)lutter 則會提示 Overflow 錯誤。為此，F(xiàn)lutter 提供了多種可滾動組件（Scrollable Widget）用于顯示列表和長布局。在本章中，我們先介紹一下常用的可滾動組件（如ListView、GridView等），然后介紹一下ScrollController?？蓾L動組件都直接或間接包含一個Scrollable組件，因此它們包括一些共同的屬性，為了避免重復(fù)介紹，我們在此統(tǒng)一介紹一下：

Scrollable({
  ...
  this.axisDirection = AxisDirection.down,
  this.controller,
  this.physics,
  @required this.viewportBuilder, //后面介紹
})

• axisDirection滾動方向。

• physics ：此屬性接受一個ScrollPhysics

類型的對象，它決定可滾動組件如何響應(yīng)用戶操作，比如用戶滑動完抬起手指后，繼續(xù)執(zhí)行動畫；或者滑動到邊界時，如何顯示。默認(rèn)情況下，F(xiàn)lutter 會根據(jù)具體平臺分別使用不同的ScrollPhysics對象，應(yīng)用不同的顯示效果，如當(dāng)滑動到邊界時，繼續(xù)拖動的話，在 iOS 上會出現(xiàn)彈性效果，而在 Android 上會出現(xiàn)微光效果。如果你想在所有平臺下使用同一種效果，可以顯式指定一個固定的ScrollPhysics，F(xiàn)lutter SDK中包含了兩個ScrollPhysics的子類，他們可以直接使用：

• ClampingScrollPhysics：Android 下微光效果。
• BouncingScrollPhysics：iOS 下彈性效果。

• controller：此屬性接受一個ScrollController對象。ScrollController的主要作用是控制滾動位置和監(jiān)聽滾動事件。默認(rèn)情況下，Widget 樹中會有一個默認(rèn)的PrimaryScrollController，如果子樹中的可滾動組件沒有顯式的指定controller，并且primary屬性值為true時（默認(rèn)就為true），可滾動組件會使用這個默認(rèn)的PrimaryScrollController。這種機(jī)制帶來的好處是父組件可以控制子樹中可滾動組件的滾動行為，例如，Scaffold正是使用這種機(jī)制在 iOS 中實(shí)現(xiàn)了點(diǎn)擊導(dǎo)航欄回到頂部的功能。我們將在本章后面“滾動控制”一節(jié)詳細(xì)介紹ScrollController。

#Scrollbar

Scrollbar是一個 Material 風(fēng)格的滾動指示器（滾動條），如果要給可滾動組件添加滾動條，只需將Scrollbar作為可滾動組件的任意一個父級組件即可，如：

Scrollbar(
  child: SingleChildScrollView(
    ...
  ),
);

Scrollbar和CupertinoScrollbar都是通過監(jiān)聽滾動通知來確定滾動條位置的。關(guān)于的滾動通知的詳細(xì)內(nèi)容我們將在本章最后一節(jié)中專門介紹。

#CupertinoScrollbar

CupertinoScrollbar是 iOS 風(fēng)格的滾動條，如果你使用的是Scrollbar，那么在 iOS 平臺它會自動切換為CupertinoScrollbar。

#ViewPort視口

在很多布局系統(tǒng)中都有 ViewPort 的概念，在 Flutter 中，術(shù)語 ViewPort（視口），如無特別說明，則是指一個 Widget 的實(shí)際顯示區(qū)域。例如，一個ListView的顯示區(qū)域高度是800像素，雖然其列表項(xiàng)總高度可能遠(yuǎn)遠(yuǎn)超過800像素，但是其 ViewPort 仍然是800像素。

#基于Sliver的延遲構(gòu)建

通常可滾動組件的子組件可能會非常多、占用的總高度也會非常大；如果要一次性將子組件全部構(gòu)建出將會非常昂貴！為此，F(xiàn)lutter 中提出一個 Sliver（中文為“薄片”的意思）概念，如果一個可滾動組件支持 Sliver 模型，那么該滾動可以將子組件分成好多個“薄片”（Sliver），只有當(dāng) Sliver 出現(xiàn)在視口中時才會去構(gòu)建它，這種模型也稱為“基于 Sliver 的延遲構(gòu)建模型”?？蓾L動組件中有很多都支持基于 Sliver 的延遲構(gòu)建模型，如ListView、GridView，但是也有不支持該模型的，如SingleChildScrollView。

#主軸和縱軸

在可滾動組件的坐標(biāo)描述中，通常將滾動方向稱為主軸，非滾動方向稱為縱軸。由于可滾動組件的默認(rèn)方向一般都是沿垂直方向，所以默認(rèn)情況下主軸就是指垂直方向，水平方向同理。