Flutter 內建許多會自動滾動的元件(Widgets),同時也提供多種可自訂的元件,讓你打造特定的滾動行為。

基本滾動

#

許多 Flutter 元件(Widgets)原生支援滾動,並且會自動處理大部分細節。例如,SingleChildScrollView 會在需要時自動讓其子元件滾動。其他實用的元件還有 ListViewGridView。你可以在 Widget 目錄的 scrolling page 查看更多相關元件。

Watch on YouTube in a new tab: "Scrollbar | Flutter widget of the week"

Watch on YouTube in a new tab: "ListView | Flutter widget of the week"

無限滾動

#

當你的 ListViewGridView 中有很長的項目清單(包含 無限 清單)時,可以在項目進入可視範圍時動態建立,這樣能大幅提升滾動效能。想了解更多,請參考 ListView.builderGridView.builder

專用滾動元件

#

以下元件提供更特定的滾動行為。

關於 DraggableScrollableSheet 的使用教學影片:

Watch on YouTube in a new tab: "DraggableScrollableSheet | Flutter widget of the week"

想要將滾動區域變成輪盤式,可以使用 ListWheelScrollView

Watch on YouTube in a new tab: "ListWheelScrollView | Flutter widget of the week"

進階滾動效果

#

你可能想實作 彈性 滾動(elastic scrolling,又稱 scroll bouncing),或是其他動態滾動效果,例如視差滾動(parallax scrolling)。又或者你需要具有特定行為的滾動標頭,例如縮小或消失。

這些效果都可以透過 Flutter 的 Sliver* 類別來實現。sliver 指的是可滾動區域中的一部分。你可以將 sliver 定義並插入 CustomScrollView,以更細緻地控制該區域。

想了解更多,請參考 使用 slivers 實現進階滾動效果 以及 Sliver 類別

巢狀滾動元件

#

如果你想在一個滾動元件(Widget)內再嵌入另一個滾動元件,該如何避免影響滾動效能?你應該將 ShrinkWrap 屬性設為 true,還是該使用 sliver?

請參考 "ShrinkWrap vs Slivers" 影片:

Watch on YouTube in a new tab: "ShrinkWrap vs Slivers | Decoding Flutter"

```