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,
                  ),
                ],
              ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

图片示例：

参数：

  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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29