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

news2024/11/30 2:37:25

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

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.w
      margin: 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,)
      ],
    );
  }

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

你不懂API接口是什么?怎么和程序员做朋友

说到开发平台就一定离不开接口&#xff0c;作为PM&#xff0c;我们不需要对接口了解的特别细。只需要知道接口是什么&#xff0c;有什么用&#xff0c;有哪些要素就行。 1. 接口是什么 (1) 硬件接口 生活中我们经常会接触接口&#xff0c;最常见的就是HDMI接口和USB接口&…

到什么程度才叫精通 Linux?

到什么程度才叫精通 Linux&#xff1f; 一般说自己精通某项技术的&#xff0c;要么是应届生&#xff0c;要么是刚工作没多久的&#xff0c;再者就是半桶水的人。 Linux 博大精深&#xff0c;我敢肯定&#xff0c;Linus 本人都不敢说自己精通 Linux 。最近很多小伙伴找我&#…

【Linux】文件系统中inode与软硬链接以及读写权限问题

文章目录 前言一、 简单理解文件系统二、文件操作具体步骤1.新建文件2.删除文件3.查找文件 三、目录的重新理解1.目录下没有w权限&#xff0c;无法对其下的文件进行创建与删除2.目录下没有r权限&#xff0c;无法对其下的文件进行查看3.目录下没有x权限&#xff0c;无法进入这个…

基于Optuna的transformers模型自动调参

文章目录 一、导入相关包二、加载数据集三、划分数据集四、数据集预处理五、创建模型&#xff08;区别一&#xff09;六、创建评估函数七、创建 TrainingArguments(区别二)八、创建 Trainer(区别三)九、模型训练十、模型训练(自动搜索)(区别四)启动 tensorboard 以文本分类为例…

使用 Redis 构建轻量的向量数据库应用:图片搜索引擎(一)

本篇文章聊聊更轻量的向量数据库方案&#xff1a;Redis。 以及基于 Redis 来快速实现一个高性能的本地图片搜索引擎&#xff0c;在本地环境中&#xff0c;使用最慢的稠密向量检索方式来在一张万图片中查找你想要的图片&#xff0c;总花费时间都不到十分之一秒。 写在前面 接着…

C++进阶-STL 常用算法列举

STL 常用算法列举 概述常用遍历算法for_each 遍历容器transfrom 搬运容器到另一个容器中 常用查找函数find 查找元素find_if 按条件查找元素adjacent_find 查找相邻重复元素binary_search 二分查找法count 统计元素个数count_if 按条件统计元素个数 常用排序算法sort 对元素内内…

Linux C/C++全栈开发知识图谱(后端/音视频/游戏/嵌入式/高性能网络/存储/基础架构/安全)

众所周知&#xff0c;在所有的编程语言中&#xff0c;C语言是一门颇具学习难度&#xff0c;需要很长学习周期的编程语言。甚至很多人经常听到一句调侃的话语——“C&#xff0c;从入门到放弃”。 C界的知名书籍特别多&#xff0c;从简单到高端书籍&#xff0c;许多书籍都是C之…

8086与8088

一、8086与8088概述 8088/8086都是16位微处理器&#xff0c;内部运算器和寄存器都是16位的&#xff0c;同样具有20位地址线8088/8086都是由执行单元(EU)和总线接口部件(BIU)两大部分构成指令系统和寻址能力都相同&#xff0c;两种CPU是兼容的8088被称作准十六位的、是紧继8086…

为什么红帽Linux值得学习?红帽Linux是什么

为什么红帽Linux值得学习 物联网、云计算、大数据&#xff0c;或许你都耳熟能详&#xff0c;但是Linux可能你却感觉到有点陌生。这些未来趋势的行业使用的嵌入式、c、JAVA、PHP等底层应用软件都是在Linux操作系统上Linux运维工程师作为移动互联网的关键支撑岗位&#xff0c;缺口…

Redis内存淘汰机制

