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.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.mfbz.cn/a/153386.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

要在伦敦银技术分析史上留名 这可能吗?

在学习伦敦银投资的时候&#xff0c;我们都很羡慕那些以人的名字命名的交易工具或者策略&#xff0c;例如布林带、帝纳波利点位、加特利形态、艾略特波浪理论等等。投资者也有一个希望&#xff0c;就是开发属于自己的交易策略或者工具&#xff0c;这并不是不可能的&#xff0c;…

C 语言指针和数组

C 语言指针和数组 在本教程中&#xff0c;您将了解C语言编程中数组与指针之间的关系。您还将学习使用指针访问数组元素。 在了解数组与指针之间的关系之前&#xff0c;请确保检查以下两个主体&#xff1a; [C 数组](C 语言数组-CSDN博客)[C 指针](C 语言指针-CSDN博客) 数组…

springboot327基于Java的医院急诊系统

交流学习&#xff1a; 更多项目&#xff1a; 全网最全的Java成品项目列表 https://docs.qq.com/doc/DUXdsVlhIdVlsemdX 演示 项目功能演示&#xff1a; ————————————————

解决编译时提示“没有那个文件或目录 #include <pcap.h>”的问题

解决编译时提示“没有那个文件或目录 #include 当你在编译代码时遇到“没有那个文件或目录 #include <pcap.h>”的错误提示&#xff0c;这通常意味着编译器在你的系统路径中找不到 pcap.h 头文件。pcap.h 是网络流量捕获库 pcap 的头文件&#xff0c;用于在 C/C 程序中捕…

高效能人士的七个习惯

今天小编给大家推荐最近读的一本书&#xff0c;史蒂芬柯维的《高效能人士的七个习惯》&#xff0c;分别是积极主动、以始为终、要事第一、双赢思维、知己解彼、综合高效及不断更新。 一、个人领域&#xff1a;从依赖到独立 习惯一&#xff1a;积极主动——个人愿景的原则付诸行…

哪种猫罐头比较好?推荐给新手养猫的5款好口碑猫罐头!

新手养猫很容易陷入疯狂购买的模式&#xff0c;但有些品牌真的不能乱买&#xff01;现在的大环境不太好&#xff0c;我们需要学会控制自己的消费欲望&#xff0c;把钱花在刀刃上&#xff01;哪种猫罐头比较好&#xff1f;现在宠物市场真的很内卷&#xff0c;很多品牌都在比拼产…

雷达模糊函数及MATLAB仿真

文章目录 前言一、雷达模糊函数二、Matlab 仿真1、单脉冲模糊函数①、MATLAB 源码②、仿真结果1&#xff09;不确定函数三维图2&#xff09;不确定函数的等高图3&#xff09;模糊函数的三维图4&#xff09;模糊函数的等高图 2、单脉冲多普勒频率轴上的切面①、MATLAB 源码②、仿…

nvm安装详细教程(卸载旧的nodejs,安装nvm、node、npm、cnpm、yarn及环境变量配置)

文章目录 一、完全卸载旧的nodejs1、打开系统的控制面板&#xff0c;点击卸载程序&#xff0c;卸载nodejs&#xff08;1&#xff09;打开系统的控制面板&#xff0c;点击程序下的卸载程序&#xff08;2&#xff09;找到node.js&#xff0c;鼠标右击出现下拉框&#xff0c;点卸载…

11月编程语言排行榜出炉:C#超越Java已成定局!

TIOBE最新的编程语言排行榜刚刚出炉了&#xff0c;本月Java依然大幅下跌3.63%&#xff0c;C#本月上涨3.4%&#xff0c;C#和Java仅相差0.7%。 就像网友评论说的&#xff1a;Java成于互联网的兴起&#xff0c;败于互联网的衰落。 一直以来我也都是从事互联网行业、主要是电商行业…

redis高级案列case

案列一 双写一致性 案例二 双锁策略 package com.redis.redis01.service;import com.redis.redis01.bean.RedisBs; import com.redis.redis01.mapper.RedisBsMapper; import lombok.extern.slf4j.Slf4j; import org.springframework.beans.factory.annotation.Autowired; imp…

