项目博客关于

NestedScrollView Plus

2021-09Packages

Enhanced NestedScrollView for overscroll in outer scroll views
查看源码

幕后花絮

在主流 APP 中有一种常见的布局,经常用在「我的」页面1

抖音抖音小红书小红书

在 Flutter 中有一个组件与此布局十分相似,那就是 NestedScrollView

不过遗憾的是 NestedScrollView 在向下滑动时2,只有内部的 TabView 列表会下拉刷新(过度滚动),而不是像抖音和小红书那样外部的 header 会被下拉刷新。

NestedScrollViewNestedScrollViewNestedScrollViewPlusNestedScrollViewPlus

为了解决这个问题,我 Fork 了官方的 NestedScrollView3,然后重写了内外 ScrollView 和 Coordinator 坐标之间的映射关系,并修复了一些已知问题,轻松实现类似抖音和小红书的个人主页布局。

备注

  1. 这种布局通常由 header + body 两部分组成:其中头部高度一般不固定,用来展示用户头像和个人简介等信息,而 body 区域则是 Tabview,里面是用来展示用户作品和动态等信息的内容列表。

  2. Flutter issues #54059: https://github.com/flutter/flutter/issues/54059

  3. NestedScrollViewPlus: https://pub.dev/packages/nested_scroll_view_plus