ScrollController 附加到多个滚动视图

Question

I have a stateful widget with children as such

final _scrollController = TrackingScrollController();

PageView(
  controller: _pageController,
  children: <Widget>[
    _ListView(controller: _scrollController),
    _ListView(controller: _scrollController),
    _ListView(controller: _scrollController),
  ],
)

This seems to match the pattern shown here https://docs.flutter.io/flutter/widgets/TrackingScrollController-class.html

However, when I scroll one list, the others are not synced, and I get this error for every frame

flutter: Another exception was thrown: ScrollController attached to multiple scroll views.

Any ideas as to what I'm doing wrong? Do I have unreasonable expectations of TrackingScrollController?

Answer 1

Please see Ashton Thomas' explanation for why TrackingScrollController doesn't work for this use case. To achieve the behavior you described, you can use a new package released by Google: linked_scroll_controller .

First, add this package to your pubspec.yaml :

dependencies:
  linked_scroll_controller: ^0.1.2
  // ...

And then integrate it into your code like this:

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  final _pageController = PageController();

  // This group keeps track of the synchronized scroll offset.
  final _scrollControllerGroup = LinkedScrollControllerGroup();
  ScrollController _scrollController1;
  ScrollController _scrollController2;
  ScrollController _scrollController3;

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

    // Create separate ScrollControllers as you need them:
    _scrollController1 = _scrollControllerGroup.addAndGet();
    _scrollController2 = _scrollControllerGroup.addAndGet();
    _scrollController3 = _scrollControllerGroup.addAndGet();
  }

  @override
  void dispose() {
    // Don't forget to dispose all of your controllers!
    _pageController.dispose();
    _scrollController1.dispose();
    _scrollController2.dispose();
    _scrollController3.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: _pageController,
      children: <Widget>[
        // Use controllers only once:
        ListView(controller: _scrollController1),
        ListView(controller: _scrollController2),
        ListView(controller: _scrollController3),
      ],
    );
  }
}

Answer 2

Are you getting the scroll position of the _trackingScrollController ? If so, you will get the error.

Below is the implementation of get postion inside ScrollController which is base for TrackingScrollController .

ScrollPosition get position {
  assert(_positions.isNotEmpty, 'ScrollController not attached to any scroll views.');
  assert(_positions.length == 1, 'ScrollController attached to multiple scroll views.');
  return _positions.single;
 }

Answer 3

The TrackingScrollController is only responsible for producing the initialScrollOffset which is, as you would expect, only the initial offset when being built .

TrackingScrollController just creates a map of ScrollPositions for each ListView and listens to each of these for changes storign this as the new initial scroll position to be used when the next ListView is rendered.

What is your expected behavior versus what you are seeing? Please provide more information as to your goal and implementation if you can.

As for the exception:

flutter: Another exception was thrown: ScrollController attached to multiple scroll views.

This is thrown when you use a get the controller.positon while you have multiple positions attached ie you can only use this get when you only ever attach a single positon.

You may want to leverage the get for controller.positions (note the plural, this is an iterable)