Flutter【组件】标签

简介

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

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

相关文章

机器学习:预测评估8类指标

机器学习:8类预测评估指标 R方值、平均值绝对误差值MAE、均方误差MSE、均方误差根EMSE、中位数绝对误差MAD、平均绝对百分误差MAPE、可解释方差分EVS、均方根对数误差MLSE。 一、R方值 1、说明: R方值,也称为确定系数或拟合优度&#xff…

Python 基础知识:为什么使用 __init__.py ?

大家好!今天,我们将深入了解 Python 中的 __init__.py 文件,这个小文件却能干大事。让我们抛开任何专业术语,直接进入正题。 什么是 __init__.py ? 假设你有一个 Python 目录,里面有一堆 Python 文件&…

从零开始做题:My_lllp

题目 给出一张png图片 解题 ┌──(holyeyes㉿kali2023)-[~/Misc/题目/zulu/My_lllp] └─$ python2 lsb.py extract my_lllp.png out.txt my_lllp [] Image size: 1080x1079 pixels. [] Written extracted data to out.txt. ┌──(holyeyes㉿kali2023)-[~/Misc/题目/zul…

绝区伍--2024年AI发展路线图

2024 年将是人工智能具有里程碑意义的一年。随着新模式、融资轮次和进步以惊人的速度出现,很难跟上人工智能世界发生的一切。让我们深入了解 2024 年可能定义人工智能的关键事件、产品发布、研究突破和趋势。 2024 年第一季度 2024 年第一季度将推出一些主要车型并…

AI绘画Stable Diffusion:ControlNet组件—Scribble(涂鸦)赋予用户精细控制权,让涂鸦草图焕发生命力

大家好,我是画画的小强 今天给大家分享一下AI绘画Stable Diffusion当中的:ControlNet Scribble组件,**Scribble(涂鸦)**技术是一种能够为用户提供独特的手动注释或标记图像(如:涂鸦、简笔画等&…

变阻器的阻值范围是多少?

变阻器,又称可变电阻器或电位器,是一种可以改变电阻值的电子元件。它通常由一个滑动臂、一个固定电阻体和一个滑动触点组成。通过滑动臂在固定电阻体上的位置变化,可以实现对电阻值的连续调整。变阻器广泛应用于各种电子设备中,如…

2024 ACT汽车软件与安全技术周 | 龙智携全方位汽车软件开发解决方案亮相,助力应对汽车软件开发功能安全、合规等挑战

2024年7月18-19日(周四-周五),2024第三届ACT汽车软件与安全技术周将在上海佘山翰悦阁酒店举办。 龙智即将携汽车开发及管理解决方案创新亮相,并在汽车信息安全技术峰会主会场上发表主题演讲,分享推动汽车软件开发与功…

Java-Redis-Clickhouse-Jenkins-MybatisPlus-Zookeeper-vscode-Docker

文章目录 Clickhouse基础实操windows docker desktop 下载clickhousespringboot项目配置clickhouse Redis谈下你对Redis的了解?Redis一般都有哪些使用的场景?Redis有哪些常见的功能?Redis支持的数据类型有哪些?Redis为什么这么快…

电源中电感底部需要铺地平面吗?

感有交变电流,电感底部铺铜会在地平面上产生涡流,涡流效应会影响功率电感的电感量,涡流也会增加系统的损耗,同时交变电流产生的噪声会增加地平面的噪声,会影响其他信号的稳定性。 在EMC方面来看,在电感底部…

DSSM双塔特征交互

传统的DSSM双塔无法在早期进行user和item侧的特征交互,这在一定程度上降低了模型性能。我们想要对双塔模型进行细粒度的特征交互,同时又不失双塔模型离线建向量索引的解耦性。下面介绍两篇这方面的工作。 美团-Dual Augmented Two-tower 在user和item的特…

基于stm32开发的红外循迹小车

本项目算是接触32来开发的第一个小项目了,虽然前期用51写过一个循迹小车,以为直接转到32会比较简单,结果还是花了大几天才把小车的参数完全调完,以此来记录下自己的学习历程(注:循迹算法并未加入PID算法&am…

AI网络爬虫016:用deepseek批量提取coze扣子的智能体数据

文章目录 一、介绍二、输入内容三、输出内容一、介绍 动态加载页面,返回json数据: 翻页规律: https://www.coze.cn/api/marketplace 这两个URL在多个方面有所不同,主要差异如下: **查询参数(Query Parameters)**: - 第一个URL的查询参数包括: - `entity_type=1` - `…

【VUE基础】VUE3第七节—Vue Router路由基础

Vue Router 是 Vue 官方的客户端路由解决方案。 客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时,URL 会随之更新,但页面不需要从服务器重新加载。 Vue Router 基于 Vue 的组件系统构建&…

imazing电脑怎么下载 imazing怎么下载软件 使用iMazing下载和卸载Apple设备上的应用程序

iMazing官方版是一款管理苹果设备的软件,是一款帮助用户管理 iOS手机的PC端应用程序,能力远超 iTunes 提供的终极 iOS 设备管理器。在iMazing官方版上与苹果设备连接后,可以轻松传输文件,浏览保存信息等,功能比iTunes更…

rocketmq主从自动切换(Controller 嵌入 NameServer 部署)

rocketmq5以后,加入了主从自动切换的功能: 官网 https://rocketmq.apache.org/zh/docs/deploymentOperations/03autofailover 准备工作 1)关闭将要升级的nameserver、master、slave 2)复制master的store文件到其他两台机器&a…

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat 基于MindNLP和ChatGLM-6B实现一个聊天应用,本文进行简单记录。 环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14,如需更换mindspore版本,可更改下面mi…

通过高德地图 JS API实现单击鼠标进行标注

效果图: 核心代码: <template><a-modal title="选择地图所在位置" :width="width" :visible="visible" @ok="handleOk" @cancel="handleCancel" cancelText="关闭"><div class="location-…

Flutter——最详细(Badge)使用教程

背景 主要常用于组件叠加上圆点提示&#xff1b; 使用场景&#xff0c;消息数量提示&#xff0c;消息红点提示 属性作用backgroundColor红点背景色smallSize设置红点大小isLabelVisible是否显示offset设置红点位置alignment设置红点位置child设置底部组件 代码块 class Badge…

【Elasticsearch】开源搜索技术的演进与选择:Elasticsearch 与 OpenSearch

开源搜索技术的演进与选择&#xff1a;Elasticsearch 与 OpenSearch 1.历史发展2.OpenSearch 与 Elasticsearch 相同点3.OpenSearch 与 Elasticsearch 不同点3.1 版本大不同3.2 许可证不同3.3 社区不同3.4 功能不同3.5 安全性不同3.6 性能不同3.7 价格不同3.8 两者可相互导入 4…

LLM- 注意力机制

一&#xff1a;什么是注意力机制&#xff0c;以及产生背景&#xff1f; &#xff08;1&#xff09;&#xff1a;RNN模型[RNN模型]的缺点&#xff1a;下图是例如RNN模型解决机器翻译的例子&#xff0c;从这个例子可以看到Encoder最后一个向量&#xff08;eos&#xff09;送给了…