flutter TabBar自定义指示器(带文字的指示器、上弦弧形指示器、条形背景指示器、渐变色的指示器)

带文字的TabBar指示器
在这里插入图片描述

在这里插入图片描述

1.绘制自定义TabBar的绿色带白色文字的指示器
2.将底部灰色文字与TabrBar层叠，并调整高度位置与胶囊指示器重叠

自定义的带文字的TabBar指示器

import 'package:atui/jade/utils/JadeColors.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';class MyCustomTextIndicator extends Decoration {final String text;const MyCustomTextIndicator({@required this.text});@overrideBoxPainter createBoxPainter([VoidCallback onChanged]) {return _CustomTabIndicatorPainter(text: text);}
}class _CustomTabIndicatorPainter extends BoxPainter {final String text;_CustomTabIndicatorPainter({@required this.text});@overridevoid paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {final rect = Rect.fromLTWH(offset.dx - 40.w,configuration.size.height - 60.w,configuration.size.width + 80.w,25,);final _gradientColors = [JadeColors.green_16, JadeColors.green_12];final paint = Paint()..shader = LinearGradient(colors: _gradientColors).createShader(rect);canvas.drawRRect(RRect.fromRectAndRadius(rect, Radius.circular(15)), paint);final _textPainter = TextPainter(text: TextSpan(text: text, style: TextStyle(color: Colors.white,fontSize: 22.sp,fontWeight: FontWeight.bold)),textDirection: TextDirection.ltr,);_textPainter.layout();_textPainter.paint(canvas, Offset(rect.left + (rect.width - _textPainter.width) / 2, rect.top + (rect.height - _textPainter.height) / 2));canvas.save();canvas.restore();}
}

引用：

//tabBar标签tab数据
List<Map<String, dynamic>> _tabs = [{'title': '严选', 'subTitle': '品质优选','range': 41},{'title': '优惠', 'subTitle': '阿推优惠','range': 42},{'title': '进口', 'subTitle': '阿推国际','range': 43},{'title': '推享金', 'subTitle': '排行榜','range': 45},];_tabBar(){return Stack(alignment: Alignment.bottomCenter,children: [Padding(padding: EdgeInsets.only(bottom: 20.w),child: Wrap(alignment: WrapAlignment.start,spacing: 40.w,runSpacing: 0,children: List.generate(_tabs.length, (index) {return Container(alignment: Alignment.center,width: 124.w,child: Text('${_tabs[index]['subTitle']}',style: TextStyle(color:  JadeColors.grey,fontSize: 22.sp,fontWeight: FontWeight.bold),),);}),)),Container(padding: EdgeInsets.symmetric(horizontal: 40.w),child: TabBar(controller: _tabController,isScrollable: false,labelPadding: EdgeInsets.only(left: 10,right: 10,bottom: 10.w),indicator: MyCustomTextIndicator(text: _tabs[_currentIndex]['subTitle']),indicatorWeight: 60.w,labelColor: JadeColors.black,labelStyle: TextStyle(fontSize: 34.sp,fontWeight: FontWeight.bold,),unselectedLabelColor: JadeColors.black,unselectedLabelStyle: TextStyle(fontSize: 34.sp,fontWeight: FontWeight.bold,),indicatorSize: TabBarIndicatorSize.label,tabs: _tabs.map((e) => Text(e['title'])).toList(),onTap: (index) {setState(() {_currentIndex = index;});print('_currentIndex= $_currentIndex');},)),],);}_tabBarView(){return TabBarView(controller: _tabController,physics: const AlwaysScrollableScrollPhysics(),children: _tabs.map((e) {return MarketGoodsListPage(range: e['range']);}).toList());}

上弦的弧形TabBar指示器

在这里插入图片描述
自定义指示器

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';/*
* 自定义的上弦圆弧TabBar指示器
* */
class MyCustomArcIndicator extends Decoration {@overrideBoxPainter createBoxPainter([VoidCallback onChanged]) {return _CustomBoxPainter(this, onChanged);}
}class _CustomBoxPainter extends BoxPainter {final MyCustomArcIndicator decoration;_CustomBoxPainter(this.decoration, VoidCallback onChanged): super(onChanged);@overridevoid paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {final size = configuration.size;final newOffset = Offset(offset.dx + size.width / 2 - 10.w, size.height / 4);var paint = Paint();double rowHeight = 12;paint.strokeWidth = rowHeight / 4;paint.style = PaintingStyle.stroke;Path path = Path();Rect rect = Rect.fromLTWH(newOffset.dx, newOffset.dy + rowHeight / 2, rowHeight, rowHeight);path.arcTo(rect, pi / 4,pi / 2, true);paint.color = Color(0xFF56CEBA);paint.strokeCap = StrokeCap.round;paint.style = PaintingStyle.stroke;canvas.drawPath(path, paint);}
}

