跳转至正文

滚动

Flutter 滚动支持概览

Flutter 有许多内置 widget 可自动滚动,还提供多种可自定义的 widget,用于实现特定的滚动行为。

基础滚动

#

许多 Flutter widget 开箱即用地支持滚动,并为你完成大部分工作。例如, SingleChildScrollView 会在必要时自动滚动其子 widget。其他实用 widget 包括 ListViewGridView。你可以在 Widget 目录的滚动页面查看更多此类 widget。

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

专用可滚动 widget

#

以下 widget 提供更具体的滚动行为。

关于使用 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"

高级滚动

#

也许你希望实现弹性滚动,也称为滚动回弹。或者你想实现其他动态滚动效果,例如视差滚动。又或者你需要具有特定行为的滚动页眉,例如收缩或消失。

你可以使用 Flutter 的 Sliver* 类实现以上所有效果及更多。 sliver 指可滚动区域中的一块。你可以定义 sliver 并将其插入 CustomScrollView,以对该区域进行更细粒度的控制。

更多信息请参阅 使用 sliver 实现出色的滚动效果Sliver 类

嵌套滚动 widget

#

如何将一个滚动 widget 嵌套在另一个滚动 widget 内,同时不影响滚动性能?是将 ShrinkWrap 属性设为 true,还是使用 sliver?

请观看「ShrinkWrap vs Slivers」视频:

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