Flutter - ScrollController 滚动监听及控制

news2024/11/29 2:44:30

1 ScrollController
在这里插入图片描述
在这里插入图片描述
jumpTo(double offset)、animateTo(double offset,…):这两个方法用于跳转到指定的位置,它们不同之处在于,后者在跳转时会执行一个动画,而前者不会。

实例 点击按钮返回顶部 ,且按钮在list滑动一定距离后才会显示

在这里插入图片描述
在这里插入图片描述
重点1 在state 初始化是 监听_controller.addListener((){});
列表滑动大于1500 之后 显示返回顶部按钮
数据不够是 可点击按钮 "点击1"添加数据


void initState() {
  // TODO: implement initState
  super.initState();
  _controller.addListener(() {
    print(_controller.offset);
    if(_controller.offset<1500&&isShowTopBtn){
      setState(() {
        isShowTopBtn  = false;
      });
    }else if(_controller.offset>=1500&&!isShowTopBtn){
      setState(() {
        isShowTopBtn  = true;
      });
    }
  });
}
 	// 返回顶部的调用 _controller.animateTo
					Container(
              child: !isShowTopBtn?null:ElevatedButton(onPressed: (){
                _controller.animateTo(0, duration: Duration(milliseconds: 200), curve: Curves.ease);
              }, child: Text("返回顶部")),
            ),

全部代码


class MyListViewState0 extends StatefulWidget {
  const MyListViewState0({Key? key}) : super(key: key);

  
  State<MyListViewState0> createState() => _MyState0();
}

class _MyState0 extends State<MyListViewState0> {

  int itemss = 1 ;
  List<String> list2 = [
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5",
    "1","2","3","4","5"];
  final ScrollController _controller = ScrollController();
  bool isShowTopBtn = false ;


  
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller.addListener(() {
      print(_controller.offset);
      if(_controller.offset<1000&&isShowTopBtn){
        setState(() {
          isShowTopBtn  = false;
        });
      }else if(_controller.offset>=1000&&!isShowTopBtn){
        setState(() {
          isShowTopBtn  = true;
        });
      }
    });
  }


  
  Widget build(BuildContext context) {
    return ConstrainedBox(
        constraints: BoxConstraints.tightFor(width: double.infinity),
        child: Column(

          children: <Widget>[
            ElevatedButton(onPressed: (){
              setState(() {
                print(_controller.offset);
                itemss ++ ;
                list2.insert(0, "-----------$itemss");
              });
            }, child: Text("点击1")),
            Container(
              child: !isShowTopBtn?null:ElevatedButton(onPressed: (){
                _controller.animateTo(0, duration: Duration(milliseconds: 200), curve: Curves.ease);
              }, child: Text("返回顶部")),
            ),
            Expanded(child:  ListViewState2(list2,_controller))

          ],
        )
    );
  }
}

class ListViewState2 extends StatelessWidget{

  List<String> list = [] ;
  late ScrollController _controller ;
  late bool _isShowTopBtn ;

  ListViewState2(List<String> item, ScrollController controller,{Key? key}) : super(key: key){
    list = item ;
    _controller = controller;
  }

  
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scrollbar(child: ListView.builder(
        itemCount: list.length,
        itemExtent: 50,
        controller: _controller,
        itemBuilder: (BuildContext context ,int index){
          return Text(list[index]);
        }
    ));
  }
}

实例2 通过 NotificationListener 监听 可滚动组件的滑动情况

Flutter Widget树中子Widget可以通过发送通知(Notification)与父(包括祖先)Widget通信。父级组件可以通过NotificationListener组件来监听自己关注的通知,这种通信方式类似于Web开发中浏览器的事件冒泡,

可滚动组件在滚动时会发送ScrollNotification类型的通知,ScrollBar正是通过监听滚动通知来实现的。通过NotificationListener监听滚动事件和通过ScrollController有两个主要的不同:

通过NotificationListener可以在从可滚动组件到widget树根之间任意位置都能监听。而ScrollController只能和具体的可滚动组件关联后才可以。

收到滚动事件后获得的信息不同;NotificationListener在收到滚动事件时,通知中会携带当前滚动位置和ViewPort的一些信息,而ScrollController只能获取当前滚动位置。

在这里插入图片描述

NotificationListener<ScrollNotification>(
  onNotification: (ScrollNotification scrollNotification){
	}
 child:
)
// 通过   onNotification  监听
// 通过   child 配置子view
scrollNotification.metrics  // 可以获取到滑动的位置信息
scrollNotification.metrics.pixels // 当前位置
scrollNotification.metrics.maxScrollExtent // 总长度
...  // 其余的还需要再看看
class MyNotificationListenerWidget extends StatefulWidget {
  const MyNotificationListenerWidget({Key? key}) : super(key: key);

  
  State<MyNotificationListenerWidget> createState() => _MyNotificationListener();
}

