flutter滑动隐藏头部

在这里插入图片描述
模型代码

import 'packagegenerated/l10n.dart';
import 'package:jade/bean/TabTypeMode.dart';
import 'package:jade/customWidget/MyCustomIndicator.dart';
import 'package:jade/experienceStationCreate/MyExpCellBillHistory.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:util/navigator_util.dart';
import 'package:util/tab/customize_dicator.dart';
import 'package:widget/custom_appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';class MyExpCellBillHistoryMainFirst extends StatefulWidget{@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn _MyExpCellBillHistoryMainFirst();}
}class _MyExpCellBillHistoryMainFirst extends State<MyExpCellBillHistoryMainFirst> with TickerProviderStateMixin{TabController _tabController;List<String> _tabs = ['全部','按产品展示'];List<TabTypeMode> _secondTabs = [TabTypeMode(type: 0,title: S.current.quanbu),TabTypeMode(type: 1,title: '已入账'),TabTypeMode(type: 2,title: '服务费')];TabController _secondTabController;int _type = 0;double dx = 0.0;double dy = 0.0;double containerHeight = 470.w;@overridevoid initState() {// TODO: implement initStatesuper.initState();_tabController = TabController(initialIndex: 0,length: _tabs.length,vsync: this);_secondTabController = TabController(initialIndex: 0,length: _secondTabs.length,vsync: this);_tabController.addListener(() {setState(() {if(_tabController.index == 0){_type = 0;_secondTabs = [TabTypeMode(type: 0,title: S.current.quanbu),TabTypeMode(type: 1,title: '已入账'),TabTypeMode(type: 2,title: '服务费')];}else if(_tabController.index == 1){_type = 1;_secondTabs = [TabTypeMode(type: 0,title: S.current.quanbu),TabTypeMode(type: 1,title: '已下架'),TabTypeMode(type: 2,title: '进行中')];}_secondTabController = TabController(initialIndex: 0,length: _secondTabs.length,vsync: this);});});}@overridevoid dispose() {// TODO: implement dispose_tabController.dispose();_secondTabController.dispose();super.dispose();}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(backgroundColor: JadeColors.lightGrey,appBar: CustomAppBar(backgroundColor: Colors.white,iconTheme: IconThemeData(color: Colors.black45),leading: IconButton(icon: Icon(Icons.arrow_back_ios),iconSize: 20,onPressed: () {NavigatorUtil.pop();},),title: Text('1号格口账单记录',style: TextStyle(color: Colors.black),),centerTitle: true,),body: _scrollListenerView());}_scrollListenerView(){return NotificationListener(onNotification: (scrollNotification) {if (scrollNotification is ScrollUpdateNotification &&scrollNotification.depth == 0) {// 滚动且是列表滚动的时候//  print('滑动偏移量：${scrollNotification.metrics.pixels}');}return;},child: Listener(onPointerDown: (downPointer){dx = downPointer.position.dx;dy = downPointer.position.dy;},onPointerMove: (movePointer) {//向下滑动。if (movePointer.position.dy - dy > 0) {if (movePointer.position.dy - dy > 56) {print('向下滑动');setState(() {if(containerHeight < 470.w){containerHeight += 56;if(containerHeight >= 470.w){containerHeight = 470.w;}}});}} else {if (-(movePointer.position.dy - dy) > 56) {print('向上滑动');setState(() {containerHeight -= 56;if(containerHeight <= 0.0){containerHeight = 0.0;}});}}},child: _body(),));}_body(){return Column(children: [AnimatedContainer(child: revenueWidget(),height: containerHeight,duration: Duration(milliseconds: 340),),_tabBarView(),_secondTabBarView(),Expanded(child: _secondTabView())],);}_tabBarView(){return Container(color: Colors.white,child: TabBar(isScrollable: false,labelPadding: EdgeInsets.symmetric(horizontal: 0),indicator: MyCustomIndicator(indicatorColor: JadeColors.blue_19),labelColor: Color(0xff333333),labelStyle: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.w600,),unselectedLabelColor: JadeColors.grey,unselectedLabelStyle: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.w300),indicatorSize: TabBarIndicatorSize.label,controller: _tabController,tabs: _tabs.map((value) => Container(padding: EdgeInsets.symmetric(horizontal: 20.w),child: Text(value))).toList(),onTap: (index) {},),);}_secondTabBarView(){return Container(padding: EdgeInsets.only(top: 30.w),color: Colors.transparent,alignment: Alignment.centerLeft,child: TabBar(isScrollable: true,labelPadding: EdgeInsets.symmetric(horizontal: 0),indicator: MyUnderlineTabIndicator(borderSide:BorderSide(width: 2, color:  JadeColors.blue_2),insets: EdgeInsets.only(bottom: 5)),labelColor: Color(0xff333333),labelStyle: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.w600,),unselectedLabelColor: JadeColors.grey,unselectedLabelStyle: TextStyle(fontSize: 30.sp,fontWeight: FontWeight.w300),indicatorWeight: 20.w,indicatorSize: TabBarIndicatorSize.label,controller: _secondTabController,tabs: _secondTabs.map((value) => Container(padding: EdgeInsets.symmetric(horizontal: 20.w),child: Text(value.title))).toList(),onTap: (index) {},));}_secondTabView(){return TabBarView(//physics: const NeverScrollableScrollPhysics(),controller: _secondTabController,children: _secondTabs.map((value) {return MyExpCellBillHistory(type: _type,status: value.type);}).toList());}
}

头部布局

import 'package:jade/configs/PathConfig.dart';
import 'package:jade/homePage/promotion/promotionPost/MyPromotionProfitList.dart';
import 'package:jade/utils/JadeColors.dart';
import 'package:util/navigator_util.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';/*
* 列表头部
* */
Widget revenueWidget(){return Container(decoration: BoxDecoration(gradient: LinearGradient(colors: [JadeColors.gold_4,JadeColors.lightGrey,],begin: Alignment.topCenter, end: Alignment.bottomCenter)),child: Container(width: double.infinity,margin: EdgeInsets.all(20.w),padding: EdgeInsets.only(left: 40.w,top: 40.w,right: 40.w,bottom: 30.w),decoration: BoxDecoration(image: DecorationImage(image: AssetImage(PathConfig.imageBlackBg), fit: BoxFit.fill)),child: ListView(children: [Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('已入账金额（元）',style: TextStyle(fontSize: 28.sp,fontWeight: FontWeight.w600,color: JadeColors.gold_3)),SizedBox(height: 20.w),Text('178.00',style: TextStyle(fontSize: 54.sp,fontWeight: FontWeight.bold,color: JadeColors.gold_5)),],),GestureDetector(child: Container(width: 160.w,height: 60.w,alignment: Alignment.center,decoration: BoxDecoration(borderRadius: BorderRadius.circular(20),gradient: LinearGradient(colors: [JadeColors.gold_6,JadeColors.gold_7,],begin: Alignment.centerLeft, end: Alignment.centerRight)),child: Text('去钱包提现',style: TextStyle(color: Colors.black,fontSize: 24.sp,fontWeight: FontWeight.w600)),),)],),SizedBox(height: 50.w),Row(mainAxisAlignment: MainAxisAlignment.start,children: [Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text.rich(TextSpan(children: [TextSpan(text: '总收益（元）',style: TextStyle(fontSize: 22.sp,color: JadeColors.grey_18)),WidgetSpan(alignment: PlaceholderAlignment.middle,child: Image.asset(PathConfig.iconQuestionLinearBlack,width: 50.w,height: 50.w))])),Text('188.88',style: TextStyle(fontSize: 34.sp,fontWeight: FontWeight.w600,color: JadeColors.gold_5)),],),SizedBox(width: 140.w,),Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text.rich(TextSpan(children: [TextSpan(text: '待入账（元）',style: TextStyle(fontSize: 22.sp,color: JadeColors.grey_18)),WidgetSpan(alignment: PlaceholderAlignment.middle,child: Container(width: 50.w,height: 50.w))])),Text('10.00',style: TextStyle(fontSize: 34.sp,fontWeight: FontWeight.w600,color: JadeColors.gold_5)),],),],),Container(width: double.infinity,height: 1,margin: EdgeInsets.only(top: 35.w,bottom: 30.w),color: JadeColors.gold_8.withOpacity(0.4),),Center(child: Text.rich(TextSpan(children: [TextSpan(text: '收益明细',style: TextStyle(color: JadeColors.gold_4,fontSize: 24.sp),recognizer: TapGestureRecognizer()..onTap = () {NavigatorUtil.push(MyPromotionProfitList());}),WidgetSpan(alignment: PlaceholderAlignment.middle,child: Container(margin: EdgeInsets.only(left: 10.w,top: 8.w),child: Image.asset(PathConfig.iconNextBlack,width: 10.w,height: 18.w,color: JadeColors.gold_4,),))],)))],),),);
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/603969.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【Linux 学习】进程优先级和命令行参数！

