当前位置: 首页 > news >正文

flutter 绘制右上角圆角三角形标签

在这里插入图片描述
绘制:

import 'package:jade/utils/JadeColors.dart';
import 'package:flutter/material.dart';
import 'dart:math' as math;class LabelTopRightYellow extends StatefulWidget {final String labelTitle; // 只能两个字的(文字偏移量没有根据文字长度改变)const LabelTopRightYellow({ this.labelTitle});State<StatefulWidget> createState() {return LabelViewState();}
}class LabelViewState extends State<LabelTopRightYellow> with SingleTickerProviderStateMixin {Widget build(BuildContext context) {return CustomPaint(painter: ArcPainter(labelTitle: widget.labelTitle),size: Size(35,35), // 调整大小以适应你的需求);}
}class ArcPainter extends CustomPainter {//标签文字String labelTitle;ArcPainter({this.labelTitle});void paint(Canvas canvas, Size size) {double originX = 0.0 ;double originY = 0.0 ;double cx = size.width / 2;double cy = size.height / 2;Paint _paint = Paint()..color = Color(0xffFFE50F)..strokeWidth = 2//画笔是线段(默认是fill填充)/*..style = PaintingStyle.stroke*/;// canvas.drawCircle(Offset(cx,cy), 2, _paint);Path path = Path();// 绘制圆锥路径 权重越大路径越接近直角(不使用path.moveTo时,默认起点为左上角)path.conicTo(originX + size.width, originY, originX + size.width, originY+ size.height, 10);// 控制路径是否闭合,可不写path.close();canvas.drawPath(path, _paint);canvas.save();canvas.restore();TextPainter textPainterCenter = TextPainter(text: TextSpan(text: labelTitle, style: TextStyle(color: Color(0xff333333),fontSize: 10)),textDirection: TextDirection.ltr,);textPainterCenter.layout();canvas.rotate(math.pi / 4);canvas.translate(-math.pi , -((cy - math.pi)  * 2));textPainterCenter.paint(canvas, Offset(cx /*- textPainterCenter.size.width / 2*/,cy - textPainterCenter.size.height / 4));canvas.save();canvas.restore();}/// 度数转类似于π的那种角度double degToRad(double deg) => deg * (math.pi / 180.0);bool shouldRepaint(covariant CustomPainter oldDelegate) {return true;}
}

引用:

Container(height: 180.wmargin: EdgeInsets.symmetric(horizontal: 20.w),padding: EdgeInsets.only(left: 20.w),decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(8),boxShadow: [BoxShadow(color: JadeColors.grey_4,blurRadius: 2.0,offset: Offset(0.0, 0.0),)]),child: Column(children: [_userView(),SizedBox(height: 20.w),_productView(),_countdownView()],),)
_userView(){return Stack(alignment: Alignment.topRight,children: [Row(children: [Container(width: 70.w,height: 70.w,margin: EdgeInsets.only(right: 20.w),child: Utils().roundedImage(PathConfig.testImageUrl[3], 70),),Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Text('商户商户商户商户',style: TextStyle(fontSize: 30.sp,color: JadeColors.grey_2,fontWeight: FontWeight.w600),maxLines: 1,overflow: TextOverflow.ellipsis,),Text('10分钟前',style: TextStyle(fontSize: 22.sp,color: JadeColors.grey))],))],),LabelTopRightYellow(labelTitle: S.current.cuxiao,)],);}

相关文章:

flutter 绘制右上角圆角三角形标签

绘制&#xff1a; import package:jade/utils/JadeColors.dart; import package:flutter/material.dart; import dart:math as math;class LabelTopRightYellow extends StatefulWidget {final String labelTitle; // 只能两个字的&#xff08;文字偏移量没有根据文字长度改变…...

C/C++输出整数部分 2021年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C输出整数部分 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C输出整数部分 2021年12月 C/C编程等级考试一级编程题 一、题目要求 1、编程实现 输入一个双精度浮点数f&#xff0c; 输出其整…...

通过20天预测7天

训练集和测试集如何划分&#xff0c;我如何知道期望和实际的对比。 当你希望通过过去20天的数据来预测未来7天时&#xff0c;你需要进行以下步骤&#xff1a; 1. **数据准备&#xff1a;** 将过去20天的数据整理成合适的格式&#xff0c;其中包括20天的特征和未来7天的目标。…...

【python】均值、中值和高斯滤波详解和示例

本文对均值、中值和高斯滤波进行详解&#xff0c;以帮助大家理解和使用。 这里写目录标题 均值滤波中值滤波高斯滤波核大小为&#xff08;9,9&#xff09;核大小为&#xff08;51,51&#xff09; 小结 下面是示例中使用的原图。 均值滤波 均值滤波是一种简单的平滑滤波器&…...

基于STM32的循迹小车项目实战

循迹小车是一种能够沿着预定路线行驶的智能小车&#xff0c;通过巡线传感器检测路面的线路&#xff0c;并根据检测结果调整行驶方向。本项目将基于STM32微控制器实现一个简单的循迹小车&#xff0c;通过学习和实践&#xff0c;帮助初学者熟悉STM32的开发流程和掌握循迹小车的实…...

