滚动同步多个可滚动窗口小部件

Question

多个可滚动窗口小部件的滚动同步：

我想滚动第二个列表如果滚动第一个列表并滚动第一个列表如果滚动第二个列表。它将是递归任何人都可以帮助这个，谢谢提前。

import 'package:flutter/cupertino.dart';
class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ScrollController firstScroll = ScrollController();
  ScrollController secondScrollController = ScrollController();

  @override
  void initState() {
     super.initState();
     firstScroll.addListener(() {
    //THIS IS called when scroll is triggered,
        secondScrollController
           .jumpTo(firstScroll.offset); // THIS will sync the scroll;
     });

 secondScrollController.addListener(() {
    //THIS IS called when scroll is triggered,
        firstScroll
           .jumpTo(secondScrollController.offset); // THIS will sync the scroll;
     });
   }

   @override
   Widget build(BuildContext context) {
     return Container(
        child: Column(
          children: <Widget>[
            SingleChildScrollView(
             // this is the first scroll
                scrollDirection: Axis.horizontal,
                controller: firstScroll, // THIS IS THE FIRST SCROLL CONTROLLER
                child: Container(
                   //TODO: add your content here here
                ),
            ),
            SingleChildScrollView(
               scrollDirection: Axis.horizontal,
               controller: secondScrollController,
               // HERE YOU SET THE SECOND CONTROLLER
               child: Container(
                  //TODO: add your content here
               ),
             )
        ],
    ),
 );
}
}

Answer 1

这是因为每次你调用jumpTo方法时它会调用第一个，第一个调用第二个调用，你将有一个无限循环。

解决方案是你创建自己的ScrollController，它拥有跳转到另一个位置而无需通知的方法。

这是您可以创建的自定义滚动控制器：

            class CustomScrollController extends ScrollController {
              CustomScrollController({
                double initialScrollOffset = 0.0,
                keepScrollOffset = true,
                debugLabel,
              }) : super(
                        initialScrollOffset: initialScrollOffset,
                        keepScrollOffset: keepScrollOffset,
                        debugLabel: debugLabel);

              @override
              _UnboundedScrollPosition createScrollPosition(
                ScrollPhysics physics,
                ScrollContext context,
                ScrollPosition oldPosition,
              ) {
                return _UnboundedScrollPosition(
                  physics: physics,
                  context: context,
                  oldPosition: oldPosition,
                  initialPixels: initialScrollOffset,
                );
              }

              void jumpToWithoutGoingIdleAndKeepingBallistic(double value) {
                assert(positions.isNotEmpty, 'ScrollController not attached.');
                for (_UnboundedScrollPosition position
                    in new List<ScrollPosition>.from(positions))
                  position.jumpToWithoutGoingIdleAndKeepingBallistic(value);
              }
            }

            class _UnboundedScrollPosition extends ScrollPositionWithSingleContext {
              _UnboundedScrollPosition({
                ScrollPhysics physics,
                ScrollContext context,
                ScrollPosition oldPosition,
                double initialPixels,
              }) : super(
                      physics: physics,
                      context: context,
                      oldPosition: oldPosition,
                      initialPixels: initialPixels,
                    );

              /// There is a feedback-loop between aboveController and belowController. When one of them is
              /// being used, it controls the other. However if they get out of sync, for timing reasons,
              /// the controlled one with try to control the other, and the jump will stop the real controller.
              /// For this reason, we can't let one stop the other (idle and ballistics) in this situation.
              void jumpToWithoutGoingIdleAndKeepingBallistic(double value) {
                if (pixels != value) {
                  forcePixels(value);
                }
              }
            }

而只是打电话给jumpToWithoutGoingIdleAndKeepingBallistic而不是jumpTo。

这里有一个工作样本：

https://gist.github.com/diegoveloper/75e55ca2e4cee03bff41a26254d6fcf6

结果