【Flutter學習】可滾動組件之ScrollView

一，概述　　

　　ScrollView 是一個帶有滾動的視圖組件。

二，組成部分

ScrollView 由三部分組成：

• Scrollable - 它監聽各種用戶手勢並實現滾動的交互設計。可滾動Widget都直接或間接包含一個Scrollable widget，因此它們包括一些共同的屬性，我們在此統一介紹一下：
  

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

  參數含義：

  • axisDirection：滾動方向。

    • 主軸和縱軸

      在可滾動widget的坐標描述中，通常將滾動方向稱為主軸，非滾動方向稱為縱軸。由於可滾動widget的默認方向一般都是沿垂直方向，所以默認情況下主軸就是指垂直方向，水平方向同理。

  • 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。
• Viewport - 它通過在滾動視圖內僅顯示一部分小部件來實現滾動的可視化設計。
  在很多布局系統中都有ViewPort的概念，在Flutter中，術語ViewPort（視口），如無特別說明，則是指一個Widget的實際顯示區域。例如，一個ListView的顯示區域高度是800像素，雖然其列表項總高度可能遠遠超過800像素，但是其ViewPort仍然是800像素。
• Slider - 它們是可以組合以創建各種滾動效果的小部件，如列表，網格和擴展標題。

三，ScrollView 有以下常用屬性：

• cacheExtent → double - 視口在可見區域之前和之后有一個區域，用於緩存用戶滾動時即將可見的項目。
• controller → ScrollController - 一個可用於控制滾動視圖滾動到的位置的對象。
• physics → ScrollPhysics - 滾動視圖應如何響應用戶輸入。
• primary → bool - 是否是與父級關聯的主滾動視圖。
• reverse → bool - 滾動視圖是否在閱讀方向上滾動。
• scrollDirection → Axis - 滾動視圖滾動的軸。
• shrinkWrap → bool - 應該根據正在查看的內容確定滾動視圖的范圍。

注：ScrollView 是一個抽象類，通常使用 CustomScrollView。

四，示例

new CustomScrollView(
    shrinkWrap: true,
    // 內容
    slivers: <Widget>[
      new SliverPadding(
             padding: const EdgeInsets.all(20.0),
              sliver: new SliverList(
                 delegate: new SliverChildListDelegate(
                   <Widget>[
                        const Text('A'),
                        const Text('B'),
                        const Text('C'),
                        const Text('D'),
                   ],
                 ),
              ),
     ],
)

五，可滾動的Widget

• ListView

  一個可滾動的列表 

• NestedScrollView

  一個可以嵌套其它可滾動widget的widget

• GridView

  一個可滾動的二維空間數組

• SingleChildScrollView

  有一個子widget的可滾動的widget，子內容超過父容器時可以滾動。

• Scrollable

  實現了可滾動widget的交互模型，但不包含UI顯示相關的邏輯

• Scrollbar

  一個Material Design 滾動條，表示當前滾動到了什么位置

• CustomScrollView

  一個使用slivers創建自定義的滾動效果的ScrollView

• NotificationListener

  一個用來監聽樹上冒泡通知的widget。

• ScrollConfiguration

  控制可滾動組件在子樹中的表現行為

• RefreshIndicator

  Material Design下拉刷新指示器，包裝一個可滾動widget