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复制
                                   登录后复制                        

1. dependencies:
2.   flutter:
3.     sdk: flutter
4.   pull_to_refresh: ^2.0.0
5.   flutter_swiper: ^1.1.6

复制代码

      

        

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

                       3. 页面结构设计

     3.1 主页面结构

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

1. class ListPage extends StatefulWidget {
2.          
3.   @override
4.   State<StatefulWidget> createState() => _ListPageState();
5. }
7. class _ListPageState extends State<ListPage>
8.     with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
9.          
10.   // 省略部分变量定义...
12.   @override
13.   Widget build(BuildContext context) {
14.          
15.     return Scaffold(
16.       appBar: CustomAppBar(
17.         // 自定义AppBar样式
18.       ),
19.       body: RefreshIndicator(
20.         notificationPredicate: (notifation) {
21.          
22.           // 避免下拉刷新与NestedScrollView滑动冲突
23.           return true;
24.         },
25.         child: NestedScrollView(
26.           headerSliverBuilder: (BuildContext context, bool b) {
27.          
28.             return [initSliverPersistentHeader(), initSliverPersistentHeaderTwo()];
29.           },
30.           body: _goodsListView(),
31.         ),
32.         onRefresh: () async {
33.          
34.           pageNum = 1;
35.           getData();
36.           return Future.value(true);
37.         },
38.       ),
39.     );
40.   }
41. }

复制代码

      

        

• 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      
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。