使用jumpTo方法时，FLUTTER滚动控制器抛出堆栈溢出错误

Question

我试图将两个卷轴同步移动，我设法使用一个而不是另一个移动它们。

我正在使用controller的jumpTo方法来设置对方的offset。但如果我碰到其他卷轴，我会得到一个stack overflow错误。

在我的例子中（如下），如果我滚动浏览“MOVE”，那就没问题。但是，当我触及“FOLLOW”时，它给了我一个错误，我必须重新启动应用程序。

这背后的解释是什么？我该如何解决？

最终我想拥有可以像这样移动的许多卷轴，但我需要让“TEXT HERE”不在它们之间移动。

下面是我的整个main.dart，请试一试。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {


  var c1 = ScrollController(); // controller declaration
  var c2 = ScrollController();



  @override void initState() { 
    super.initState(); 
  }

  @override
  Widget build(BuildContext context) {

    print('start');

    return Scaffold(
      appBar: AppBar(
        title: new Text('data test'),
      ),

      body: new Container( //===================================
        padding: EdgeInsets.all(30),
        color: Colors.blue[100],
        height: 200,

        child: NotificationListener<ScrollNotification>(
          child: Column(
            children: <Widget>[
              Text('SOME TEXT HERE'),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                controller: c1, // KONTROLER
                child: Container(height: 50, color: Colors.green[100], child: Row( children: <Widget>[
                  Container(width: 100,child: Text('+MOOOVE        -')),
                  Container(width: 100,child: Text('-MOOOVE        -')),
                  Container(width: 100,child: Text('-MOOOVE        -')),
                  Container(width: 100,child: Text('*MOOOVE        *')),
                  Container(width: 100,child: Text('-MOOOVE        -')),
                  Container(width: 100,child: Text('-MOOOVE        -')),
                  Container(width: 100,child: Text('-MOOOVE        +')),

                ],),)
              ),
              Text('ANOTHER TEXT HERE'),
              SingleChildScrollView(
                      scrollDirection: Axis.horizontal,
                controller: c2, // KONTROLER
                child: Container(height: 50, color: Colors.red[100], child: Row(children: <Widget>[

                  Container(width: 100,child: Text('+        FOLLOW-')),
                  Container(width: 100,child: Text('-        FOLLOW-')),
                  Container(width: 100,child: Text('-        FOLLOW-')),
                  Container(width: 100,child: Text('*        FOLLOW*')),
                  Container(width: 100,child: Text('-        FOLLOW-')),
                  Container(width: 100,child: Text('-        FOLLOW-')),
                  Container(width: 100,child: Text('-        FOLLOW+')),
                ],),)
              ),
          ]),


          onNotification: (ScrollNotification scrollinfo) {  // HEY!! LISTEN!!

            c2.jumpTo( c1.offset ); // c1 is controlling c2's offset

            print('OFFSET--'+c1.offset.toInt().toString()+"--"+c2.offset.toInt().toString());
          },
        )
      ), // ===================
    );
  }
}

谢谢。

Answer 1

所以我建议使用ScrollController（docs here）。这里有一段关于如何使用它们的代码。

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, but it might be called for other events
            secondScrollController
               .jumpTo(firstScroll.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
                   ),
                 )
            ],
        ),
     );
  }
}

请注意，代码只是如何将滚动从一个滚动窗口小部件转发到另一个滚动窗口小部件的片段。然后，您可以在滚动侦听器正文中实现所需的任何逻辑。