Loading [MathJax]/jax/output/CommonHTML/config.js
社区首页 >问答首页 >如何同步滚动两个SingleChildScrollView小部件

如何同步滚动两个SingleChildScrollView小部件
EN

Stack Overflow用户
提问于 2018-02-28 12:49:02
回答 2查看 2.6K关注 0票数 3

如何同步滚动两个SingleChildScrollView小部件?

代码语言:javascript
代码运行次数:0
复制
    new Positioned(
        child: new SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: new Scale() 
            ), 
        ),
    new Positioned(
        child: new SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: new chart()
        )
    )

我需要这两个小部件有完全相同的滚动位置(两者都有相同的宽度,只能水平滚动)。它必须在用户操作之后和在代码中更改时同步。

EN

回答 2

Stack Overflow用户

发布于 2019-11-28 13:42:53

就像xster说的,你必须在一个滚动视图上使用scrollcontroller,在另一个滚动视图上使用通知侦听器,代码如下。

代码语言:javascript
代码运行次数:0
复制
class StackO extends StatefulWidget {
  // const stack({Key key}) : super(key: key);

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

class _StackOState extends State<StackO> {
  ScrollController _scrollController = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: <Widget>[
          new Positioned(
            child: new SingleChildScrollView(
              controller: _scrollController,
              scrollDirection: Axis.horizontal,
              child: new Scale() // your widgets,
            ),
          ),
          new Positioned(
            child: new NotificationListener<ScrollNotification>(
              onNotification: (ScrollNotification scrollInfo) {
                print('scrolling.... ${scrollInfo.metrics.pixels}');
                _scrollController.jumpTo(scrollInfo.metrics.pixels);
                return false;
              },
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: new chart() // your widgets,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
票数 4
EN

Stack Overflow用户

发布于 2018-03-02 21:23:01

对于输入,可以通过作为构造函数参数传入的ScrollController来控制它们。

对于输出,您可以使用NotificationListener监听其中一个的移动,然后使用ScrollController将它们同步在一起。

您可以监听像https://docs.flutter.io/flutter/widgets/UserScrollNotification-class.html这样的命令来将它们紧密绑定在一起,也可以等待https://docs.flutter.io/flutter/widgets/ScrollEndNotification-class.html,然后在ScrollController上调用https://docs.flutter.io/flutter/widgets/ScrollController/animateTo.html

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49029993

复制
相关文章
原生HTML实现文字横向滚动以及触摸暂停
html <div id="scroll_div" class="fl" style="margin-top:2rem;line-height:1.8rem"> <div id="scroll_begin" style="color: red;font-size:1rem;"> <span style="margin-left:12rem;"> 观看完视频即可免费抽奖 </span> 中奖名单: 恭喜尾号为665
用户10106350
2022/10/28
2.4K0
WPF 开启 ScrollViewer 的触摸滚动
在 ScrollViewer 如果需要收到触摸消息,通过 Manipulation 触摸滚动,不能只是通过设置 IsManipulationEnabled 方法,还需要设置 PanningMode 才可以
林德熙
2019/03/13
3.6K0
WPF 开启 ScrollViewer 的触摸滚动
WPF 开启 ScrollViewer 的触摸滚动
在 ScrollViewer 如果需要收到触摸消息,通过 Manipulation 触摸滚动,不能只是通过设置 IsManipulationEnabled 方法,还需要设置 PanningMode 才可以
林德熙
2022/08/04
8780
iOS开发——带有暂停功能的计时器
上篇博客我跟大家分享了如何在iOS系统中使用原生框架获取步数,又是大半个月过去了,运动模块的全部功能也总算完成了,也打算有始有终的把如何做一个跑步类App跟大家分享了。
Originalee
2018/08/30
1.6K0
【IOS开发基础系列】UIScrollView专题
       在滚动过程当中,其实是在修改原点坐标。当手指触摸后,scroll view会暂时拦截触摸事件,使用一个计时器。假如在计时器到点后没有发生手指移动事件,那么scroll view 发送 tracking events 到被点击的subview。假如在计时器到点前发生了移动事件,那么 scroll view 取消tracking 自己发生滚动。
江中散人_Jun
2023/10/16
6580
【IOS开发基础系列】UIScrollView专题
Qm之滚动视图
❝ScrollView(滚动视图)类似于Qt 5版本的ScrollView,它提供用户定义内容的滚动。兼容Qt4与Qt5版本。❞ 1. 演示 可实现轻弹和拖动的功能。 2. 例子 ScrollView { width: 640 height: 480 Image { source: "./qthub_com.png" } } 3. 使用场景 一般用在显示的内容尺寸大于实际显示的尺寸时使用。 图片显示器。 4. 源码 /** * Author: Qt君
Qt君
2023/03/17
4500
Qm之滚动视图
使 WPF 支持触摸板的横向滚动
发布于 2017-11-23 13:25 更新于 2018-08-12 08:02
walterlv
2018/09/18
1K0
使 WPF 支持触摸板的横向滚动
使用VBA在PowerPoint中创建倒计时器(续)附示例PPT下载
其中,Now()引用当前日期和时间,将其存储在变量time中,然后加上30秒,因此将time称为未来时间。
fanjy
2023/08/30
1.9K0
使用VBA在PowerPoint中创建倒计时器(续)附示例PPT下载
Android使用SurfaceView作为相机预览识图时,视图被拉伸的问题
网上已经有很多人提到过,导致这种现象的原因是,传入的相机预览图像长宽比例,与SurfaceView本身大小长宽比例不一致。 那么解决方法也非常简单,只要获取一下设备本身支持的相机比例,然后选择其中一个与SurfaceView实际比例(经常就是设备的长宽)最相近的即可。 下面的代码是创建一个用于相机预览的SurfaceView的过程: //继承SurfaceView并且实现SurfaceHolder.Callback接口 public class CameraPreview extends SurfaceVi
NaOH
2018/05/29
4K0
iOS学习笔记——滚动视图(scrollView)
滚动视图:在根视图中添加UIScrollViewDelegate协议,声明一些对象属性
全栈程序员站长
2022/07/18
1.4K0
Office LTSC 2021 for Mac(office系列全套装)v16.64激活版
Office LTSC 2021 for Mac是一款由微软官方提供的最新office办公软件。office 2021 for Mac 从头开始设计,以利用最新的 Mac 功能,包括 Retina 显示、全屏视图支持,甚至滚动弹跳。它是您熟悉和信任的 office 与您喜爱的 Mac 的完美结合。
一小朵
2022/09/06
6290
Office LTSC 2021 for Mac(office系列全套装)v16.64激活版
办公必备软件 Office LTSC 2021
办公必备软件不得不说office,Office2021是一款最新office办公软件。Office 2021 for Mac 从头开始设计,以利用最新的 Mac 功能,包括 Retina 显示、全屏视图支持,甚至滚动弹跳。它是您熟悉和信任的 Office 与您喜爱的 Mac 的完美结合。
用户10121095
2022/11/16
1.3K1
iOS滚动视图UIScrollView使用方法
滚动视图还满常见的,这里学习了一下基本所有的用法、属性设置和委托,单讲一个ScrollView也很简单,直接上代码远比一个个讲要清晰明了地多。
Cloudox
2021/11/23
1.6K0
iOS滚动视图UIScrollView使用方法
当啫喱被抹黑时,我看到当下时代关于创新的至暗前景
在写今天这篇文章之前,我想问大家一个问题:我们有多久没有看到一个新的社交APP了? 是的,自从微信之后,我们再也没有看到一个新的全民社交APP了,就连老罗的子弹短信,都快是三年前的事了。 在这里,我只看到了一个现实,那就是在社交APP这一块,我们已经很久很久没有看到创新的存在了。 现在,好不容易看到了一个叫啫喱APP的出现,却在诞生不到一个月后,就迎来了铺天盖地的猜疑和指责,难道我们真的容不下社交软件方面有任何创新了吗? 在讲啫喱APP这个事情之前,我们首先必须树立一个共识,那就是: 垄断乃创新之天敌,竞
罗超频道
2022/03/04
3220
cocos creator基本操作
var node = cc.find("Canvas/bg");//通过访问路径来获取节点
Lee坚武
2020/04/10
2.7K0
当AI泡沫破裂时……
很显然我们目前处于一个不稳定的状态。这到底是一场泡沫还是一次革命?答案是当然包含一点革命——深度神经架构所创造的实实在在的成功已经颠覆了视觉和语音识别领域,更通用的机器学习也已经有了大量真实世界用例。
刀刀老高
2018/07/24
3600
当AI泡沫破裂时……
很显然我们目前处于一个不稳定的状态。这到底是一场泡沫还是一次革命?答案是当然包含一点革命——深度神经架构所创造的实实在在的成功已经颠覆了视觉和语音识别领域,更通用的机器学习也已经有了大量真实世界用例。
机器之心
2018/07/26
3760
iOS开发之多图片无缝滚动组件封装与使用
  经常有园友会问"博主,有没有图片无限滚动的Demo呀?", 正儿八经的图片滚动的Demo我这儿还真没有,今天呢就封装一个可以在项目中直接使用的图片轮播。没看过其他iOS图片无限轮播的代码,也不了解他们的原理,我今天封装这个图片无限轮播是借鉴Web前端中的做法,因为之前写Web前端的时候,实现幻灯片就是这么做的,今天就在iPhone上搞搞。下面的东西是自己写的了,关于轮播的东西这个开源项目也是相当不错的https://github.com/nicklockwood/iCarousel ,感兴趣的可以看一下
lizelu
2018/01/11
1.8K0
iOS开发之多图片无缝滚动组件封装与使用
当一个模块被导入两次时,会发生什么?
然后在另一个模块 consumer 中,将上述模块 increment 导入两次:
疯狂的技术宅
2020/03/27
7930
点击加载更多

相似问题

Android:当图像视图被触摸时,停止滚动?

11

触摸时暂停UIScrollView的滚动

12

当UISlider被滚动时UIScrollView会暂停

10

当UIScrollView被触摸出滚动视图的框架时,如何停止UITextField自动滚动?

21

当父视图被触摸时关闭子视图

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档