Flutter 实现上滑悬浮吸顶效果

在 Flutter 开发中，实现一个具有上滑悬浮吸顶效果的界面是一个常见的需求。这种效果通常用于商品列表、新闻资讯等场景，能够提升用户体验。本文将通过一个具体的案例，介绍如何使用 RefreshIndicator、NestedScrollView、TabBar、TabView 和 SmartRefresher 来实现一个支持下拉刷新和上拉加载的 Tab 吸顶效果。

1. 场景描述

我们希望实现一个包含以下功能的页面：

• 页面顶部有一个轮播图(Swiper)。
• 轮播图下方是一个可滑动的 TabBar，每个 Tab 对应一个商品分类。
• 滑动页面时，TabBar 会悬浮在顶部(吸顶效果)。
• 每个 Tab 的内容区域支持下拉刷新和上拉加载更多数据。
• 使用 SmartRefresher 来实现更灵活的刷新和加载效果。

2. 依赖库

为了实现上述功能，我们需要以下依赖库：

• pull_to_refresh: ^2.0.0：用于实现下拉刷新和上拉加载。
• flutter_swiper: ^1.1.6：用于实现轮播图效果。

在 pubspec.yaml 文件中添加以下依赖：

yaml复制

登录后复制

dependencies:
  flutter:
    sdk: flutter
  pull_to_refresh: ^2.0.0
  flutter_swiper: ^1.1.6

• 1.
• 2.
• 3.
• 4.
• 5.

3. 页面结构设计

3.1 主页面结构

主页面使用 Scaffold 包裹，包含一个自定义的 AppBar 和一个 NestedScrollView。NestedScrollView 的 headerSliverBuilder 用于构建轮播图和 TabBar，而 body 则是一个 TabBarView，每个 Tab 的内容是一个 SmartRefresher。

dart复制

登录后复制

class ListPage extends StatefulWidget {
          
  @override
  State<StatefulWidget> createState() => _ListPageState();
}

class _ListPageState extends State<ListPage>
    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
          
  // 省略部分变量定义...

  @override
  Widget build(BuildContext context) {
          
    return Scaffold(
      appBar: CustomAppBar(
        // 自定义AppBar样式
      ),
      body: RefreshIndicator(
        notificationPredicate: (notifation) {
          
          // 避免下拉刷新与NestedScrollView滑动冲突
          return true;
        },
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool b) {
          
            return [initSliverPersistentHeader(), initSliverPersistentHeaderTwo()];
          },
          body: _goodsListView(),
        ),
        onRefresh: () async {
          
          pageNum = 1;
          getData();
          return Future.value(true);
        },
      ),
    );
  }
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.
• 23.
• 24.
• 25.
• 26.
• 2