Flutter-仿携程首页类型切换

效果

唠叨

闲来无事,不小心下载了携程app,还幻想可以去旅游一番,奈何自己运气不好,自从高考时第一次吹空调导致自己拉肚子考试,物理,数学考了一半就交卷,英语2B铅笔除了问题,导致原来120多分变成50分,本来能上一本的我只能上个大专,家里没钱也不允许留级,只能去了最近比较火的宿迁学院,哈哈,只能自己在这里瞎写找理由了,哎,现在因为当初的运气不好导致现在专科找工作难的要死,虽然自考了本,奈何人家不要啊,不承认啊,简历只要被学习的本科前面加上自考2字压根没有面试,不加上到了最后交流水学历资料的时候又被卡死,这种情况遇到的太多太多,我现在的心情只能用一个诗来描述,那就是: 一句诗:”哎“

啥都不说了,直接上代码:

import 'package:flutter/material.dart';import '../../widgets/xy_app_bar.dart';class XieChengHomePage extends StatefulWidget {const XieChengHomePage({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() {return XieChengHomePageState();}
}class XieChengHomePageState extends State<XieChengHomePage> with TickerProviderStateMixin {late TabController tabController;List<String> tabs = ["飞机票","火车高铁票","公交车",];@overridevoid initState() {super.initState();tabController = TabController(length: 3, vsync: this);}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(backgroundColor: Colors.red,appBar: XYAppBar(title: "Trapezoid Indicator Example",onBack: () {Navigator.pop(context);},),body: Column(children: [Padding(padding:const EdgeInsets.symmetric(horizontal: 16, vertical: 16),child: CustomTabbarWidget(tabController: tabController,tabs: tabs,),),Expanded(child: TabBarView(controller: tabController,children: const [Center(child: Text('Tab 1 Content')),Center(child: Text('Tab 2 Content')),Center(child: Text('Tab 3 Content')),],),),],)),);}
}class CustomTabbarWidget extends StatefulWidget {final TabController tabController;final List<String> tabs;const CustomTabbarWidget({Key? key,required this.tabController,required this.tabs,}) : super(key: key);@overrideState<StatefulWidget> createState() {return CustomTabbarState();}
}class CustomTabbarState extends State<CustomTabbarWidget> {@overridevoid initState() {super.initState();widget.tabController.addListener(() {setState(() {});});}@overrideWidget build(BuildContext context) {return LayoutBuilder(builder: (context, constraints) {var tabWidth = constraints.maxWidth / widget.tabs.length;var currentWidth = tabWidth * 1.5;var offset =(constraints.maxWidth - currentWidth) / (widget.tabs.length - 1);return Container(width: constraints.maxWidth,child: Stack(children: [SizedBox(width: constraints.maxWidth,height: 60,),Positioned(bottom: 0,left: 0,right: 0,child: Container(height: 50,decoration: BoxDecoration(color: Colors.white.withAlpha(80),borderRadius: const BorderRadius.only(topLeft: Radius.circular(8),topRight: Radius.circular(8),),),child: Row(children: widget.tabs.asMap().keys.map((index) {return AnimatedContainer(duration: const Duration(milliseconds: 200),width: index == widget.tabController.index? currentWidth: offset,child: InkWell(key: ObjectKey(index),onTap: () {widget.tabController.animateTo(index);setState(() {});},child: Container(alignment: Alignment.center,child: Text(widget.tabs[index],style: const TextStyle(fontSize: 14),),),),);}).toList(),),),),AnimatedPositioned(duration: const Duration(milliseconds: 300),left: widget.tabController.index * offset,bottom: 0,child: IgnorePointer(child: ClipPath(clipper:TrapezoidClipper(tabController: widget.tabController),child: Container(height: 60,alignment: Alignment.center,width: currentWidth,decoration: const BoxDecoration(color: Colors.white,borderRadius: BorderRadius.only(topLeft: Radius.circular(8),topRight: Radius.circular(8)),),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Expanded(child: Center(child: Text(widget.tabs[widget.tabController.index],style: const TextStyle(fontSize: 18, color: Colors.blue),),),),TextUnderline(text: widget.tabs[widget.tabController.index],style: const TextStyle(fontSize: 18, color: Colors.blue),lineColor: Colors.blue,height: 4),],)),),),),],),);});}
}class TrapezoidClipper extends CustomClipper<Path> {TrapezoidClipper({required this.tabController});TabController tabController;@overridePath getClip(Size size) {var isLeft = tabController.index == 0;var isRight = tabController.index == tabController.length - 1;double inset = size.width * 0.1;double radius = 8.0;// path.moveTo(isLeft ? 0 : inset, 0);// path.lineTo(isRight ? size.width : size.width - inset, 0);// path.lineTo(size.width, size.height);// path.lineTo(0, size.height);final path = Path()..moveTo(radius, 0) // 移动到起始点..lineTo(size.width - radius, 0) // 顶边线..quadraticBezierTo(size.width, 0, size.width, radius) // 右上角圆角..lineTo(size.width, size.height - radius) // 右边线..quadraticBezierTo(size.width, size.height, size.width - radius, size.height) // 右下角圆角..lineTo(radius, size.height) // 底边线..quadraticBezierTo(0, size.height, 0, size.height - radius) // 左下角圆角..lineTo(0, radius) // 左边线..quadraticBezierTo(0, 0, radius, 0); // 左上角圆角path.close();return path;}@overridebool shouldReclip(CustomClipper<Path> oldClipper) => true;
}class TextUnderline extends StatelessWidget {const TextUnderline({Key? key,required this.text,required this.style,required this.lineColor,required this.height,}) : super(key: key);final String text;final TextStyle style;final Color lineColor;final double height;@overrideWidget build(BuildContext context) {final textPainter = TextPainter(text: TextSpan(text: text,style: style,),textDirection: TextDirection.ltr,);textPainter.layout();var textWidth = textPainter.width;return Container(width: textWidth,height: height,decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(height),),color: lineColor,),);}
}