Element UI 偶发性图标乱码问题

1. 问题如图所示 2. 原因&#xff1a;sass版本低 sass: 1.26.8 sass-loader: 8.0.2 3. 解决方法 (1) 提高sass版本 (2) 在vue.config.js中添加配置 css: {loaderOptions: {sass: {sassOptions: {outputStyle: expanded}}}},4. 遇到的问题 升级后打包&#xff0c;报错 Syntax…...

UniApp中的数据存储与获取指南

目录 介绍 数据存储方案 1. 本地存储 2. 数据库存储 3. 网络存储 实战演练 1. 本地存储实例 2. 数据库存储实例 3. 网络存储实例 注意事项与最佳实践 结语 介绍 在移动应用开发中&#xff0c;数据的存储和获取是至关重要的一部分。UniApp作为一款跨平台应用开发框架…...

VUE基础的一些实战总结

目录 创建一个 Vue 应用 步骤 1&#xff1a;安装 Node.js 和 npm 步骤 2&#xff1a;安装 Vue CLI 步骤 3&#xff1a;创建 Vue 项目 步骤 4&#xff1a;启动开发服务器 步骤 5&#xff1a;访问应用程序 步骤 6&#xff1a;编辑 Vue 应用 步骤 7&#xff1a;构建和部署…...

【算法】算法题-20231117

这里写目录标题 一、搜索插入位置&#xff08;35&#xff09;二、字符串相乘&#xff08;43&#xff09;三、两个相同字符之间的最长子字符串&#xff08;1624&#xff09;四、给你一个 有效括号字符串 s&#xff0c;返回该字符串的 s 嵌套深度 一、搜索插入位置&#xff08;35…...

轮播图(多个一起轮播)

