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();@overrideWidget 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薄片列表

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/826306.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【单元测试】Junit 4--junit4 内置Rule

1.0 Rules ​ Rules允许非常灵活地添加或重新定义一个测试类中每个测试方法的行为。测试人员可以重复使用或扩展下面提供的Rules之一,或编写自己的Rules。 1.1 TestName ​ TestName Rule使当前的测试名称在测试方法中可用。用于在测试执行过程中获取测试方法名称…

深入理解汇编:平栈、CALL和RET指令详解

​视频学习下载地址:​​https://pan.quark.cn/s/04e6946a803a​​ 汇编语言以其接近硬件的特性和高效的执行速度,在系统编程、性能优化和逆向工程中占有不可或缺的地位。本文将深入探讨汇编语言中的平栈操作以及​​CALL​​​和​​RET​​指令&#…

计算机网络实验实验之VLAN的配置与分析

实验目的 了解什么是带内管理;熟练掌握如何使用telnet方式管理交换机;熟练掌握如何为交换机设置web方式管理;熟练掌握如何进入交换机web管理方式;了解交换机web配置界面,并能进行部分操作。 (6)了解VLAN原理&#xf…

如何理解泛型擦除机制的兼容性

让我们通过一个具体的例子来更好地理解泛型擦除机制的第一个优点,即确保向后兼容性。这个例子将展示在引入泛型之前和之后的代码是如何在同一Java虚拟机上运行的。 场景设置 假设在Java 5引入泛型之前,我们有一个处理字符串列表的Java类库。这个库在Ja…

Linux 使用用户级别的 systemd 服务

目录 使用用户级别的 systemd 服务示例 .service 文件内容然后执行以下命令使服务生效: 使用用户级别的 systemd 服务 可以创建一个用户级别的 systemd 服务来实现开机启动。这种方式更加灵活和规范,适用于需要长期运行的服务或后台任务。 创建一个 .s…

不敢说懂你 - Glide硬核源码剖析

问题 Glide加载流程? Glide整体架构? Glide数据加载的来源? Glide缓存加载的流程? Glide线程切换原理? Glide如何感知Activity? Glide哪种情况会返回应用级的RequestManager? … 带着一些问题去阅读… 使用示例 本篇主要基于glide:4.12.0进行分析。下面是Gli…

● Queryable State实现原理与配置方法

Queryable State 是 Apache Flink 提供的一个特性,它允许外部系统查询 Flink 作业的状态。这是通过将 Flink 的状态暴露为一个可查询接口来实现的,使得外部应用可以直接访问和查询 Flink 中的状态数据,而不需要触发整个 Flink 作业的计算。 …

浏览器原理之浏览器机制

事件机制 一 事件是什么?事件模型? 事件 是浏览器或用户自身发出的某种特定交互的信号。这包括但不限于鼠标点击、按键操作、页面加载、滚动等。 事件模型 主要包括三个阶段: 捕获阶段:事件从文档根节点向下传递到目标节点&am…

PyQt6实战7--文本编辑器

一个简单的文本编辑器 features: 1.open 一个文件夹作为项目 2.save 保存当前窗口的内容 3.退出 4.双击文件可以打开文件内容 5.简单的python高亮 6.双击相同文件,会找到之前打开过的文件 打开一个文件夹 打开项目,双击打开文件 保存 代码&#xf…

雷电模拟器+python

import os import time from compare import compare #上一段代码我存为了compare.pyclass Ldconsole: #请根据自己软件的路径来console rF:\leidian\LDPlayer9\dnconsole.exe ld rF:\leidian\LDPlayer9\ld.exeadb rF:\leidian\LDPlayer9\adb.exe #这个类其实不用写的&…

CSRF漏洞

文章目录 目录 文章目录 一.什么是CSRF 二.CSRF漏洞工作原理 一.什么是CSRF CSRF(Cross-Site Request Forgery)漏洞,也被称为跨站请求伪造漏洞,是一种Web应用程序安全漏洞。当受害者在已经登录了某个网站的情况下,访问…

密码学 | 数字签名方法:Schnorr 签名

⚠️原文:Introduction to Schnorr Signatures ⚠️写在前面:适用于有一点密码学基础的亲故,否则建议跑路。 1 Schnorr 签名的定义 假设你有密钥对 ( x , X x ∗ G ) ( x, X x * G ) (x,Xx∗G),那么消息 m m m 的 Schnor…

吴恩达机器学习笔记 三十五 异常检测与监督学习

什么时候选择异常检测? 正样本 ( y 1 ) 的数量非常少 负样本 ( y 0 ) 的数量非常多 有很多不同的异常,现有的算法不能从正样本中得知什么是异常,或未来可能出现完全没见过的异常情况。 例如金融欺诈,隔几个月或几年就有新的…

java+idea+mysql采用医疗AI自然语言处理技术的3D智能导诊导系统源码

javaideamysql采用医疗AI自然语言处理技术的3D智能导诊导系统源码 随着人工智能技术的快速发展,语音识别与自然语言理解技术的成熟应用,基于人工智能的智能导诊导医逐渐出现在患者的生活视角中,智能导诊系统应用到医院就医场景中&#xff0c…

jvm-接口调用排查

问题描述 线上碰到个问题,某个接口调用时间特别长,线上调用接口直接报gateway time out 分析处理 1、先关闭该功能 (该功能是非核心功能) 2、本地起服务连环境排查,发现本地正常。并且线上其他接口正常,…

机器学习笔记——浅析L2,1范数正则化的线性回归

前言 嘻嘻,刚开始搓逾期了快两周的线性回归实验报告,为了让报告稍微不那么平淡不得不啃论文。 本文从最基本的线性回归开始,对比不同正则化方法的特点和作用,推广到多任务问题并引出L2,1范数正则化,卑微小采购尝试去…

顺序表复习(C语言版)

数据结构是什么? 数据结构就是为了把数据管理起来,方便我们的增删查改 数据结构是计算机存储、组织数据的方式 数组就是一种最基础的数据结构 顺序表是什么? 顺序表就是数组 Int arr[100] {1,2,3,4,5,x,……} 修改某个数据&#xff1a…

【leetcode面试经典150题】56. 基本计算器(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主,题解使用C语言。(若有使用其他语言的同学也可了解题解思路,本质上语法内容一致&…

Mac下删除旧版本.net sdk

参照微软官网给的方法,Releases dotnet/cli-lab (github.com) 好像不能直接的解决问题,我做一下补充,希望对需要删除旧版本sdk的小伙伴们有所帮助 1:下载工具包 Releases dotnet/cli-lab (github.com) 2:打开终端,cd切换到该文件的制定目录 3:然后按照提示一步步执行…

mybatis使用

mybatis使用 一、添加配置文件 在application.properties配置文件文件中添加数据库连接信息 spring.datasource.driver-class-namecom.mysql.cj.jdbc.Driver spring.datasource.urljdbc:mysql://localhost:3306/your_database_name?useUnicodetrue&characterEncodingUTF-…