class _MyNotificationListener extends State<MyNotificationListenerWidget> {
  String _progress = "0%"; //保存进度百分比

  
  Widget build(BuildContext context) {
    // TODO: implement build
    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification scrollNotification){

        double pro = scrollNotification.metrics.pixels/scrollNotification.metrics.maxScrollExtent;

        setState(() {
          _progress = "${(pro*100).toInt()}%";
        });

        return true ;
      },
        child: Stack(
          alignment: Alignment.center,
          children: <Widget>[
            ListViewState3(),
            Positioned(
              child:  CircleAvatar(
              child:Text(_progress,style: TextStyle(fontSize: 18),),
              radius: 30,
              backgroundColor: Colors.black54,
              foregroundColor: Colors.blue[200],
            ),)
          ],
        ),
    );
  }
}
class ListViewState3 extends StatelessWidget{

  
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      prototypeItem: ListTile(title: Text("1")),
      itemCount: 56,
      itemBuilder: (context, index) {
        //LayoutLogPrint是一个自定义组件,在布局时可以打印当前上下文中父组件给子组件的约束信息
        return ListTile(title: Text("$index"));
      },
    );
  }
}

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

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

相关文章

事务·数据库

事务就是一个完整的业务逻辑 举例&#xff1a; a账户转账至b账户&#xff0c;该操作是一个工作单元&#xff0c;要么同时成功要么同时失败&#xff0c;不可再分。 只有DML(INSERT DELETE UPDATE)语句才会有和事务有关系&#xff0c;因为这三个是操作数据库表中数据进行增删改的…

磨金石教育兴趣技能分享||运用好透视规律,就不会为大场面拍摄发愁了

许多摄影初学者&#xff0c;在拍摄简单的单独景物照或人物照时&#xff0c;经过简单的练习往往很快就能得心应手。 当画面稍微大一些&#xff0c;各种景物元素增多&#xff0c;空间立体感变强时&#xff0c;就会不知所措。拍出的照片不协调&#xff0c;而且杂乱。 这时候&…

2.专题. 逻辑层次结构——树

1. 树结构概述 现实生活中&#xff0c;具有很多层次关系&#xff1a;归纳为一种树状结构&#xff08;一种层级结构&#xff09; 2. 二叉树 2.2 二叉树分类 3.1.2.1 满二叉树 高度为4的满二叉树 3.1.2.2 完全二叉树 若一棵二叉树至多只有最下面两层的结点的度数可以小于2…

保护私密文件夹,可以这样设置隐藏起来

很多小伙伴在工作或生活中&#xff0c;都会有一些文件资料&#xff0c;不希望被让人随意看到&#xff0c;想要隐藏起来。其实只需要一个简单的操作&#xff0c;就可以把文件隐藏起来&#xff0c;不让人发现。 首先&#xff0c;我们可以先将需要隐藏的文件都放在一个文件夹里&a…

java常见的遍历

日常遍历的几种方式 首先我们先了解一下集合容器中日常遍历的几种方式&#xff1a; List集合遍历方式&#xff08;ArrayList&#xff09; // 遍历list集合private static void listTest() {List<String> list new ArrayList<String>();list.add("liubei&quo…

【Redis】新增数据结构

BitMap位图 Redis提供了Bitmaps这个“数据类型”可以实现对位的操作&#xff1a; &#xff08;1&#xff09; Bitmaps本身不是一种数据类型&#xff0c; 实际上它就是字符串&#xff08;key-value&#xff09; &#xff0c; 但是它可以对字符串的位进行操作。 &#xff08;2…

操作系统学习笔记_3 管程;死锁;内存

管程 信号量挺琐碎的&#xff0c;而且容易出错&#xff0c;顺序错了都会影响结果。 管程内的数据只有在管程内的过程&#xff08;函数&#xff09;才能访问&#xff1b;一次只允许一个进程进入管程。 monitor 是 java 语法的管程&#xff0c;每次只允许一个进程访问&#xff0…

[附源码]Python计算机毕业设计房屋租赁系统Django(程序+LW)

该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程 项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等…

关于求解器HFSS的那些事,以一个差分对仿真实操为例