效果图 class MainActivity : Activity(), Runnable {private lateinit var viewPager: ViewPagerprivate lateinit var bannerAdapter: BannerAdapterprivate val images ArrayList<Int>() // 存储图片资源的列表private val handler Handler() // 用于定时发送消息…...

OpenCV中的像素重映射原理及实战分析

引言 映射是个数学术语&#xff0c;指两个元素的集之间元素相互“对应”的关系&#xff0c;为名词。映射&#xff0c;或者射影&#xff0c;在数学及相关的领域经常等同于函数。 基于此&#xff0c;部分映射就相当于部分函数&#xff0c;而完全映射相当于完全函数。 说的简单点…...

如何快速搭建Spring Boot接口调试环境并实现公网访问

文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址…...

简单的用Python实现一下,采集某牙视频,多个视频翻页下载

前言 表弟自从学会了Python&#xff0c;每天一回家就搁那爬视频&#xff0c;不知道的以为是在学习&#xff0c;结果我昨天好奇看了一眼&#xff0c;好家伙&#xff0c;在那爬某牙舞蹈区&#xff0c;太过分了&#xff01; 为了防止表弟做坏事&#xff0c;我连忙找了个凳子坐下&…...

【手撕数据结构】二分查找(好多细节)

&#x1f308;键盘敲烂&#xff0c;年薪30万&#x1f308; 目录 普通版本的二分查找&#xff1a; right只负责控制边界(少了两次比较)&#xff1a; 时间复杂度更稳定的版本&#xff1a; BSLeftmost&#xff1a; BSRightmost&#xff1a; 普通版本的二分查找&#xff1a; …...

Python+Selenium WebUI自动化框架 -- 基础操作封装

前言&#xff1a; 封装Selenium基本操作&#xff0c;让所有页面操作一键调用&#xff0c;让UI自动化框架脱离高成本、低效率时代&#xff0c;将用例的重用性贯彻到极致&#xff0c;让烦人的PO模型变得无所谓&#xff0c;让一个测试小白都能编写并实现自动化。 知识储备前提&a…...

PyCharm 【unsupported Python 3.1】

PyCharm2020.1版本&#xff0c;当添加虚拟环境发生异常&#xff1a; 原因&#xff1a;Pycharm版本低了&#xff01;不支持配置的虚拟环境版本 解决&#xff1a;下载PyCharm2021.1版本&#xff0c;进行配置成功&#xff01;...

flutter TabBar指示器

第一层tabView import package:jade/configs/PathConfig.dart; import package:jade/customWidget/MyCustomIndicator.dart; importpackage:jade/homePage/promotion/promotionPost/MyPromotionListMainDesc.dart; import package:jade/homePage/promotion/promotionPost/MyPr…...

PDF/X、PDF/A、PDF/E:有什么区别,为什么有这么多格式?

PDF 是一种通用文件格式&#xff0c;允许用户演示和共享文档&#xff0c;无论软件、硬件或操作系统如何。多年来&#xff0c;已经创建了多种 PDF 子类型来满足各个行业的不同需求。让我们看看一些最流行的格式&#xff1a;PDF/X、PDF/A 和 PDF/E。 FastReport .net下载 PDF/X …...

Microsoft发布了一份关于其产品安全修复的 11 月报告。

&#x1f47e; 平均每天有 50 多个漏洞被发现&#xff0c;其中一些会立即被网络犯罪分子利用。我们把那些现在很受网络犯罪分子欢迎&#xff0c;或者根据我们的预测&#xff0c;在不久的将来可能会被大量利用的漏洞称为趋势漏洞。 在攻击者开始利用这些漏洞之前 12 小时&#…...

12v24v60v高校同步降压转换芯片推荐

12V/24V/60V 高校同步降压转换芯片推荐&#xff1a; 对于需要高效、稳定、低噪音的降压转换芯片&#xff0c;推荐使用WD5030E和WD5105。这两款芯片都是采用同步整流技术&#xff0c;具有高效率、低噪音、低功耗等优点&#xff0c;适用于各种电子设备。 WD5030E是一款高效率…...

【从零开始学Java | 第二十五篇】TreeSet

目录 前言 一、TreeSet的特点 二、TreeSet集合默认的规则 1.默认排序/自然排序 2.比较器排序 总结 前言 在 Java 的集合框架中&#xff0c;Set 接口代表了一个不允许存在重复元素的集合。我们最常用的通常是 HashSet&#xff0c;因为它提供了极高的查找和插入效率。但是&…...

ISO-SLAM-seq:全长 RNA代谢测序服务

ISO-SLAM-seq 技术&#xff0c;是 SLAM-seq 与 ISO-seq 的结合&#xff0c;通过研发成熟的核苷类似物 4-硫尿苷 (S4U) 代谢 RNA 标记方法和基于 Oxford Nanopore Technology 纳米孔测序平台或者 PacBio 的三代全长转录组测序方法&#xff0c;ISO-SLAM-seq 能检测整合到总 RNA 中…...

免死金牌: OpenClaw + keepalived

文章目录背景解决方案查看IP检测脚本keepalived 配置演练故障openclaw-gateway.service背景 问题来自 小龙虾自杀, 当我让 OpenClaw 更新一些配置时, 它执行了一条 openclaw gateway stop 命令, 导致 OpenClaw 服务停止, 然后我就干瞪眼了, 还在傻等, 它甚至一句分别的话都没有…...

DietPi开发者工具链终极指南:Git、VSCodium、PHP Composer一站式配置

DietPi开发者工具链终极指南&#xff1a;Git、VSCodium、PHP Composer一站式配置 【免费下载链接】DietPi Lightweight justice for your single-board computer! 项目地址: https://gitcode.com/gh_mirrors/di/DietPi DietPi作为轻量级的单板计算机系统&#xff0c;为开…...

GitHub被封杀后:开源难民在区块链的逃亡

对于全球软件开发者而言&#xff0c;GitHub不仅是代码仓库&#xff0c;更是数字时代的公共广场与精神家园。然而&#xff0c;近年来一系列地缘政治风波与技术壁垒&#xff0c;使得这片曾经自由的土地不断竖起高墙。从伊朗、俄罗斯开发者账号的全面封禁&#xff0c;到针对特定IP…...

制造业上线Agent,能获得哪些核心价值?——2026工业AI从“辅助决策”迈向“全自主执行”的深度解析

站在2026年这个时间节点回望&#xff0c;制造业的数字化转型已完成了从“数据上云”到“智能入链”的惊人跨越。如果说过去十年的工业互联网核心是解决“连接”问题&#xff0c;那么2026年全面爆发的AI Agent&#xff08;智能体&#xff09;则彻底解决了“执行”问题。在当前的…...

Tealdeer终极指南:5分钟掌握命令行工具的快速使用技巧

Tealdeer终极指南&#xff1a;5分钟掌握命令行工具的快速使用技巧 【免费下载链接】tealdeer A very fast implementation of tldr in Rust. 项目地址: https://gitcode.com/gh_mirrors/te/tealdeer Tealdeer是一个基于Rust语言开发的极速tldr客户端实现&#xff0c;为命…...

BES-XGBoost多变量时间序列预测的‘秃鹰搜索优化算法‘与交叉验证抑制过拟合问题的Mat...

基于秃鹰搜索优化算法优化XGBoost(BES-XGBoost)的多变量时间序列预测 BES-XGBoost多变量时间序列 采用交叉验证抑制过拟合问题 优化参数为迭代次数、最大深度和学习率 matlab代码&#xff0c;注&#xff1a;暂无Matlab版本要求 -- 推荐 2016B 版本及以上 注&#xff1a;采用 XG…...

从零构建极简大语言模型:MiniLLMDemo 原理与实现详解

一、项目背景与核心价值 在LLM技术快速迭代的今天&#xff0c;理解底层原理比调用API更重要。本文将带您用200行代码实现一个可运行的极简大模型MiniLLMDemo&#xff0c;通过代码与原理的深度结合&#xff0c;掌握Transformer架构的核心设计思想。二、完整代码实现 import torc…...

解决游戏控制器兼容性难题:ViGEmBus驱动全攻略

解决游戏控制器兼容性难题&#xff1a;ViGEmBus驱动全攻略 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus 问题诊断篇&#xff1a;游戏控制器兼容性痛点分析…...