发布
社区首页 >问答首页 >如何同步滚动两个SingleChildScrollView小部件

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

Stack Overflow用户
提问于 2018-02-28 20: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 21: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-03 05: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

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档