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

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

• axisDirection滾動(dòng)方向。

• physics ：此屬性接受一個(gè)ScrollPhysics

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

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

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

#Scrollbar

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

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

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

#CupertinoScrollbar

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

#ViewPort視口

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

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

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

#主軸和縱軸

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