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]）。