滚动
Name | Desc |
---|---|
ListView | 一个可滚动的列表 |
NestedScrollView | 一个可以嵌套其它可滚动widget的widget |
GridView | 一个可滚动的二维空间数组 |
SingleChildScrollView | 有一个子widget的可滚动的widget,子内容超过父容器时可以滚动。 |
Scrollable | 实现了可滚动widget的交互模型,但不包含UI显示相关的逻辑 |
Scrollbar | 一个Material Design 滚动条,表示当前滚动到了什么位置 |
CustomScrollView | 一个使用slivers创建自定义的滚动效果的ScrollView |
NotificationListener | 一个用来监听树上冒泡通知的widget。 |
ScrollConfiguration | 控制可滚动组件在子树中的表现行为 |
RefreshIndicator | Material Design下拉刷新指示器,包装一个可滚动widget |
Flutter 中有多种滚动 Widget,下面介绍几种常用的:
- SingleChildScrollView:单个子 Widget 滚动的视图,适用于只有少量子 Widget 的情况。
- ListView:可滚动的线性布局,子 Widget 可以垂直或水平排列。如果子 Widget 非常多,可以使用 ListView.builder 或 ListView.separated。
- GridView:可滚动的网格布局,子 Widget 以网格形式排列。
- CustomScrollView:可自定义滚动行为的 ScrollView,可以包含多个 Sliver。
- PageView:类似于 ViewPager,可以水平或垂直滚动多个子页面。
- RefreshIndicator:一个下拉刷新的 Widget,可以与 ListView 或 GridView 等滚动 Widget 配合使用。
- ScrollController:可以控制滚动视图的滚动位置,并监听滚动事件。
- NotificationListener:可以监听滚动事件,例如滚动开始、结束、滚动进度等事件。
- SingleChildScrollView + Column:当需要在单个页面中垂直排列大量子 Widget 时,可以使用 SingleChildScrollView + Column 的组合。
- SingleChildScrollView + Wrap:当需要在单个页面中水平排列大量子 Widget 时,可以使用 SingleChildScrollView + Wrap 的组合。
在使用滚动 Widget 时,需要注意以下几点:
- 对于大量子 Widget 的情况,应该尽量使用 ListView.builder 或 GridView.builder,以便只创建当前可见部分的子 Widget,从而减小内存占用。
- 在使用 ListView 或 GridView 时,应该注意设置 itemBuilder 或 gridDelegate,以便控制子 Widget 的大小和布局方式。
- 在使用 PageView 时,可以通过 PageController 控制当前显示的子页面,也可以设置 onPageChanged 回调函数以便处理页面切换事件。
- 在使用 CustomScrollView 时,可以通过 SliverAppBar 添加一个可滚动的 AppBar,并且可以添加多个 Sliver,以便创建复杂的滚动视图。