【Linux 学习】进程优先级和命令行参数！

1. 什么是优先级? 指定进程获取某种资源&#xff08;CPU&#xff09;的先后顺序&#xff1b; Linux 中优先级数字越小&#xff0c;优先级越高&#xff1b; 1.1 优先级和权限的区别&#xff1f; 权限 &#xff1a; 能不能做 优先级&#xff1a; 已经能了&#xff0c;但是获…
阅读更多...
1653. 使字符串平衡的最少删除次数

1653. 使字符串平衡的最少删除次数

1653. 使字符串平衡的最少删除次数 题目 链接&#xff1a;使字符串平衡的最少删除次数 题解 class Solution {public int minimumDeletions(String s) {int left0,right0;int ns.length();for(int i0;i<n;i){if(s.charAt(i)a){right;}}int resright;for(int i0;i<s.…
阅读更多...
STM32学习笔记（11_1）- SPI简介和工作原理

STM32学习笔记（11_1）- SPI简介和工作原理

无人问津也好&#xff0c;技不如人也罢&#xff0c;都应静下心来&#xff0c;去做该做的事。 最近在学STM32&#xff0c;所以也开贴记录一下主要内容&#xff0c;省的过目即忘。视频教程为江科大&#xff08;改名江协科技&#xff09;&#xff0c;网站jiangxiekeji.com 本期学…
阅读更多...
Pytest接口自动化测试进阶

