跳到主內容

滾動

Flutter 滾動支援概覽

Flutter 有許多內建的自動滾動元件,也提供各種可供自定義的元件,以實現特定的滾動行為。

基礎滾動

#

許多 Flutter 元件開箱即用,支援滾動,併為你完成了大部分工作。例如,SingleChildScrollView 會在必要時自動滾動其子元件。其他有用的元件還包括 ListViewGridView。你可以在元件目錄的滾動頁面檢視更多此類元件。

在 YouTube 新標籤頁中觀看:“Scrollbar | Flutter 每週元件”

在 YouTube 新標籤頁中觀看:“ListView | Flutter 每週元件”

無限滾動

#

當你的 ListViewGridView 中有很長的列表(包括無限列表)時,你可以按需構建滾動到檢視中的項。這能提供效能更高的滾動體驗。有關更多資訊,請檢視 ListView.builderGridView.builder

專用滾動元件

#

以下元件提供了更具體的滾動行為。

關於使用 DraggableScrollableSheet 的影片

在 YouTube 新標籤頁中觀看:“DraggableScrollableSheet | Flutter 每週元件”

使用 ListWheelScrollView 將可滾動區域變成一個滾輪!

在 YouTube 新標籤頁中觀看:“ListWheelScrollView | Flutter 每週元件”

高階滾動效果

#

也許你想實現彈性滾動(也稱為滾動回彈),或者想實現其他動態滾動效果,例如視差滾動。又或者,你想要一個具有特定行為的滾動標題,例如收縮或消失效果。

你可以使用 Flutter 的 Sliver* 類來實現所有這些及更多效果。Sliver 指的是可滾動區域的一部分。你可以定義並插入一個 Sliver 到 CustomScrollView 中,從而對該區域進行更細粒度的控制。

有關更多資訊,請檢視使用 slivers 實現高階滾動以及 Sliver 類

巢狀滾動元件

#

如何在不影響滾動效能的情況下將一個滾動元件巢狀在另一個滾動元件中?你應該將 ShrinkWrap 屬性設定為 true,還是使用 sliver?

觀看“ShrinkWrap 與 Slivers”影片

在 YouTube 新標籤頁中觀看:“ShrinkWrap vs Slivers | 解碼 Flutter”