Flutter联动滚动控制插件 linked_scroll_controller 的使用

linked_scroll_controller 是一个用于同步多个可滚动组件（如 ListView, GridView 等）滚动位置的Flutter插件。它支持静态或动态添加滚动控制器，但如果是动态添加，则需要为每个可滚动组件提供唯一的键值以避免滚动偏移不同步的问题。

示例代码

下面是一个简单的示例，展示了如何创建两个并排的 ListView，它们可以同步滚动。

import 'package:flutter/material.dart';
import 'package:linked_scroll_controller/linked_scroll_controller.dart';

void main() {
  runApp(MaterialApp(
    home: LinkedScrollables(),
  ));
}

class LinkedScrollables extends StatefulWidget {
  @override
  _LinkedScrollablesState createState() => _LinkedScrollablesState();
}

class _LinkedScrollablesState extends State<LinkedScrollables> {
  LinkedScrollControllerGroup _controllers;
  ScrollController _letters;
  ScrollController _numbers;

  @override
  void initState() {
    super.initState();
    _controllers = LinkedScrollControllerGroup();
    _letters = _controllers.addAndGet();
    _numbers = _controllers.addAndGet();
  }

  @override
  void dispose() {
    _letters.dispose();
    _numbers.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Linked Scroll Controllers Demo'),
      ),
      body: Directionality(
        textDirection: TextDirection.ltr,
        child: Row(
          children: [
            Expanded(
              child: ListView(
                controller: _letters,
                children: <Widget>[
                  _Tile('Hello A'),
                  _Tile('Hello B'),
                  _Tile('Hello C'),
                  _Tile('Hello D'),
                  _Tile('Hello E'),
                ],
              ),
            ),
            Expanded(
              child: ListView(
                controller: _numbers,
                children: <Widget>[
                  _Tile('Hello 1'),
                  _Tile('Hello 2'),
                  _Tile('Hello 3'),
                  _Tile('Hello 4'),
                  _Tile('Hello 5'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class _Tile extends StatelessWidget {
  final String caption;

  _Tile(this.caption);

  @override
  Widget build(_) => Container(
        margin: const EdgeInsets.all(8.0),
        padding: const EdgeInsets.all(8.0),
        height: 250.0,
        child: Center(child: Text(caption)),
      );
}

解释

• 我们首先创建了一个 LinkedScrollControllerGroup 实例 _controllers。
• 使用 _controllers.addAndGet() 方法生成了两个 ScrollController，分别用于控制两个 ListView 的滚动行为。
• 在 dispose 方法中释放了资源，防止内存泄漏。
• 最后，在 build 方法中，我们构建了两个 ListView 并设置了各自的 controller 属性。

这样，当您在任何一个 ListView 中滚动时，另一个也会同步滚动，从而实现了联动效果。