Pytest接口自动化测试进阶

背景 随着Web应用的发展&#xff0c;越来越多的功能需要用户登录才能使用。而在接口测试中&#xff0c;往往需要模拟用户的登录状态来进行测试。一种常见的做法是通过Cookie来维持用户的登录状态。然而&#xff0c;由于Cookie的有效期限制以及网站的安全策略&#xff0c;如何在…
阅读更多...
YOLOv5标签值含义根据标签将检测框色块替换（马赛克）

YOLOv5标签值含义根据标签将检测框色块替换（马赛克）

以一个检测人脸的图片为例&#xff1a; 检测后生成的标签txt如下&#xff0c; 此时&#xff0c;如何根据标签值将检测到的人脸同色块替换呢&#xff1f; 关键是获取检测框的左上角坐标和右下角坐标。 img Image.open(D:/PythonWokspace/JINX/datasets_transform/dataset/im…
阅读更多...
YUDAO源码中的正序倒序表格ElmentUI的实现，与后端的配合？

YUDAO源码中的正序倒序表格ElmentUI的实现，与后端的配合？

前端展示和实现&#xff1a; 1. elmentUI表格的定义 2. JS请求参数改造 <!-- 列表 --><el-table v-loading"loading" :data"list" sort-change"handleSortChange"><el-table-column label"Expiry Date" prop"…
阅读更多...
业主看完当场签约的神仙地产大屏，搞物业的你不来get同款么

业主看完当场签约的神仙地产大屏，搞物业的你不来get同款么

各行各业都有可视化大屏的应用场景&#xff0c;不少同志曾私戳我&#xff1a;能不能给我XX行业的大屏示例哇&#xff0c;我展示的指标领导怎么都不满意哇&#xff01; 于是俺在行业顾问大哥那苦苦哀求&#xff0c;终于给大家带来这个地产行业的“营销战图大屏”方案&#xff0…
阅读更多...
Linux函数学习 select

Linux函数学习 select

1、Linux select 函数 int select(int nfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct timeval *timeout); nfds 最大文件fd 1 readfds 监听可读文件集合fd writefds 监听可写文件集合fd exceptfd 监听异常文件集…
阅读更多...
Linux服务器上搭建深度学习环境（安装anaconda、创建虚拟环境、安装pytorch）

Linux服务器上搭建深度学习环境（安装anaconda、创建虚拟环境、安装pytorch）

Linux服务器的搭配 Linux服务器上安装anaconda创建虚拟环境linux上安装pytorchxshell连接服务器 Linux服务器上安装anaconda 链接 创建虚拟环境 参考教程&#xff1a;此处 linux上安装pytorch 链接 xshell连接服务器 链接
阅读更多...
Android获取连接到手机热点上的设备信息

Android获取连接到手机热点上的设备信息

主题&#xff1a;在手机开启热点网络的情况下&#xff0c;想要获取是哪个设备已经连接上了当前开启的热点。 实现思路&#xff1a;Android通过读取 /proc/net/arp 文件可以得到连接当前热点的设备信息&#xff0c;包括Mac地址、IP地址等信息。 一. 方法逻辑&#xff1a; /*** …
阅读更多...
Hadoop安装部署-NameNode高可用版

Hadoop安装部署-NameNode高可用版

Hadoop分布式文件系统支持NameNode的高可用性&#xff0c;本文主要描述NameNode多节点高可用性的安装部署。 如上所示&#xff0c;Hadoop分布式文件系统部署了NameNode的Master主节点以及NameNode的Slave副节点&#xff0c;当Master主节点发生故障变得不可用时&#xff0c;ZooK…
阅读更多...
【C语言】扫雷小游戏

【C语言】扫雷小游戏

文章目录 前言一、游戏玩法二、创建文件test.c文件menu()——打印菜单game()——调用功能函数&#xff0c;游戏的实现main()主函数 game.c文件初始化棋盘打印棋盘随机布置雷的位置统计周围雷的个数展开周围一片没有雷的区域计算已排查位置的个数排查雷(包括检测输赢): game.h文…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023