Flutter 如何实现同一行内三个Column组件的联动同步滚动

多列同步滚动完全可以实现 #

你可以通过两种方案实现三个独立滚动列的联动效果：

• 若三列内容总高度一致，直接给三个滚动组件绑定同一个ScrollController实例即可，无需额外逻辑即可实现滚动完全同步。
  核心代码示例：

  // 全局声明共用的滚动控制器
  final ScrollController _sharedScrollController = ScrollController();
  
  // 三个Column对应的可滚动组件均绑定同一个控制器
  ListView.builder(
    controller: _sharedScrollController,
    // 剩余自定义配置
  )
  

• 若三列内容总高度不同，改用NotificationListener监听滚动通知实现同步：给每个可滚动组件包裹NotificationListener<ScrollNotification>，监听滚动事件后获取当前偏移量，调用另外两个滚动组件控制器的jumpTo或animateTo方法同步位置，需要额外加标志位避免循环触发滚动事件。

关于GridView和独立Column的选型判断 #

可以根据你的业务场景选择：

• 若三列每一行的元素是一一对应、整体属于规整的网格类布局，优先选用GridView。原生自带整行同步滚动能力，不需要额外写同步逻辑，代码维护成本更低，框架底层的复用优化也会带来更好的滚动性能。
• 若三列是完全独立的内容结构、只是需要滚动同步（比如左侧是章节索引、中间是正文、右侧是批注的场景），保留三个独立Column的方案灵活度更高，只需要加滚动同步逻辑即可满足需求。

内容的提问来源于stack exchange，提问作者Lucactus