同步滚动多个可滚动小部件 [英] Scroll multiple scrollable widgets in sync

问题描述

简单地说：

是否可以使用多个可滚动的小部件（例如， SingleSchildScrollView ）同步在一起吗？

is there a way to have multiple sccrollable widgets (say, SingleSchildScrollView) together in sync?

我只想要2个可滚动的滚动条，当我滚动滚动条时

i just want 2 scrollables that can scroll the other as i scroll one.

这样，我可以使用 Stack 将它们彼此叠放，后面的可以滚动

this way i can use Stack to put them on top of each other and the one behind can scroll following the front one.

或将它们放在另一组 Column 或 Row中，以便它们是分开的，但仍可以通过滚动其中一个来滚动。

or maybe put them in another set of Column or Row so that they are separate, but still scrolls by just scrolling either one.

我尝试使用 controller ，但它似乎并没有按照我的想法做。

i tried using controller but it does not seems to be doing what i think it is.

请尝试以下代码，
中的 RIGHT将位于 LEFT的前面，如果我尝试滚动它们，则只有RIGHT会移动。因此，我如何同时将它们一起移动？

Try the code below for example, the "RIGHT" will be in front of the "LEFT" and if i try to scroll them, only the RIGHT will move. so how do i move them both together at the same time??

请不要告诉我将堆栈放入 ListView ，那不是我所需要的。

please dont tell me to put the stack inside a ListView, that is not what i need.

class _MyHomePageState extends State<MyHomePage> {

  final ScrollController _mycontroller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    body:
      Container(
        height: 100,
        child:
          Stack( children: <Widget>[
            SingleChildScrollView(
              controller: _mycontroller,
              child: Column( children: <Widget>[
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
              ],)
            ),
            SingleChildScrollView(
              controller: _mycontroller,
              child: Column(children: <Widget>[
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
              ],)
            ),
          ])
      )
}}

我相信之前在多个论坛中都曾问过这个问题，但没有人提出结论或解决方案这一点。 （请参见此处）

i believe this question has been asked before in multiple forums before but nobody has put a conclusion or solution to this at all. (see here)

推荐答案

我设法通过使用其偏移量和它们的 ScrollNotification 。

i managed to sync multiple scrollables by using their offset, utilizing their ScrollNotification.

下面是一个粗糙的代码示例：

here's a rough code example:

class _MyHomePageState extends State<MyHomePage> {

  ScrollController _mycontroller1 = new ScrollController(); // make seperate controllers
  ScrollController _mycontroller2 = new ScrollController(); // for each scrollables

  @override
  Widget build(BuildContext context) {
    body:
      Container(
        height: 100,
        child: NotificationListener<ScrollNotification>( // this part right here is the key
          Stack( children: <Widget>[

            SingleChildScrollView( // this one stays at the back
              controller: _mycontroller1,
              child: Column( children: <Widget>[
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
                Text('LEFT            '),
              ],)
            ),
            SingleChildScrollView( // this is the one you scroll
              controller: _mycontroller2,
              child: Column(children: <Widget>[
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
                Text('          RIGHT'),
              ],)
            ),
          ]),

          onNotification: (ScrollNotification scrollInfo) {  // HEY!! LISTEN!!
            // this will set controller1's offset the same as controller2's
            _mycontroller1.jumpTo(_mycontroller2.offset); 

            // you can check both offsets in terminal
            print('check -- offset Left: '+_mycontroller1.offset.toInt().toString()+ ' -- offset Right: '+_mycontroller2.offset.toInt().toString()); 
          }
        )
      )
}}

基本上每个 SingleChildScrollView 都有自己的控制器。每个 b控制器
都有它们自己的偏移量值。
使用 NotificationListener< ScrollNotification> 通知任何移动，无论它们何时滚动。

basically each SingleChildScrollView has its own controller. each controller has their own offset values. use the NotificationListener<ScrollNotification> to notify any movement, anytime they are scrolled.

然后每个滚动手势（我相信这是一帧一帧的基础），
我们可以添加 jumpTo（）命令来设置 offset s都是我们喜欢的。

then for each scroll gesture (i believe this is a frame by frame basis), we can add jumpTo() command to set the offsets in anyway we like.

欢呼！

PS。如果列表的长度不同，则偏移量将不同，并且如果您尝试滚动超过其限制，则会收到堆栈溢出错误。确保添加一些异常或错误处理。 （即否则等）

PS. if the list has different length, then the offset will be different and you will get a stack overflow error if you try to scroll past its limit. make sure to add some exceptions or error handling. (i.e. if else etc.)

这篇关于同步滚动多个可滚动小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！