跳到主內容

滾動

Flutter 滾動支援概述

Flutter 具有許多內建小部件,可以自動滾動,並提供各種可自定義的小部件,以建立特定的滾動行為。

基本滾動

#

許多 Flutter 小部件開箱即用就支援滾動,併為您完成大部分工作。例如,SingleChildScrollView 會在必要時自動滾動其子項。其他有用的元件包括 ListViewGridView。您可以在 Widget 目錄的 滾動頁面 上檢視更多這些小部件。

在 YouTube 上觀看(在新標籤頁中開啟):"Scrollbar | Flutter widget of the week"

在 YouTube 上觀看(在新標籤頁中開啟):"ListView | Flutter widget of the week"

無限滾動

#

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

專用可滾動小部件

#

以下小部件提供更具體的滾動行為。

關於使用 DraggableScrollableSheet 的影片

在 YouTube 上觀看(在新標籤頁中開啟):"DraggableScrollableSheet | Flutter widget of the week"

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

在 YouTube 上觀看(在新標籤頁中開啟):"ListWheelScrollView | Flutter widget of the week"

炫酷滾動

#

也許您想實現彈性滾動,也稱為滾動反彈。或者您可能想實現其他動態滾動效果,例如視差滾動。或者您可能想要一個具有非常特定行為的滾動標題,例如縮小或消失。

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

有關更多資訊,請檢視 使用 slivers 實現炫酷滾動Sliver 類

巢狀滾動小部件

#

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

觀看 "ShrinkWrap vs Slivers" 影片

在 YouTube 上觀看(在新標籤頁中開啟):"ShrinkWrap vs Slivers | Decoding Flutter"