Flutter NestedScrollView 列表滚动同步解决方案

2023-10-13 04:49:41

Flutter 扩展 NestedScrollView （二）：列表滚动同步解决

各位好，我是技术博客创作专家，上篇我们分享了 NestedScrollView 第一个常见问题的解决思路，这一篇，我们继续深入，解决第二个问题。

在 NestedScrollView 的世界里，有两员大将：inner ScrollController 和 outer ScrollController。其中，TabView 被安置在了 body 中，所以我们需要重点关注 inner ScrollController。

解决同步问题

为了让 NestedScrollView 和列表滚动步调一致，我们需要协调 inner ScrollController 的行为。这里有两种方法：

方法 1：监听 inner ScrollController

我们可以监听 inner ScrollController 的滚动事件，并根据滚动的距离更新 outer ScrollController 的偏移量。这样，当列表滚动时，NestedScrollView 也可以同步滚动。

方法 2：嵌套 ScrollConfiguration

另一个更优雅的解决方案是嵌套 ScrollConfiguration，它可以自动协调 inner 和 outer ScrollController。通过在 body 中嵌套 ScrollConfiguration，并设置其 behavior 为 ScrollConfiguration.of(context).copyWith(scrollbars: false)，即可实现滚动同步。

代码示例

方法 1：

import 'package:flutter/material.dart';

class MyNestedScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ScrollController innerController = ScrollController();
    ScrollController outerController = ScrollController();

    // 监听 inner ScrollController 的滚动事件
    innerController.addListener(() {
      // 更新 outer ScrollController 的偏移量
      outerController.offset = innerController.offset;
    });

    return NestedScrollView(
      controller: outerController,
      innerScrollController: innerController,
      body: TabView(...),
    );
  }
}

方法 2：

import 'package:flutter/material.dart';

class MyNestedScrollView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScrollConfiguration(
      behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
      child: NestedScrollView(
        body: TabView(...),
      ),
    );
  }
}