Flutter第十弹 ScrollView滚动组件

发布于:2024-04-19 ⋅ 阅读:(26) ⋅ 点赞:(0)

目标:

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薄片列表