github.com/yixiaolunhui/flutter_xy

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

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

相关文章

行政工作常用表格

企业管制制度大全https://www.chuandao100.com/279.html

JVM垃圾收集器你会选择吗?

目录 一、Serial收集器 二、ParNew收集器 三、Paralle Scavenge 四、Serial Old 五、Parallel Old 六、CMS收集器 6.1 CMS对处理器资源非常敏感 6.2 CMS容易出现浮动垃圾 6.3 产生内存碎片 七、G1 收集器 八、如何选择合适的垃圾收集器 JVM 垃圾收集器是Java虚…

生成模型概述

文章目录 生成模型概述一、生成模型类型二、生成对抗网络&#xff08;GANs&#xff09;三、自回归模型&#xff08;Autoregressive Models&#xff09;四、扩散模型&#xff08;Diffusion Models&#xff09;五、流模型&#xff08;Flow-based Models&#xff09;参考 生成模型…

【数据分享】1929-2023年全球站点的逐日平均海平面压力(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全球气象站…

CPP容器vector和list,priority_queue定义比较器

#include <iostream> #include <bits/stdc.h> using namespace std; struct VecCmp{bool operator()(int& a,int& b){return a>b;/*** 对于vector和list容器&#xff0c;这里写了&#xff1e;就是从大到小* 对于priority_queue容器&#xff0c;这里写…

【阅读论文】When Large Language Models Meet Vector Databases: A Survey

摘要 本调查探讨了大型语言模型&#xff08;LLM&#xff09;和向量数据库&#xff08;VecDB&#xff09;之间的协同潜力&#xff0c;这是一个新兴但迅速发展的研究领域。随着LLM的广泛应用&#xff0c;出现了许多挑战&#xff0c;包括产生虚构内容、知识过时、商业应用成本高昂…

【算法与数据结构】 C语言实现单链表队列详解

文章目录 &#x1f4dd;队列&#x1f320; 数据结构设计&#x1f309;初始化队列函数 &#x1f320;销毁队列函数&#x1f309;入队函数 &#x1f320;出队函数&#x1f309;获取队首元素函数 &#x1f320;获取队尾元素函数&#x1f309; 判断队列是否为空函数&#x1f309;获…

如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?

如何让标题1和标题2不一样&#xff1f; 修改根目录下的App.vue&#xff08;核心代码如下&#xff09; <script>export default {onLaunch() {// 监听各种跳转----------------------------------------[navigateTo, redirectTo, reLaunch, switchTab, navigateBack, ].…

Leetcode 226. 翻转二叉树

心路历程&#xff1a; 翻转一瞬间没什么思路&#xff0c;其实就是挨个把每个结点的左右子树都翻转了。主要不要按照左右子树去思考&#xff0c;要按照结点去思考。 翻转既可以从上到下翻转&#xff08;前序遍历&#xff09;&#xff0c;也可以从下到上翻转&#xff08;后序遍历…

等保测评-Windows服务器

安全计算环境 身份鉴别 a)应对登录的用户进行身份标识和鉴别&#xff0c;身份标识具有唯一性&#xff0c;身份鉴别信息具有复杂度要求并定期更换 winr //运行 secpol.msc //本地安全策略&#xff0c;点击账户策略中的密码策略 注意修改的时候确保当前密码是满足条件的 b)应…