Redis内存淘汰机制 引言 Redis 启动会加载一个配置&#xff1a; maxmemory <byte> //内存上限 默认值为 0 (window版的限制为100M)&#xff0c;表示默认设置Redis内存上限。但是真实开发还是需要提前评估key的体量&#xff0c;提前设置好内容上限。 此时思考一个问题…

避坑指南!!在树莓派4b上安装Pycharm以及无法使用终端的问题解决!!

一、下载Pycharm–linux安装包 这里是踩的第一个坑&#xff0c;一开始我下载的是pycharm2023-linux版本的。后面发现缺少很多东西&#xff0c;安装不成功。后面下载了低版本的Pycharm才可以。我下载的是2020版本的。注意&#xff1a;在下载安装包时&#xff0c;一定要在window…

小米手机获取电池健康度

目录 方法一&#xff1a;使用Bug反馈功能 1. 打开拨号界面&#xff0c;输入*#*#284#*#* 2. 导出结果&#xff0c;等待即可 3. 找到这个压缩文件 4. 解压缩【我这里直接拷贝到电脑中操作&#xff0c;手机同理】 4.1 解压&#xff1a; 4.2 将得到的新的压缩文档解压 5. 打…

Stages—研发过程可视化建模和管理平台

产品概述 Stages是美国UL Solutions旗下UL Method Park GmbH的产品&#xff0c;用于帮助企业定义、管理、发布、控制、优化其研发过程&#xff0c;同时使其研发过程符合CMMI、ASPICE、ISO26262等标准。Stages的核心理念是把过程理论和实际项目进行有机结合。Stages聚焦于研发过…

web环境实现一键式安装启动

部署的痛点 一般在客户环境安装web环境&#xff0c;少说需要花费1-2小时。一般需要安装jdk、nginx、mysql、redis等 等你接触到了inno setup &#xff0c;你有可能会节约更少的时间去部署。也有可能是一个不懂技术的人&#xff0c;都可以进行操作的。废话不多说&#xff0c;接…

JS原生-弹框+阿里巴巴矢量图

效果&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content&q…

LeetCode - 160. 相交链表(C语言,配图)

思路&#xff1a; 1. 我们算出两个链表的长度lenA&#xff0c;lenB。我们在这里最后判断一下&#xff0c;两个链表的尾节点是否是一样的&#xff0c;如果是相交链表&#xff0c;那它们的尾节点一定是一样的。 2. 算出长链表和短链表的差距n&#xff08;n | lenA- lenB |&#…

【分享课】11月16日晚19:30PostgreSQL分享课:PG缓存管理器主题

PostsreSQL分享课分享主题: PG缓存管理器主题 直播分享平台&#xff1a;云贝教育视频号 时间&#xff1a;11月16日 周四晚 19: 30 分享内容: 缓冲区管理器结构 缓冲区管理器的工作原理 环形缓冲区 脏页的刷新

《洛谷深入浅出基础篇》 p3370字符串哈希——hash表

上链接&#xff1a; P3370 【模板】字符串哈希 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn)https://www.luogu.com.cn/problem/P3370#submit上题干&#xff1a; 就是说&#xff0c;给你N个字符串&#xff0c;然后让你判断&#xff0c;这N个字符串里面有多少不同的字符串&am…

谭巍主任科普:面对HPV感染挑战,迈出关键一步!

在当今社会&#xff0c;HPV(人乳头瘤病毒)感染的问题日益凸显&#xff0c;它不仅限于性传播疾病&#xff0c;更上升为一种公共卫生问题。据统计&#xff0c;全球范围内每年有大量人群感染HPV&#xff0c;其中部分地区感染率高达50%。正因如此&#xff0c;谭巍主任投身于科普事业…

表单校验wed第十九章

常见的表单验证 一。表单选择器 属性过滤选择器 &#xff1a;selected 选中所有的下拉元素 &#xff1a;checked&#xff1a;选项元素 &#xff1a;disabled 不可用元素 &#xff1a;enable 所有可用元素 二。字符串演示 1.判断非空 isNaN(j) :判断是否为数字 2.表…