Flutter嵌套滚动管理插件nested_scroll_controller的使用

Flutter嵌套滚动管理插件nested_scroll_controller的使用

介绍

nested_scroll_controller 是一个用于控制 NestedScrollView 的小库，就像控制普通的滚动视图一样。它允许你执行以下操作：

• 动画到某个偏移量或索引
• 跳转到某个偏移量或索引
• 添加监听器以获取总偏移量

使用方法

以下是使用 NestedScrollController 的五个主要步骤：

1. 创建 NestedScrollController。
2. 将 NestedScrollView 的控制器设置为 nestedScrollController。
3. 将 NestedScrollView 的主体部分用 LayoutBuilder 包裹。
4. 启用滚动和中心滚动（如果需要）。
5. 在任何地方使用 NestedScrollController。

下面是完整的示例代码：

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

/// 一个简单的示例应用程序，演示 [NestedScrollController] 的基本用法。
///
/// 下面的代码是从 [https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html] 复制并修改的。
/// 唯一的修改是为了清晰地展示 [NestedScrollController] 的使用。

void main() {
  runApp(TestApp());
}

final double itemExtent = 48.0;

class TestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "NestedScrollController 示例",
      home: ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  List<String> get _tabs => ["One", "Two"];

  /// 1. 创建 [NestedScrollController]
  final NestedScrollController nestedScrollController = NestedScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: _tabs.length,
        child: NestedScrollView(
          /// 2. 将控制器传递给 [NestedScrollView]
          controller: nestedScrollController,
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  title: const Text('Books'),
                  pinned: true,
                  expandedHeight: 200.0,
                  forceElevated: innerBoxIsScrolled,
                  bottom: TabBar(
                    tabs: _tabs.map((String name) => Tab(text: name)).toList(),
                  ),
                ),
              ),
            ];
          },

          /// 3. 使用 [LayoutBuilder] 包裹 [NestedScrollView.body]
          body: LayoutBuilder(
            builder: (BuildContext context, BoxConstraints constraints) {
              /// 4. 提供 [NestedScrollController] 上下文和约束条件
              nestedScrollController.enableScroll(context);
              nestedScrollController.enableCenterScroll(constraints);

              return TabBarView(
                children: _tabs.map((String name) {
                  return SafeArea(
                    top: false,
                    bottom: false,
                    child: CustomScrollView(
                      key: PageStorageKey<String>(name),
                      slivers: <Widget>[
                        SliverOverlapInjector(
                          handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                        ),
                        SliverPadding(
                          padding: const EdgeInsets.all(8.0),
                          sliver: SliverFixedExtentList(
                            itemExtent: itemExtent,
                            delegate: SliverChildBuilderDelegate(
                              (BuildContext context, int index) {
                                return ListTile(
                                  title: Text('Item $index'),
                                  onTap: () {
                                    /// 5. 使用 [NestedScrollController]
                                    nestedScrollController.nestedAnimateTo(index * itemExtent);
                                  },
                                );
                              },
                              childCount: 30,
                            ),
                          ),
                        ),
                      ],
                    ),
                  );
                }).toList(),
              );
            },
          ),
        ),
      ),
    );
  }
}

添加监听器

你可以像对普通滚动控制器那样添加和移除监听器：

nestedScrollController.addListener(() {
  print("外部: ${nestedScrollController.offset}");
  print("内部: ${nestedScrollController.innerOffset}");
  print("总计: ${nestedScrollController.totalOffset}");
});