应急响应-Linux(1)

应急响应-Linux(1) 黑客的IP地址 思路&#xff1a; 一般系统中马之后会有进程连接黑客的主机&#xff0c;可以使用netstat -anpt查看下当前进程的连接&#xff0c;此处查看到没有后 &#xff0c;可以从系统服务开始查找&#xff0c;系统的服务日志一般都会保存相关访问信息&…

idea 没有代码提示解决方法

itellij idea 没有代码提示解决方法 今天写代码发现没有代码提示了&#xff0c;很难受。 直接上解决方法 设置 File-Settings-Editor-General-Code Completion&#xff1a;勾选Show suggestrions as you type 我的是这个问题&#xff0c;勾选上就ok了 取消节能模式 如果…

智慧公园:AI智能分析网关V4城市公园视频智能监管方案

一、背景分析 随着天气渐渐转暖&#xff0c;城市公园的花卉也逐渐盛开&#xff0c;春暖花开时节&#xff0c;前往公园赏花游玩的城市居民也渐渐多起来&#xff0c;因此安全问题也成为相关监管部门的重要管理任务之一。随着科技的不断进步&#xff0c;智能监控技术已经成为现代…

WPS制作甘特图

“ 甘特图&#xff08;Gantt chart&#xff09;又称为横道图、条状图&#xff08;Bar chart&#xff09;&#xff0c;通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。” 设置基础样式 设置行高 设置宽度 准备基础数据 计算持续时间 …

.NET Core 服务实现监控可观测性最佳实践

前言 本次实践主要是介绍 .Net Core 服务通过无侵入的方式接入观测云进行全面的可观测。 环境信息 系统环境&#xff1a;Kubernetes编程语言&#xff1a;.NET Core ≥ 2.1日志框架&#xff1a;Serilog探针类型&#xff1a;ddtrace 接入方案 准备工作 DataKit 部署 DataK…

【MySQL】MVCC多版本并发控制

MVCC&#xff08;Multi-Version Concurrency Control&#xff09; 多版本并发控制&#xff0c;用于解决数据库并发访问中&#xff0c;数据一致性问题。它通过在读写操作期间保存多个数据版本&#xff0c;以提供并发事务间的隔离性&#xff0c;从而避免了传统的锁机制所带来的资…

2024-03-23 问AI: 介绍一下深度学习中的ReLU函数

文心一言 ReLU&#xff08;Rectified Linear Unit&#xff09;函数是深度学习领域中常用的一种激活函数。它具有简单、计算高效且在某些情况下能有效缓解梯度消失问题等优点&#xff0c;因此在神经网络中得到了广泛的应用。 ReLU函数的定义非常简单&#xff0c;其数学表达式为…

MapReduce学习问题记录

1、如何跳过对某行数据的处理 第一行数据是字段名不需要处理&#xff0c;我们知道第一行偏移量是0&#xff08;行记录的时候是从数组首地址开始&#xff0c;到了行标识符进行一次计数&#xff0c;这个计数就是行偏移量&#xff0c;从0开始&#xff09;&#xff0c;我们根据偏移…

1+x中级题目练习复盘(八)

SQL 语句中进行 group by 分组时&#xff0c;可以不写 where 子句 在使用 select 语句进行查询分组时&#xff0c;如果希望去掉不满足条件的分组&#xff0c;使用 having 子句File 类的 isDirectory() 方法可以判断文件是否为目录 在使用 select 语句进行查询分组时&#xff0…

基于Matlab的眼底图像血管分割,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…