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