引用：

_tabBar(){return TabBar(isScrollable: true,labelPadding: EdgeInsets.only(left: 10,right: 10,bottom: 10.w),indicator: MyCustomArcIndicator(),labelColor: JadeColors.black,labelStyle: TextStyle(fontSize: 36.sp,fontWeight: FontWeight.w600,),unselectedLabelColor: Color(0xff333333),unselectedLabelStyle: TextStyle(fontSize: 36.sp,),indicatorSize: TabBarIndicatorSize.label,controller: providerOf<MainModel>().tabController,tabs: MainModel.catList().map((e) => Text(e['name'])).toList(),onTap: (index) {providerOf<MainModel>().currentTabIndex = index;if(index == 7){Provider.of<RewardPoolModel>(context, listen: false).searchMoneyData();}},);}

普通的TabBar自定义指示器
图1：
在这里插入图片描述
图2：
在这里插入图片描述
自定义指示器

import 'package:flutter/material.dart';class MyCustomIndicator extends Decoration {final double indWidth;final double indHeight;final double radius;final List<Color> indicatorColor;const MyCustomIndicator({this.indWidth = 70.0, this.indHeight = 12.0, this.radius = 5, @required this.indicatorColor});@overrideBoxPainter createBoxPainter([VoidCallback onChanged]) {return _CustomBoxPainter(this, onChanged, indWidth, indHeight, radius, indicatorColor);}
}class _CustomBoxPainter extends BoxPainter {final MyCustomIndicator decoration;final double indWidth;final double indHeight;final double radius;final List<Color> indicatorColor;_CustomBoxPainter(this.decoration, VoidCallback onChanged, this.indWidth, this.indHeight, this.radius,this.indicatorColor): super(onChanged);@overridevoid paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {final size = configuration.size;final newOffset = Offset(offset.dx + (size.width - indWidth) / 2, size.height - indHeight);final Rect rect = newOffset & Size(indWidth, indHeight);final Paint paint = Paint();if(indicatorColor == null || indicatorColor.isEmpty){paint.color = Colors.yellow;}else{if(indicatorColor.length == 1){paint.color = indicatorColor[0];}else if(indicatorColor.length > 1){paint.shader =LinearGradient(colors: indicatorColor, begin: Alignment.centerLeft, end: Alignment.centerRight).createShader(rect);}}paint.style = PaintingStyle.fill;canvas.drawRRect(RRect.fromRectAndRadius(rect, Radius.circular(radius)), // 圆角半径paint,);canvas.save();canvas.restore();}
}

图1效果的引用：

_tabBarView(){return Container(color: Colors.white,child: TabBar(isScrollable: false,labelPadding: EdgeInsets.symmetric(horizontal: 0),indicator: MyCustomIndicator(indicatorColor: [Colors.yellow]),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) {},),);}

图2效果的引用：

TabBar(tabs: tabs,isScrollable: false,unselectedLabelColor: const Color(0xFF000000),labelStyle: TextStyle(fontWeight: FontWeight.bold),labelColor: const Color(0xFF000000),indicatorSize: TabBarIndicatorSize.label,indicator: MyCustomIndicator(indicatorColor: [JadeColors.red,JadeColors.yellow],indHeight: 8.w,indWidth: 92.w),controller: _tabController,)

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

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

相关文章

用户界面设计：视觉美学与交互逻辑的融合

用户界面设计：视觉美学与交互逻辑的融合

1、什么是用户界面 用户界面&#xff08;UI&#xff09;是人与机器之间沟通的桥梁&#xff0c;同时也是用户体验&#xff08;UX&#xff09;的重要组成部分。用户界面设计包括两个核心要素&#xff1a;视觉设计&#xff08;即产品的外观和感觉&#xff09;和交互设计&#xff…
阅读更多...
【JavaEE初阶】深入理解TCP协议中的封装分用以及UDP和TCP在网络编程的区别

【JavaEE初阶】深入理解TCP协议中的封装分用以及UDP和TCP在网络编程的区别

前言 &#x1f31f;&#x1f31f;本期讲解关于TCP/UDP协议的原理理解~~~ &#x1f308;上期博客在这里&#xff1a;【JavaEE初阶】入门视角-网络原理的基础理论的了解-CSDN博客 &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; …
阅读更多...
Android Framework AMS（09）service组件分析-3(bindService和unbindService关键流程分析)

Android Framework AMS（09）service组件分析-3(bindService和unbindService关键流程分析)

该系列文章总纲链接&#xff1a;专题总纲目录 Android Framework 总纲 本章关键点总结 & 说明&#xff1a; 说明&#xff1a;上上一章节主要解读应用层service组件启动的2种方式startService和bindService&#xff0c;以及从APP层到AMS调用之间的打通。上一章节我们关注了s…
阅读更多...
K-means 算法、层次聚类、密度聚类对鸢尾花（Iris）数据进行聚类

K-means 算法、层次聚类、密度聚类对鸢尾花（Iris）数据进行聚类

目录 1.基础知识 1.1 K-Means 算法 1.2 层次聚类&#xff08;Hierarchical Clustering&#xff09; 1.3 密度聚类&#xff08;DBSCAN&#xff09; 1.4 距离和相似度度量方法 1.5 总结&#xff1a; 2.K-means 算法对鸢尾花&#xff08;Iris&#xff09;数据进行聚类 2.1…
阅读更多...
【动手学电机驱动】TI InstaSPIN-FOC（5）Lab04 电机力矩闭环控制

【动手学电机驱动】TI InstaSPIN-FOC（5）Lab04 电机力矩闭环控制

TI InstaSPIN-FOC&#xff08;1&#xff09;电机驱动和控制测试平台 TI InstaSPIN-FOC&#xff08;2&#xff09;Lab01 闪灯实验 TI InstaSPIN-FOC&#xff08;3&#xff09;Lab03a 测量电压电流漂移量 TI InstaSPIN-FOC&#xff08;4&#xff09;Lab02b 电机参数辨识 TI Insta…
阅读更多...
智慧供排水管网在线监测为城市安全保驾护航

智慧供排水管网在线监测为城市安全保驾护航

一、方案背景 随着城市化进程的不断推进&#xff0c;城市供排水管网作为城市基础设施的关键组成部分&#xff0c;其安全稳定的运行对于确保城市居民的日常生活、工业生产活动以及整个生态环境的健康具有至关重要的作用。近年来&#xff0c;由于各种原因&#xff0c;城市供排水管…
阅读更多...
Mycat 详细介绍及入门实战，解决数据库性能问题

Mycat 详细介绍及入门实战，解决数据库性能问题

一、基本原理 1、数据分片 &#xff08;1&#xff09;、水平分片 Mycat 将一个大表的数据按照一定的规则拆分成多个小表&#xff0c;分布在不同的数据库节点上。例如&#xff0c;可以根据某个字段的值进行哈希取模&#xff0c;将数据均匀的分布到不同的节点上。 这样做的好处…
阅读更多...
安卓开发中轮播图和其指示器的设置

安卓开发中轮播图和其指示器的设置

在安卓开发中&#xff0c;轮播图&#xff08;Carousel&#xff09;是一种常见的UI组件&#xff0c;用于展示一系列图片或内容&#xff0c;用户可以左右滑动来切换不同的视图。轮播图通常用于展示广告、新闻、产品图片等。 轮播图的指示器&#xff08;Indicator&#xff09;则是…
阅读更多...
k3s安装指定版本以及离线安装（docker)

