Flutter【组件】标签

news2024/11/15 21:39:01

简介

flutter 标签组件。标签组件是一种常见的 UI 元素,用于显示和管理多个标签(或标签集合)。

github地址: https://github.com/ThinkerJack/jac_uikit

pub地址:https://pub.dev/packages/jac_uikit

使用方式:

              Row(
                children: const [
                  JacTag(
                    paddingVertical: 1,
                    paddingHorizontal: 6,
                    tagType: JacTagType.text,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    fontSize: 12,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  JacTag(
                    paddingVertical: 1,
                    paddingHorizontal: 6,
                    tagType: JacTagType.text,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.gray,
                    text: "标签",
                    fontSize: 12,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  JacTag(
                    paddingVertical: 1,
                    paddingHorizontal: 6,
                    tagType: JacTagType.text,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.green,
                    text: "标签",
                    fontSize: 12,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  JacTag(
                    paddingVertical: 1,
                    paddingHorizontal: 6,
                    tagType: JacTagType.text,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.black,
                    text: "标签",
                    fontSize: 12,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  JacTag(
                    paddingVertical: 1,
                    paddingHorizontal: 6,
                    tagType: JacTagType.text,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.red,
                    text: "标签",
                    fontSize: 12,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  JacTag(
                    paddingVertical: 1,
                    paddingHorizontal: 6,
                    tagType: JacTagType.text,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.yellow,
                    text: "标签",
                    fontSize: 12,
                  ),
                ],
              ),
              space,
              Row(
                children: const [
                  SizedBox(
                    width: 30,
                  ),
                  JacTag(
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    tagType: JacTagType.icon,
                    tagShapeType: JacTagShapeType.semicircle,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    icon: Icon(
                      Icons.ac_unit,
                      size: 14,
                      color: Color(0XFF5590F6),
                    ),
                    fontSize: 14,
                  ),
                  SizedBox(
                    width: 30,
                  ),
                  JacTag(
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    tagType: JacTagType.icon,
                    tagShapeType: JacTagShapeType.rectangle,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    icon: Icon(
                      Icons.ac_unit,
                      size: 14,
                      color: Color(0XFF5590F6),
                    ),
                    fontSize: 14,
                  ),
                  SizedBox(
                    width: 30,
                  ),
                  JacTag(
                    paddingVertical: 5,
                    paddingHorizontal: 10,
                    tagType: JacTagType.icon,
                    tagShapeType: JacTagShapeType.capsule,
                    tagColorType: JacTagColorType.blue,
                    text: "标签",
                    icon: Icon(
                      Icons.ac_unit,
                      size: 14,
                      color: Color(0XFF5590F6),
                    ),
                    fontSize: 14,
                  ),
                ],
              ),

图片示例:

参数:

  final double paddingVertical; //垂直内边距
  final double paddingHorizontal; //水平内边距
  final JacTagType tagType; //tag类型
  final JacTagShapeType tagShapeType; //tag形状类型
  final JacTagColorType tagColorType; //tag颜色类型
  final String text; //文字内容
  final double fontSize; //字体大小
  final Widget? icon; //左侧图标
​
//tag颜色类型
enum JacTagColorType { black, blue, green, yellow, red, gray }
​
//tag形状类型
enum JacTagShapeType {
  //半圆
  semicircle,
  //矩形
  rectangle,
  //胶囊
  capsule
}
​
//tag类型
enum JacTagType {
  //纯文字
  text,
  //icon+文字
  icon
}

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

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

相关文章

Games101学习笔记 Lecture17 Materials and Appearances

Lecture17 Materials and Appearances 材质 BRDF一、Diffuse/Lambertian Material二、Glossy Material三、Ideal reflective/ refractive Material (BSDF)1.镜面反射2.镜面折射3.菲涅尔项 Fresnel 四、Microfacet BRDF 微表面五、Isotropic / Anisotropic Materials (BRDFs)An…

背部筋膜炎的症状及治疗

背部筋膜炎,也称为胸背肌筋膜炎,主要是由于劳损或风寒湿邪侵入引起的。其典型症状主要包括: 1、疼痛:背部筋膜一旦出现炎症性病变,会对周围交感神经组织产生刺激作用,从而引起不同程度的疼痛症状。 2、僵…

【爱上C++】vector用法详解

文章目录 一:vector简介二:vector的创建和初始化三:vector的遍历1.[]下标2.at()3.迭代器遍历4.范围for 四:vector的空间1.size2.max_size3.capacity4.reserve5.resize6.empty 五:vector的增删查改1.push_back2.pop_back3.find4.insert5.erase6.swap7.assign Hello~同学们好&…

人脸检测(Python)

目录 环境: 初始化摄像头: 初始化FaceDetector对象: 获取摄像头帧: 获取数据: 绘制数据: 显示图像: 完整代码: 环境: cvzone库:cvzone是一个基于…

初识Kettle插件

问题反馈 如有问题可通过微信公众号“假装正经的程序员”反馈 前言 由于kettle设计的特殊性,kettle的处理流程均是通过插件组装的形式来进行工作,因此kettle插件开发是目前kettle二次开发的核心内容。 插件类型 转换步骤插件:在kettle转换…

探索TXE、TC、RXNE标志位在串口通信中的轮询与中断应用

浅谈一下STM32串口中断之TXE,TC,RXNE标志位 之前做一个项目,用到了串口中断,但是对TXE、TC和RXNE标志位的作用和使用方法不是很清楚,导致在调试过程中遇到了一些问题。通过查阅相关资料和实际操作,我对这三个标志位有了更深入的了…

GD 32中断系统实现

1.0 中断的概念 中断:简单来说就是打断的意思,在计算机系统中CPU在执行一个操作的时候,有一个比当前任务更为紧急的任务需要执行,cpu暂停当前任务转而去执行更为紧急任务的操作,执行完更为紧急任务之后再返回来执行原来未执行完的…

FullCalendar日历组件集成实战(18)

背景 有一些应用系统或应用功能,如日程管理、任务管理需要使用到日历组件。虽然Element Plus也提供了日历组件,但功能比较简单,用来做数据展现勉强可用。但如果需要进行复杂的数据展示,以及互动操作如通过点击添加事件&#xff0…

两年经验前端带你重学前端框架必会的ajax+node.js+webpack+git等技术 Day2

前端框架必会的(ajaxnode.jswebpackgit)个人学习心得作业及bug记录 Day2 你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客 这是我的 github https://github.com/Qiuner ⭐️ ​ gitee https://gitee.com/Qiuner 🌹 如果本…

LDR6282-显示器:从技术革新到视觉盛宴

显示器,作为我们日常工作和娱乐生活中不可或缺的一部分,承载着将虚拟世界呈现为现实图像的重要使命。它不仅是我们与电子设备交互的桥梁,更是我们感知信息、享受视觉盛宴的重要窗口。显示器在各个领域的应用也越来越广泛。在办公领域&#xf…

物料主数据BAPI 无法写入扩展(增强)字段问题

在使用BAPI_MATERIAL_SAVEDATA 去创建物料时,因为有增强字段。这时候需要通过extensionin 字段 进行赋值。 https://community.sap.com/t5/application-development-discussions/bapi-material-savedata-extensionin-dec-type-dump/m-p/11760099 但是赋值后仍然没…

不用SMTP实现联系表单提交后发信到指定邮箱

不使用SMTP,如何确保联系表单能安全发送至指定邮箱? 尽管SMTP是实现电子邮件发送的常用方法,但有时我们可能希望绕过SMTP,直接通过其他方式发送邮件到指定邮箱。AokSend将探讨如何在不用SMTP的情况下,实现联系表单提交…

基于mmap的读写工具封装案例

文章目录 注意事项C封装示例添加构造函数重载以支持追加模式支持文件大小动态变化异常安全性和资源泄漏预防提供更高级的数据访问接口示例代码改进 在很多高性能应用中,直接使用内存映射文件(mmap)进行文件的读写操作可以显著提高效率&#x…

【C++】stack和queue的模拟实现 双端队列deque的介绍

🔥个人主页: Forcible Bug Maker 🔥专栏: STL || C 目录 🌈前言🔥stack的模拟实现🔥queue的模拟实现🔥deque(双端队列)deque的缺陷 🌈为什么选择…

从无计划到项目管理高手,只需避开这两大误区!

在项目管理的过程中,制定计划是不可或缺的一环。然而,在实践中,我们往往会遇到两种常见的误区,这些误区不仅阻碍了计划的有效实施,还可能让我们在追求目标的道路上迷失方向。 误区一:认为没有什么可计划的…

充电桩开源平台,开发流程有图有工具

慧哥充电桩开源平台产品研发流程是确保产品从概念阶段到市场推广阶段的有序进行的关键。以下是对您给出的步骤的详细解释和建议: 设计业务流程: 在这一步,团队需要确定产品的核心功能、目标用户以及如何满足用户需求。进行市场调研,了解竞争…

无线网卡怎么连接台式电脑?让上网更便捷!

随着无线网络的普及,越来越多的台式电脑用户希望通过无线网卡连接到互联网。无线网卡为台式电脑提供了无线连接的便利性,避免了有线网络的束缚。本文将详细介绍无线网卡怎么连接台式电脑的四种方法,包括使用USB无线网卡、内置无线网卡以及使用…

探索企业信用巅峰:3A企业认证的魅力与价值

在现代商业环境中,企业的信用和信誉是其发展的核心要素之一。3A企业认证作为信用评级的最高等级,正在吸引越来越多企业的关注。究竟什么是3A企业认证?它为什么对企业如此重要?本文将深入探讨3A企业认证的独特魅力和巨大价值。 3A企…

使用vue3-treeselect问题

1.当vue3-treeselect是单选时,使用watch监听绑定value,无法监听到值清空 对照后将:value改为v-model,如图 2.使用vue3-treeselect全部清空按钮如何置空select的值,使用watch监听 多选:pageInfo.officeName(val) {// …

mybatis中的标签

在MyBatis中&#xff0c;除了基本的SQL映射功能外&#xff0c;还有许多用于动态SQL构建的标签。这些标签允许我们根据不同的条件和需求构建复杂的SQL语句。主要的动态SQL标签包括<if>, <choose>, <when>, <otherwise>, <trim>, <set>, <…