Flutter：吸顶结果

在分页中，实现tab吸顶。
TDNavBar的screenAdaptation: true, 开启屏幕适配。
该属性已自动对不同手机状态栏高度进行适配。我们只需关注怎样实现吸顶。

   view

1. import 'package:ducafe_ui_core/ducafe_ui_core.dart';
2. import 'package:flutter/material.dart';
3. import 'package:get/get.dart';
4. import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';
5. import 'package:tdesign_flutter/tdesign_flutter.dart';
6. import 'package:xiaoshukeji/common/index.dart';
8. import 'index.dart';
10. // 1. SliverPersistentHeaderDelegate：必须实现的抽象类
11. class _StickyTabBarDelegate extends SliverPersistentHeaderDelegate {
12.   final Widget child;
14.   _StickyTabBarDelegate({required this.child});
16.   @override
17.   Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
18.     // shrinkOffset: 滚动距离
19.     // overlapsContent: 是否与其他内容重叠
20.     return Container(
21.       color: AppTheme.pageBgColor,
22.       child: child,
23.     );
24.   }
26.   @override
27.   double get maxExtent => 92.w; // 最大高度，已知tab高度72+上下padding：10
29.   @override
30.   double get minExtent => 92.w; // 最小高度
32.   @override
33.   bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) => true;
34. }
37. class RankingPage extends GetView<RankingController> {
38.   const RankingPage({super.key});
40.   // 头部皇冠位置
41.   Widget _buildHeader() {
42.     return <Widget>[
44.     ].toRow()
45.     .card(color: AppTheme.pageBgColor)
46.     .tight(width: 750.w,height: 300.w,);
47.   }
49.   // tab，可吸顶
50.   Widget _buildTab() {
51.     return <Widget>[
52.       <Widget>[
53.         TextWidget.body('日榜', size: 28.sp, weight: FontWeight.w600, color: AppTheme.textColorfff),
54.       ].toRow(mainAxisAlignment: MainAxisAlignment.center)
55.       .card(color: AppTheme.primaryYellow)
56.       .tight(width: 336.w,height: 72.w,),
58.       <Widget>[
59.         TextWidget.body('总榜', size: 28.sp, weight: FontWeight.w600, color: AppTheme.textColor6a7),
60.       ].toRow(mainAxisAlignment: MainAxisAlignment.center)
61.       .card(color: AppTheme.navBarBgColor)
62.       .tight(width: 336.w,height: 72.w,),
64.     ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween);
65.   }
67.   // 数据列表
68.   Widget _buildDataList() {
69.     return SliverList(
70.       delegate: SliverChildBuilderDelegate(
71.         (context, index) {
72.           return <Widget>[]
73.               .toRow()
74.               .paddingHorizontal(30.w)
75.               .card(color: AppTheme.blockBgColor)
76.               .tight(
77.                 width: 690.w,
78.                 height: 120.w,
79.               )
80.               .marginOnly(bottom: 20.w);
81.         },
82.         childCount: 20,
83.       ),
84.     );
85.   }
87.   // 主视图
88.   Widget _buildView() {
89.     return SmartRefresher(
90.       controller: controller.refreshController,
91.       enablePullUp: true,
92.       onRefresh: controller.onRefresh,
93.       onLoading: controller.onLoading,
94.       footer: const SmartRefresherFooterWidget(),
95.       header: const SmartRefresherHeaderWidget(),
96.       child: CustomScrollView(
97.         slivers: [
98.           // 头部
99.           _buildHeader().sliverToBoxAdapter().sliverPaddingHorizontal(30.w),
100.          
101.           // 2. SliverPersistentHeader：实现吸顶的核心组件
102.           SliverPersistentHeader(
103.             pinned: true,  // 设置为 true 实现吸顶
104.             delegate: _StickyTabBarDelegate(
105.               child: Container(
106.                 padding: EdgeInsets.symmetric(horizontal: 30.w, vertical: 10.w),
107.                 child: _buildTab(),
108.               ),
109.             ),
110.           ),
111.          
112.           // 列表内容
113.           _buildDataList().sliverPaddingHorizontal(30.w),
114.         ],
115.       ),
116.     );
117.   }
120.   @override
121.   Widget build(BuildContext context) {
122.     return GetBuilder<RankingController>(
123.       init: RankingController(),
124.       id: "ranking",
125.       builder: (_) {
126.         return Scaffold(
127.           backgroundColor: AppTheme.pageBgColor, // 自定义颜色
128.           appBar: const TDNavBar(
129.             height: 0,
130.             titleColor: AppTheme.textColorfff,
131.             titleFontWeight: FontWeight.w600,
132.             backgroundColor: AppTheme.pageBgColor,
133.             screenAdaptation: true, // 是否进行屏幕适配，默认true
134.             useDefaultBack: false,
135.           ),
136.           body: _buildView(),
137.         );
138.       },
139.     );
140.   }
141. }