comfyui指北-1

https://colab.research.google.com/github/tieai/SDXL-ComfyUI-Colab/blob/main/SDXL_OneClick_ComfyUI.ipynb#scrollToSaAJk33ppFw1https://colab.research.google.com/github/tieai/SDXL-ComfyUI-Colab/blob/main/SDXL_OneClick_ComfyUI.ipynb#scrollToSaAJk33ppFw1 可以用上…

SpringCloud Alibaba组件入门全方面汇总(中):服务熔断降级-Sentinel

文章目录 Sentinel常见的容错思路Sentinel流量控制规则sentinel 自定义异常 sentinelresources 注解使用Feign整合Sentinel**面试题&#xff1a;结合Feign后&#xff0c;你在项目中的降级方法中会实现什么样的操作/功能&#xff1f;** Sentinel Sentinel是阿里巴巴开源的分布…

制作翻页电子书最简单的教程来也!

电子书是一种新时代的电子读物&#xff0c;由于比传统纸质书刊更加方便阅读&#xff0c;又非常便利储存&#xff0c;所以受到了很多人的喜爱。既然有这么多人喜爱阅读电子书&#xff0c;那你知道翻页电子书是怎么的吗&#xff1f; 其实翻页电子书制作并没有我们想象中的那么复…

rabbitMQ的direct模式的生产者与消费者使用案例

消费者C1的RoutingKey 规则按照info warn 两种RoutingKey匹配 绑定队列console package com.esint.rabbitmq.work03;import com.esint.rabbitmq.RabbitMQUtils; import com.rabbitmq.client.Channel; import com.rabbitmq.client.DeliverCallback;/*** 消费者01的消息接受*/ p…

使用Ganache搭建本地测试网并实现远程连接

文章目录 前言1. 安装Ganache2. 安装cpolar3. 创建公网地址4. 公网访问连接5. 固定公网地址 前言 Ganache 是DApp的测试网络&#xff0c;提供图形化界面&#xff0c;log日志等&#xff1b;智能合约部署时需要连接测试网络。 Ganache 是一个运行在本地测试的网络,通过结合cpol…

2023年香港优才计划申请确实火爆,但请冷静!结合个人条件再考虑!

2023年香港优才计划申请确实火爆&#xff0c;但请冷静&#xff01;结合个人条件再考虑&#xff01; 自从香港优才计划实施取消年度限额&#xff0c;为期两年的优化措施以后&#xff0c;无论是申请数量还是获批数量都猛增。今年第二季度的获批量与第一季度的2,073宗相比&#xf…

win11无法打开文件资源管理器

不知道为啥&#xff0c;升级之后文件夹就打不开了&#xff0c;研究了n个方案 注意&#xff1a;先备份一下注册表&#xff0c;祸祸完失败之后恢复回去 最终方案 很悲剧&#xff0c;下面的我都失败了&#xff0c;不过其他人有成功的&#xff0c;所以&#xff0c;我放弃官方的文件…

软件自动化测试代码覆盖率

在<professional software testing with visual studio 2005 team system tools for software developer>中提到了代码覆盖率&#xff0c;我很久没有去书店了&#xff0c;不知道是不是出了新的版本&#xff0c;觉得书里面关于代码覆盖率方面的知识有些地方没有讲&#xf…

CMA认证和CNAS认可的联系和区别?哪个更权威?

一、CMA认证是什么?   CMA认证是指中国计量认证&#xff0c;省级以上的计量行政部门根据中国计量法的规定&#xff0c;对申请CMA测试资质的第三方检测机构进行评估&#xff0c;对检测水平和检测可靠性达到国家标准的实验室授予计量认证合格证书(CMA资质)。 二、CNAS认可是什…

Latex常用特殊字符汇总

本文汇总了博主在使用Latex写文档过程中遇到的所有常用疑难字符、表达式等等及对应的Latex形式 持续更新... 目录 常用字符波浪号1. 文本模式&#xff1a;~2. 数学模式&#xff1a; ∼ \sim ∼3. 字母上方的波浪号&#xff1a; a ˜ \~a a˜ 字母上方角标 (数学模式强调符)箭头…
最新文章