# 可滾動Widget簡介 當內容超過顯示視口(ViewPort)時，如果沒有特殊處理，Flutter則會提示Overflow錯誤。為此，Flutter提供了多種可滾動widget（Scrollable Widget）用于顯示列表和長布局。在本章中，我們先介紹一下常用的可滾動widget（如ListView、GridView等），然后介紹一下Scrollable與可滾動widget的原理。可滾動Widget都直接或間接包含一個Scrollable widget，因此它們包括一些共同的屬性，為了避免重復介紹，我們在此統一介紹一下： ``` Scrollable({ ... this.axisDirection = AxisDirection.down, this.controller, this.physics, @required this.viewportBuilder, //后面介紹 }) ``` - axisDirection：滾動方向。 - physics：此屬性接受一個ScrollPhysics對象，它決定可滾動Widget如何響應用戶操作，比如用戶滑動完抬起手指后，繼續執行動畫；或者滑動到邊界時，如何顯示。默認情況下，Flutter會根據具體平臺分別使用不同的ScrollPhysics對象，應用不同的顯示效果，如當滑動到邊界時，繼續拖動的話，在iOS上會出現彈性效果，而在Android上會出現微光效果。如果你想在所有平臺下使用同一種效果，可以顯式指定，Flutter SDK中包含了兩個ScrollPhysics的子類可以直接使用： - ClampingScrollPhysics：Android下微光效果。 - BouncingScrollPhysics：iOS下彈性效果。 - controller：此屬性接受一個ScrollController對象。ScrollController的主要作用是控制滾動位置和監聽滾動事件。默認情況下，widget樹中會有一個默認的PrimaryScrollController，如果子樹中的可滾動widget沒有顯式的指定`controller`并且`primary`屬性值為`true`時（默認就為`true`），可滾動widget會使用這個默認的PrimaryScrollController，這種機制帶來的好處是父widget可以控制子樹中可滾動widget的滾動，例如，Scaffold使用這種機制在iOS中實現了"回到頂部"的手勢。我們將在本章后面“滾動控制”一節詳細介紹ScrollController。 ### Scrollbar Scrollbar是一個Material風格的滾動指示器（滾動條），如果要給可滾動widget添加滾動條，只需將Scrollbar作為可滾動widget的父widget即可，如： ``` Scrollbar( child: SingleChildScrollView( ... ), ); ``` Scrollbar和CupertinoScrollbar都是通過ScrollController來監聽滾動事件來確定滾動條位置，關于ScrollController詳細的內容我們將在后面專門一節介紹。 #### CupertinoScrollbar CupertinoScrollbar是iOS風格的滾動條，如果你使用的是Scrollbar，那么在iOS平臺它會自動切換為CupertinoScrollbar。 ### ViewPort視口 在很多布局系統中都有ViewPort的概念，在Flutter中，術語ViewPort（視口），如無特別說明，則是指一個Widget的實際顯示區域。例如，一個ListView的顯示區域高度是800像素，雖然其列表項總高度可能遠遠超過800像素，但是其ViewPort仍然是800像素。 ### 主軸和縱軸 在可滾動widget的坐標描述中，通常將滾動方向稱為主軸，非滾動方向稱為縱軸。由于可滾動widget的默認方向一般都是沿垂直方向，所以默認情況下主軸就是指垂直方向，水平方向同理。