很多刚刚接触HFSS的朋友可能对Solution type中的Driven Modal&#xff08;模式驱动&#xff09;和Driven Terminal&#xff08;终端驱动&#xff09;的概念有点混淆&#xff0c;本文着重讲解这两种求解类型的区别。 一、模式驱动和终端驱动的理解 模式驱动和终端驱动是HFSS的…

1.专题 存储结构和逻辑结构

1. 存储结构 软件完成对象抽象&#xff0c;需要分配一定的内存资源。 根据对象对内存使用的特征&#xff0c;可以把数据存储的特征划分为&#xff1a; 顺序存储链接存储索引存储 和 散列存储 1.1 顺序存储 对象占用的资源表现为一段连续的内存存储 图示如下&#xff1a; M…

产品分享:Qt鸿途电子智慧白板(适合会议机、电子黑板、电子笔记、电子阅读器等场景),当前版本v1.0.0

​若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/128313385 红胖子(红模仿)的博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、…

使用notepad++插件远程编辑linux下的配置文件

目录 1.安装插件管理器(Plugin Manager) 2.安装NppFTP 3.使用nppFTP连接远程linux服务器 1.安装插件管理器(Plugin Manager) 如果没有则需要安装 32bit 在v7.50后&#xff08;包括7.50&#xff09;不带有插件管理器(Plugin Manager)&#xff0c;所以我们需要手动安装 Plug…

高校房产管理系统主要功能模块有哪些?

数图互通房产管理 数图互通高校房产管理系统是基于公司自主研发的FMCenterV5.0平台&#xff0c;是针对中国高校房产的管理特点和管理要求&#xff0c;研发的一套标准产品&#xff1b;通过在中国100多所高校的成功实施和迭代&#xff0c;形成了一套成熟、完善、全生命周期的房屋…

Spire.XLS for Java 12.11.8 新年/圣诞巨献

Spire.XLS for Java是一个专业的 Java Excel API&#xff0c;使开发人员无需使用 Microsoft Office 或 Microsoft Excel即可创建、管理、操作、转换和打印 Excel工作表。 谷歌轻松找破解版 Spire.XLS for Java 支持旧的 Excel 97-2003 格式&#xff08;.xls&#xff09;和新的…

KingbaseES V8R3集群备份恢复案例之--- timingbackup备份

案例说明&#xff1a; KingbaseES V8R3集群自带了timingbackup.sh的脚本&#xff0c;可以通过一个脚本执行逻辑和物理备份&#xff0c;逻辑备份采用sys_dump&#xff0c;物理备份适用sys_basebackup&#xff0c;本案例详细记录了脚本的使用。 适用版本&#xff1a; KingbaseES …

利用催眠技巧绕开OpenAI的内容政策限制(仅供研究使用)

fork的仓库&#xff1a;https://github.com/JanYork/chatgpt-chinese-prompt-hack 声明&#xff1a;请仅作研究之用&#xff0c;不要违规使用&#xff01; 在hack成功后,通过屏蔽moderetions的api请求,可以绕过OpenAI对于输出内容的审查. 地址为:https://chat.openai.com/back…

国产免费倾斜摄影模型在线发布平台,一键查看、编辑、分享场景!

数十GB庞大的城市级三维实景模型&#xff0c;想在Web端加载并实时交互&#xff0c;看到每块地形、建筑物、每寸土地细节&#xff0c;不是一般平台能承受的。一般只能靠人工手动将模型压缩&#xff0c;不仅耗时耗力&#xff0c;效果还不可控。毕竟城市级的大体量模型不是每台设备…

物联网通信技术第9章 异构网络协同通信

9.1 异构网络模型 发展趋势 &#xff1a;用户对数据业务和移动业务的需求日渐增加&#xff0c;使用户需求呈现个性化、多样化等特点。 在异构多模式网络系统中&#xff0c;移动用户可以通过多模式多接口特性连接任一种网络。 异构网络&#xff1a; 指两个或以上的无线通信系统…

Meta AI 更新的 Data2vec 2.0 | 实现更快、更高效的视觉、语音和文本的自监督学习

文章目录一、前言二、data2vec 2.0 是如何工作的三、使用 data2vec 2.0 提高效率四、总结CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、前言 论文地址&#xff1a;Data2vec: A General Framework for Self-supervised Learning in Speech, Vision and Langua…

MySQL - 1

Step1 : 下载 &#xff08;https://downloads.mysql.com/archives/community/&#xff09; ZIP版本免安装&#xff0c;直接解压 版本&#xff1a;5.7.31 文件名&#xff1a;Windows (x86, 64-bit), ZIP Archive Step2&#xff1a;解压 路径建议&#xff1a;C:\Program Files\m…