Label - Material 标签
Label 是 Material Design 3 标签控件的完整实现,支持 15 种排版样式(Display、Headline、Title、Body、Label)和 9 种颜色变体。完全集成主题系统,自动响应主题变化。
类参考
cpp
namespace cf::ui::widget::material;
class Label : public QLabel {
Q_OBJECT
Q_PROPERTY(TypographyStyle typographyStyle READ typographyStyle WRITE setTypographyStyle)
Q_PROPERTY(LabelColorVariant colorVariant READ colorVariant WRITE setColorVariant)
Q_PROPERTY(bool autoHiding READ autoHiding WRITE setAutoHiding)
};
```text
头文件:`ui/widget/material/widget/label/label.h`
## 排版样式
Material Design 3 定义了 15 种排版样式,分属 5 个类别:
```cpp
enum class TypographyStyle {
// 展示样式(57sp, 45sp, 36sp)- 用于英雄内容
DisplayLarge, DisplayMedium, DisplaySmall,
// 标题样式(32sp, 28sp, 24sp)- 用于应用栏文本
HeadlineLarge, HeadlineMedium, HeadlineSmall,
// 标题样式(22sp, 16sp, 14sp)- 用于节标题
TitleLarge, TitleMedium, TitleSmall,
// 正文样式(16sp, 14sp, 12sp)- 用于主要内容
BodyLarge, BodyMedium, BodySmall,
// 标签样式(14sp, 12sp, 11sp)- 用于辅助信息
LabelLarge, LabelMedium, LabelSmall
};
```text
## 颜色变体
9 种颜色变体对应 Material Design 3 的语义颜色角色:
```cpp
enum class LabelColorVariant {
OnSurface, // 默认 on-surface 颜色
OnSurfaceVariant, // 变体 on-surface 颜色
Primary, // 主品牌颜色
OnPrimary, // 主颜色上的文本
Secondary, // 次品牌颜色
OnSecondary, // 次颜色上的文本
Error, // 错误颜色
OnError, // 错误颜色上的文本
InverseSurface, // 反转表面颜色
InverseOnSurface // 反转表面上的文本
};
```text
## 基本用法
```cpp
#include "widget/material/widget/label/label.h"
using namespace cf::ui::widget::material;
// 创建标签(默认 BodyMedium 样式)
auto* label = new Label("Hello World", this);
// 指定排版样式
auto* title = new Label("Settings", TypographyStyle::HeadlineSmall, this);
// 设置颜色变体
title->setColorVariant(LabelColorVariant::Primary);
// 创建展示文本
auto* hero = new Label("Welcome", TypographyStyle::DisplayLarge, this);
```bash
## 排版样式选择指南
| 类别 | 使用场景 | 可选值 |
|------|----------|--------|
| Display | 首屏英雄内容、超大标题 | DisplayLarge / Medium / Small |
| Headline | 应用栏、页面主标题 | HeadlineLarge / Medium / Small |
| Title | 卡片标题、列表项标题 | TitleLarge / Medium / Small |
| Body | 正文内容、描述文本 | BodyLarge / Medium / Small |
| Label | 按钮、标签、辅助文本 | LabelLarge / Medium / Small |
默认样式为 `BodyMedium`,适用于大多数正文场景。
## 自动隐藏
当标签文本为空时,可以自动隐藏标签:
```cpp
label->setAutoHiding(true);
// 当 text 为空时,label->hide() 自动调用
// 当 text 非空时,label->show() 自动调用
```text
这在动态内容的场景下很有用,比如错误提示标签在没有错误时不占用布局空间。
## 颜色与主题
Label 从当前主题中自动获取颜色和字体:
```cpp
// 颜色根据 colorVariant 从主题获取
// 禁用状态下,文本透明度降至 38%
// 字体根据 typographyStyle 从主题获取对应的排版令牌
// 查询通过 typographyTokenName() 转换样式为令牌名称
```bash
为了优化性能,Label 缓存了最近查询的颜色值(`cachedColor_`),避免重复的主题查询。
## 交互状态
Label 本身是静态控件,但禁用状态有特殊处理:
| 状态 | 视觉效果 |
|------|----------|
| Enabled | 正常颜色和字体 |
| Disabled | 文本透明度降至 38% |
## 主要方法
| 方法 | 说明 |
|------|------|
| `typographyStyle()` / `setTypographyStyle(TypographyStyle)` | 获取/设置排版样式 |
| `colorVariant()` / `setColorVariant(LabelColorVariant)` | 获取/设置颜色变体 |
| `autoHiding()` / `setAutoHiding(bool)` | 获取/设置自动隐藏 |
| `sizeHint()` / `minimumSizeHint()` | 获取推荐/最小尺寸 |
## 相关文档
- [Material Design 3 排版规范](https://m3.material.io/styles/typography)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
130
131
132
133
134
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
130
131
132
133
134