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

【问题标题】：How to sync scroll two SingleChildScrollView widgets如何同步滚动两个 SingleChildScrollView 小部件
【发布时间】：2018-08-08 08:36:12
【问题描述】：

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

    new Positioned(
        child: new SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: new Scale() 
            ), 
        ),
    new Positioned(
        child: new SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: new chart()
        )
    )

我需要这两个小部件具有完全相同的滚动位置（两者具有相同的宽度并且只能水平滚动）。它必须在用户操作后和代码更改时同步。

【问题讨论】：

为什么不在同一个滚动视图中？
因为当你的 SingleChildScrollView 有不同的大小时，行为是不确定的

标签： dart flutter

【解决方案1】：

就像xster 说的，你必须在一个滚动视图上使用滚动控制器，在另一个滚动视图上使用通知监听器，这里是代码。

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,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

【讨论】：

【解决方案2】：

对于输入，您可以通过作为构造函数参数传入的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。

【讨论】：