nested_scroll_view_plus

一个增强的NestedScrollView，支持内部和外部滚动视图的越界滚动。

? 预览

在线尝试： https://flutter-nested-scroll-view-plus.vercel.app

? 用法

安装

flutter pub add nested_scroll_view_plus

用法示例

  1. 将您的SliverAppBar包裹在OverlapAbsorberPlus中
  2. 在内部CustomScrollView的顶部使用OverlapInjectorPlus
  3. 将CustomScrollView的物理效果更改为AlwaysScrollableScrollPhysics

就是这样！

import 'package:nested_scroll_view_plus/nested_scroll_view_plus.dart';

NestedScrollViewPlus(
  headerSliverBuilder: (context, innerScrolled) => <Widget>[
    // 1. Wrap your SliverAppBar with OverlapAbsorberPlus
    OverlapAbsorberPlus(
      sliver: SliverAppBar(), // Your SliverAppBar
    ),
  ],
  body: TabBarView(
    children: [
      CustomScrollView(
        // 2. [IMPORTANT] Change the physics of CustomScrollView to AlwaysScrollableScrollPhysics
        physics: const BouncingScrollPhysics(
          parent: AlwaysScrollableScrollPhysics(),
        ),
        slivers: <Widget>[
          // 3. Use OverlapInjectorPlus on top of your inner CustomScrollView
          OverlapInjectorPlus(),
          // Other children of CustomScrollView
          // ...,
        ],
      ),
    ],
  ),
);

有关更多示例，请访问scroll_master仓库。它包括NestedScrollView的下拉刷新、滚动视图和标签视图的组合滚动等功能。

? 其他

⚙️ 访问内部或外部滚动控制器

要访问NestedScrollViewPlus的内部或外部滚动控制器，您可以使用GlobalKey<NestedScrollViewStatePlus>来获取其状态。

class _ExampleState extends State<Example> {
  // 1. Create a GlobalKey
  final GlobalKey<NestedScrollViewStatePlus> myKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return NestedScrollViewPlus(
      // 2. Set the key to NestedScrollViewStatePlus
      key: myKey,
      // ...,
    );
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      // 3. Access the inner or outer scroll controller using GlobalKey<NestedScrollViewStatePlus>
      myKey.currentState!.innerController.addListener(_handleInnerScroll);
      myKey.currentState!.outerController.addListener(_handleOuterScroll);
    });
  }

  void _handleInnerScroll() {
    final innerController = myKey.currentState!.innerController;
    if (innerController.positions.length == 1) {
      print('Scrolling inner nested scrollview: ${innerController.offset}');
    }
  }

  void _handleOuterScroll() {
    final outerController = myKey.currentState!.outerController;
    if (outerController.positions.length == 1) {
      print('Scrolling outer nested scrollview: ${outerController.offset}');
    }
  }
}

? 保持内部CustomScrollViews的滚动位置

要保持内部CustomScrollViews的滚动位置，您可以为CustomScrollView小部件添加一个PageStorageKey。以下是一个示例：

CustomScrollView(
  key: PageStorageKey<String>('unique-key'),
  slivers: <Widget>[
    // ...,
  ],
),

通过为CustomScrollView分配一个唯一的键，Flutter的PageStorage机制将存储和恢复内部CustomScrollViews的滚动位置，使您即使在小部件树重建时也能保持滚动位置。

⭕️ 适用于旧版Flutter

如果您使用的是旧版Flutter，请按照以下步骤从旧git仓库安装相应的分支。

dependencies:
  custom_nested_scroll_view:
    git:
      url: https://github.com/idootop/custom_nested_scroll_view.git
      # Choose the branch based on your local Flutter version
      ref: flutter-3.7

不同的分支支持以下Flutter版本

Git分支 支持的Flutter版本
flutter-3.7 >=3.7.0-13.0.pre
flutter-3.4 >=3.4.0-27.0.pre <3.7.0-13.0.pre
flutter-3.4-pre >=3.4.0-17.0.pre <3.4.0-27.0.pre
flutter-3.0 >=2.12.0-4.0.pre <3.4.0-17.0.pre
flutter-2.x <2.12.0-4.0.pre

GitHub

查看 Github