首页 > 其他分享 >一统天下 flutter - widget 滚动类: ScrollNotification - 滚动通知

一统天下 flutter - widget 滚动类: ScrollNotification - 滚动通知

时间:2023-04-14 09:01:21浏览次数:38  
标签:widget 滚动 notification 一统天下 ScrollNotification flutter

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

一统天下 flutter - widget 滚动类: ScrollNotification - 滚动通知

示例如下:

lib\widget\scroll\scroll_notification.dart

/*
 * ScrollNotification - 滚动通知
 */

import 'package:flutter/material.dart';

import '../../helper.dart';

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

  @override
  _ScrollNotificationDemoState createState() => _ScrollNotificationDemoState();
}

class _ScrollNotificationDemoState extends State<ScrollNotificationDemo> {

  final String _string = "012345678901234567890123456789012345678901234567890123456789";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("title")),
      backgroundColor: Colors.orange,
      /// 监听当滚动发生变化时的通知
      body: NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          if (notification is ScrollStartNotification) {          /// 滚动开始
            log('滚动开始');
          } else if (notification is ScrollUpdateNotification) {  /// 滚动中
            log('滚动中。。。');
          } else if (notification is ScrollEndNotification) {     /// 滚动结束
            log('滚动结束');
          }

          /// pixels - 当前滚动到的位置
          /// atEdge - 是否在滚动的边界
          /// outOfRange - 滚动是否越界
          /// axis - 垂直滚动还是水平滚动
          /// extentBefore - 垂直滚动时,可视区的顶部与全部内容的顶部的距离
          /// extentAfter - 垂直滚动时,可视区的底部与全部内容的底部的距离
          /// extentInside - 垂直滚动时,可视区的高度
          log('pixels:${notification.metrics.pixels}, '
              '${notification.metrics.extentBefore}, '
              '${notification.metrics.extentAfter}, '
              '${notification.metrics.extentInside}');

          /// return true 代表此通知已处理,也就是说通知不会冒泡
          return true;
        },
        child: Scrollbar(
          child: SingleChildScrollView(
            child: Center(
              child: Column(
                children:_string.split("").map((c) => MyText(c)).toList(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

一统天下 flutter https://github.com/webabcd/flutter_demo
作者 webabcd

标签:widget,滚动,notification,一统天下,ScrollNotification,flutter
From: https://www.cnblogs.com/webabcd/p/flutter_lib_widget_scroll_scroll_notification.html

相关文章

  • 一统天下 flutter - widget 滚动类: DraggableScrollableSheet - 可滚动组件,并且支持
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget滚动类:DraggableScrollableSheet-可滚动组件,并且支持通过拖拽的方式上下展开示例如下:lib\widget\scroll\draggable_scrollable_sheet.dart/**DraggableScrollable......
  • 一统天下 flutter - widget 状态管理: 状态管理 - 在树上,父监听子的通知
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget状态管理:状态管理-在树上,父监听子的通知示例如下:lib\state\notification_listener.dart/**状态管理-在树上,父监听子的通知**在树上,子通过Notification触......
  • 一统天下 flutter - widget 列表类: GridView - 网格
    一统天下flutterhttps://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget列表类:GridView-网格示例如下:lib\widget\list\grid_view.dart/**GridView-网格*/import'dart:math';import'package:flutter/material.dart';im......
  • el-dialog每次重新打开展示不同的内容,滚动条未重新置顶的解决方案。
    环境nuxt3+vu3+element-plus-2.3.3复现原因假设有5条内容,打开一项内容通过el-dialog进行展示,当出现滚动条后,往下滑动,紧接着通过esc或遮罩进行关闭,打开另一项内容,这时候滚动条并未进行置顶。解决方法参考就行了。js部分constdata=reactive({newsDialog:{s......
  • 微信小程序实现无限滚动列表
    微信小程序实现无限滚动列表问题背景客户端日常开发和学习过程中,无限滚动列表是一种很常见的场景,比如用户获奖名单等,本文将介绍如何在微信小程序中实现无限自动滚动列表。问题分析页面文件目录结构如下:问题解决话不多说,直接上代码(1)index.js文件,代码如下://pages/healdata/......
  • Qt之QTableWidget的使用
    #ifndefMAINWINDOW_H#defineMAINWINDOW_H#include<QtWidgets>#include<QDebug>#include<QJsonArray>#include<QJsonObject>#include<QJsonValue>#include<QJsonDocument>#defineTABLE_HEADER_STYLE"QHeaderVie......
  • QTableWidget获取列(行)索引方法
    //获取指定的列索引集合QList<int>QcViewBaseForm::getSelectedColumns(QTableWidget*tableWidget){QList<int>selectedColumns;QList<QTableWidgetSelectionRange>selectedRanges=tableWidget->selectedRanges();for(autorange:selec......
  • ES滚动分页聚合composite,对聚合结果使用脚本过滤
    需求1:对ip根据c段聚合,筛选聚合结果文档数大于3的2:持续聚合,类似分页方式查询语句如下,由于是内网开发的,这个脚本无法粘贴出来,截图做个笔    分页方式:每次聚合结果会有一个 after_key  下次传入即可 ......
  • MongoDB复制集环境滚动构建索引
    滚动构建索引每次最多取出一个复制集成员,从辅助成员开始,并在该成员上以standalone方构建索引。滚动索引构建至少需要一次副本集选举。 考虑点1.唯一性索引使用滚动方式构建唯一性索引,你必须停止集合上所有写操作。否则,只能在主节点上使用db.collection.createIndex()创建。2......
  • js:四个方向无跳动/无缝滚动,支持图片/html串,支持延时缓慢翻页,ff/ie测试 -- 2012-1-
    ----------代码----------<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title></title></head><body><divid="gg"><......