k3s安装指定版本以及离线安装（docker)

首先下载你所需要版本的k3s安装包&#xff0c;目录结构如下所示&#xff0c;我这里是v1.19.15k3s2。 1.首先赋予可执行权限后进行安装。 # k3s 需要赋予可执行权限 sudo chmod x k3s sudo chmod x k3s-install.sh2.然后将k3s的二进制文件复制到/usr/local/bin/ cp k3s /us…
阅读更多...
【Kafka】Kafka源码解析之producer过程解读

【Kafka】Kafka源码解析之producer过程解读

从本篇开始 打算用三篇文章 分别介绍下Producer生产消费&#xff0c;Consumer消费消息 以及Spring是如何集成Kafka 三部分&#xff0c;致于对于Broker的源码解析&#xff0c;因为是scala语言写的&#xff0c;暂时不打算进行学习分享。 总体介绍 clients : 保存的是Kafka客户端…
阅读更多...
华为携手竹云发布海外一网通办解决方案，助力海外政务数智化发展

华为携手竹云发布海外一网通办解决方案，助力海外政务数智化发展

10月14日&#xff0c;第44届GITEX GLOBAL展会&#xff08;GITEX GLOBAL 2024&#xff09;在迪拜世界贸易中心盛大开幕。作为全球最具影响力的科技和创业盛会之一&#xff0c;本届活动吸引180多个国家的6500余家全球知名企业集聚迪拜&#xff0c;展示涵盖人工智能、网络安全、移…
阅读更多...
【Linux】解答：为什么创建目录文件，硬链接数是2；创建普通文件时，硬链接数是1？（超详细图文）