复制代码

  controller

1. import 'package:get/get.dart';
2. import 'package:pull_to_refresh_flutter3/pull_to_refresh_flutter3.dart';
4. class RankingController extends GetxController {
5.   RankingController();
6.   List items = [];
8.   /*
9.   * 分页
10.   * refreshController：分页控制器
11.   * _page：分页
12.   * _limit：每页条数
13.   * _loadNewsSell:拉取数据（是否刷新）
14.   * onLoading：上拉加载新商品
15.   * onRefresh：下拉刷新
16.   * */
17.   final RefreshController refreshController = RefreshController(
18.     initialRefresh: true,
19.   );
20.   // int _page = 1;
21.   // int _limit = 20;
22.   Future<bool> _loadNewsSell(bool isRefresh) async {
23.     return false;
24.     // var result = await ProductApi.products(ProductsReq(
25.     //   page:isRefresh ? 1:_page,
26.     //     prePage:_limit
27.     // ));
28.     // if(isRefresh){
29.     //   _page = 1;
30.     //   items.clear();
31.     // }
32.     // if(result.isNotEmpty){
33.     //   _page++;
34.     //   items.addAll(result);
35.     // }
36.     // // 是否是空
37.     // return result.isEmpty;
38.   }
40.   // 上拉载入新商品
41.   void onLoading() async {
42.     if (items.isNotEmpty) {
43.       try {
44.         // 拉取数据是否为空 ? 设置暂无数据 ： 加载完成
45.         var isEmpty = await _loadNewsSell(false);
46.         isEmpty
47.             ? refreshController.loadNoData()
48.             : refreshController.loadComplete();
49.       } catch (e) {
50.         refreshController.loadFailed(); // 加载失败
51.       }
52.     } else {
53.       refreshController.loadNoData(); // 设置无数据
54.     }
55.     update(["ranking"]);
56.   }
58.   // 下拉刷新
59.   void onRefresh() async {
60.     try {
61.       await _loadNewsSell(true);
62.       refreshController.refreshCompleted();
63.     } catch (e) {
64.       refreshController.refreshFailed();
65.     }
66.     update(["ranking"]);
67.   }
68.   _initData() {
69.     update(["ranking"]);
70.   }
72.   void onTap() {}
74.   // @override
75.   // void onInit() {
76.   //   super.onInit();
77.   // }
79.   @override
80.   void onReady() {
81.     super.onReady();
82.     _initData();
83.   }
85.   // @override
86.   // void onClose() {
87.   //   super.onClose();
88.   // }
89. }

复制代码

  纪录tab切换

1. int currentTab = 0; // 当前选中的tab索引
2. // tab切换方法
3. void switchTab(int index) {
4.   if (currentTab == index) return;
5.   currentTab = index;
6.   items.clear();// 切换tab时重置列表数据
7.   refreshController.requestRefresh();
8.   update(["ranking"]);
9. }
11.   // tab切换
12. Widget _buildTab() {
13.   return <Widget>[
14.     <Widget>[
15.       TextWidget.body('日榜', size: 28.sp, weight: FontWeight.w600, color: controller.currentTab == 0 ?  AppTheme.textColorfff : AppTheme.textColor646),
16.     ].toRow(mainAxisAlignment: MainAxisAlignment.center)
17.     .card(color: controller.currentTab == 0 ? AppTheme.primaryYellow : AppTheme.navBarBgColor)
18.     .tight(width: 336.w,height: 72.w,).onTap(() {
19.       controller.switchTab(0);
20.     }),
22.     <Widget>[
23.       TextWidget.body('总榜', size: 28.sp, weight: FontWeight.w600, color: controller.currentTab == 1 ?  AppTheme.textColorfff : AppTheme.textColor646),
24.     ].toRow(mainAxisAlignment: MainAxisAlignment.center)
25.     .card(color: controller.currentTab == 1 ? AppTheme.primaryYellow : AppTheme.navBarBgColor )
26.     .tight(width: 336.w,height: 72.w,).onTap(() {
27.       controller.switchTab(1);
28.     }),
30.   ].toRow(mainAxisAlignment: MainAxisAlignment.spaceBetween);
31. }

复制代码

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