# 可滾動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的默認方向一般都是沿垂直方向,所以默認情況下主軸就是指垂直方向,水平方向同理。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示