【Linux】解答：为什么创建目录文件，硬链接数是2；创建普通文件时，硬链接数是1？（超详细图文）

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Lin…
阅读更多...
spring boot热部署

spring boot热部署

使用热部署解决了每次都需要重新启动的问题&#xff0c;但不过热部署的在对于改动比较小时速度可能快一些&#xff0c;改动大的话尽量停止 1.使用热部署之前需要在pom.xml文件中导入依赖 <dependency><groupId>org.springframework.boot</groupId><artifa…
阅读更多...
DS链式二叉树的遍历(11)

DS链式二叉树的遍历(11)

文章目录 前言一、链式二叉树的结构结构定义手动搭建 二、二叉树的遍历三种常见遍历(前序、中序、后序)层序遍历 总结 前言 堆是特殊的二叉树&#xff0c;可二叉树本身也很值得研究~   正文开始&#xff01; 一、链式二叉树的结构 前文也提到了二叉树一共有两种&#xff0c;空…
阅读更多...
人工智能创造出大量新型蛋白质

人工智能创造出大量新型蛋白质

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
【线性回归分析】：基于实验数据的模型构建与可视化

【线性回归分析】：基于实验数据的模型构建与可视化

目录 线性回归分析&#xff1a;基于实验数据的模型构建与可视化 1. 数据准备 2. 构建线性回归模型 3. 可视化 数据分析的核心 构建预测模型 应用场景 预测模型中的挑战 结论 线性回归分析&#xff1a;基于实验数据的模型构建与可视化 在数据分析领域&#xff0c;线性…
阅读更多...
《拿下奇怪的前端报错》：1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点

《拿下奇怪的前端报错》：1比特丢失导致的音视频播放时长无限增长-浅析http分片传输核心和一个坑点

问题背景 在一个使用MongoDB GridFS实现文件存储和分片读取的项目中&#xff0c;同事遇到了一个令人困惑的问题&#xff1a;音频文件总是丢失最后几秒&#xff0c;视频文件也出现类似情况。更奇怪的是&#xff0c;播放器显示的总时长为无限大。这个问题困扰了团队成员几天&…
阅读更多...
wps安装教程

wps安装教程

WPS office完整版是一款由金山推出的免费办公软件&#xff0c;软件小巧安装快&#xff0c;占用内存极小&#xff0c;启动速度快。WPS office完整版包含WPS文字、WPS表格、WPS演示三大功能模块&#xff0c;让我们轻松办公。WPS的功能是依据OFFICE用户的使用习惯而设计&#xff0…
阅读更多...
Java5.--继承-重写-多态

Java5.--继承-重写-多态

笔记暂未整理&#xff1a; 一、面向对象的第二大特征&#xff1a;继承 1.分类&#xff1a;业务封装 功能封装 2.作用 封装-->属性的安全&#xff01; 继承-->重用----重用代码&#xff08;属性方法&#xff09; 多态-->扩展 3.实现继承的步骤 ①从多个相似的类中…
阅读更多...
OpenShift 4 - 云原生备份容灾 - Velero 和 OADP 基础篇

OpenShift 4 - 云原生备份容灾 - Velero 和 OADP 基础篇

《OpenShift 4.x HOL教程汇总》 说明&#xff1a; 本文主要说明能够云原生备份容灾的开源项目 Velero 及其红帽扩展项目 OADP 的概念和架构篇。操作篇见《OpenShift 4 - 使用 OADP 对容器应用进行备份和恢复&#xff08;附视频&#xff09; 》 Velero 和 OADP 包含的功能和模…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023