Flutter第十弹 ScrollView滚动组件
目标：
1）滚动组件的特性？
2）有哪些常用的滚动组件？
一、基础滚动组件
Flutter有许多内置的小部件可以自动滚动，还提供了各种小部件，您可以自定义这些小部件来创建特定的滚动行为。
1.1 Scrollbar组件
滚动条的基本构成
滑块：显示滚动了多少？
轨道：滚动条滑动的轨道。可以直接拖拽滚动到轨道位置。
子组件：对应可以滚动的子组件。
child属性
可滚动属性的组件，例如ListView
Scrollbar(child: ListView.builder(
itemCount: 20,
itemBuilder: (c, i) -> MyItem(i),
)),controller属性
滚动控制器，为空的话默认使用PrimaryScrollController启动滚动条。
thumbVisibility属性
滑块是否可见，布尔值，默认不可见。
trackVisibility属性
轨道是否可见，布尔值，
如果轨迹可见性与滚动条的素材状态有关，
使用全局[ScrollbarThemeData.trackVisibility]或覆盖
子树的主题数据。
thickness属性
滚动条厚度。
radius属性
滚动条滑块圆角半径。
如果为null，则默认值取决于平台。在[TargetPlatform.android]上，
半径应用于滚动条拇指。在[TargetPlatform.iOS]上，
使用[CupertinoScrollbar.defaultRadius]。其余平台的默认[半径.圆形]为8.0像素。
notificationPredicate属性
[ScrollNotification]的谓词，用于自定义小部件
听取孩子的通知。？？？
scrollbarOrientation属性
滚动条的方向，水平滚动条，竖直滚动条。参见ScrollbarOrientation，
包括
- left: 左侧滚动条
- right: 右侧滚动条
- top：顶部滚动条
- bottom: 底部滚动条
1.2 SingleChildScrollView组件
通常SingleChildScrollView只应在期望的内容不会超过屏幕太多时使用，这是因为SingleChildScrollView不支持基于Sliver的延迟实例化模式，所以如果预计视口可能包含超出屏幕尺寸太多的内容时使用SingleChildScrollView将会导致性能差的问题，此时应该使用一些支持Sliver延迟加载的可滚动组件，如ListView。
当需要构建比较长的页面时，如果直接使用SingleChildScrollView，会将整个页面的内容一次性渲染到内存中，这可能会导致内存用过高，影响应用的性能和体验。
SingleChildScrollView继承StatelessWidget。
scrollDirection属性
滚动方向，默认Axis.vertical
- Axis.vertical：竖直方向
- Axis.horizontal水平方向
padding属性
内边距
reverse属性
是否反向滚动
primary属性
controller属性
primary为true时此项必须为空（null）.可用于控制此滚动的位置的对象视图滚动。
[ScrollController]有多种用途。
- 它可以用来控制初始滚动位置（请参见[ScrollController.initialScrollOffset]）
- 它可用于控制滚动视图是否应自动保存并恢复其在[PageStorage]中的滚动位置[ScrollController.kipScrollOffset]）
- 它可以用来读取当前滚动位置（请参阅[ScrollController.offset]），或更改它（请参阅[ScrollController.animateTo]）。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final controller = ScrollController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('SingleChildScrollView Demo - Controller'),
),
body: SingleChildScrollView(
controller: controller, // 设置控制器
child: Column(
children: List.generate(50, (index) => Text('Item $index')), // 生成一个长列表
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
controller.animateTo(100, duration: Duration(seconds: 1), curve: Curves.easeInOut); // 滚动到指定位置
},
child: Icon(Icons.arrow_upward),
),
),
);
}
}
interactive属性
滑块是否可以拖动。
physics属性
定义滚动的物理行为，比如滚动速度、弹性效果等。
定义ScrollView如何响应用户输入，ScrollPhysics类型。例如，确定用户停止拖动滚动视图后滚动视图如何继续设置动画。
BouncingScrollPhysics：弹性效果
ClampingScrollPhysics：
1.3 基于Sliver的延迟构建模式
Flutter中提出一个Sliver（中文为"薄片"的意思）概念，如果一个可滚动组件支持Sliver模型，那么该滚动组件可以将子组件分成好多个薄片（Sliver），只有当Sliver出现在视口时才会去构建它，这种模型也成为"基于Sliver的延迟构建模型"。相当于延迟加载模式。
这个类似于安卓的ListView的Adapter适配模式，只有可见的列表项才UI展现，滑动过程中通过不停的刷新子项内容实现滑动效果。
SingleChildScrollView不支持该模式。大部分的滑动组件都支持该模式，例如CustomScrollView。
1.4 CustomScrollView组件
CustomScrollView继承ScrollView。CustomScrollView可以将页面划分为多个Sliver，每个Sliver只在需要显示时才会被渲染到内存中。
这种方式可以大大减少内存的占用，并且可以更好地处理滚动事件。例如，在滚动时，CustomScrollView可以只渲染当前可见区域内的Sliver，而不是整个页面的内容。
CustomScrollView还提供了一些方便的特性，如SliverAppBar、SliverPersistentHeader等，可以方便地实现吸顶效果、折叠效果等，使页面的展示更加灵活和美观。
scrollDirection属性
滚动方向，默认Axis.vertical
- Axis.vertical：竖直方向
- Axis.horizontal水平方向
padding属性
内边距
reverse属性
是否反向滚动
primary属性
controller属性
primary为true时此项必须为空（null）.可用于控制此滚动的位置的对象视图滚动。
[ScrollController]有多种用途。
- 它可以用来控制初始滚动位置（请参见[ScrollController.initialScrollOffset]）
- 它可用于控制滚动视图是否应自动保存并恢复其在[PageStorage]中的滚动位置[ScrollController.kipScrollOffset]）
- 它可以用来读取当前滚动位置（请参阅[ScrollController.offset]），或更改它（请参阅[ScrollController.animateTo]）。
physics属性
定义滚动的物理行为，比如滚动速度、弹性效果等。
定义ScrollView如何响应用户输入，ScrollPhysics类型。例如，确定用户停止拖动滚动视图后滚动视图如何继续设置动画。
BouncingScrollPhysics：弹性效果
ClampingScrollPhysics：
slivers属性
slivers薄片列表
原文地址：https://blog.csdn.net/joedan0104/article/details/137809153
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！