QML Label 组件

Label 是 Qt Quick Controls 2 中的文本显示组件，继承自 Text 但提供了更适合 UI 开发的额外功能。

基本用法

qml

复制

下载

import QtQuick.Controls 2.15Label {text: "Hello Qt Quick Controls"font.pixelSize: 16
}

主要属性 (继承自 Text 并新增)

属性	类型	描述	默认值
text	string	显示的文本内容	""
font	Font	字体属性	系统默认字体
color	color	文本颜色	主题默认
elide	enumeration	省略位置	Text.ElideNone
wrapMode	enumeration	换行模式	Text.NoWrap
horizontalAlignment	enumeration	水平对齐	Text.AlignLeft
verticalAlignment	enumeration	垂直对齐	Text.AlignTop
background	Item	背景元素	null
palette	Palette	调色板	应用主题调色板
padding	real	内边距	0
topPadding	real	上内边距	padding
leftPadding	real	左内边距	padding
rightPadding	real	右内边距	padding
bottomPadding	real	下内边距	padding

方法 (继承自 Text)

方法	参数	返回值	描述
linkAt(x, y)	real x, real y	string	获取链接(仅RichText)
positionAt(x, y)	real x, real y	int	获取字符位置
positionToRectangle(pos)	int pos	rectangle	获取字符区域

信号 (继承自 Text)

信号	描述
linkActivated(link)	链接点击时触发
linkHovered(link)	链接悬停时触发

使用示例

1. 基本标签

qml

Label {text: "Username:"font.bold: truepadding: 5
}

2. 带背景的标签

qml

Label {text: "Warning!"color: "white"background: Rectangle {color: "red"radius: 3}padding: 10
}

3. 与输入框配合

qml

Row {spacing: 10Label {text: "Email:"anchors.verticalCenter: parent.verticalCenter}TextField {width: 200}
}

4. 富文本标签

qml

Label {text: "<b>Bold</b> and <i>italic</i> text"textFormat: Text.RichTextonLinkActivated: Qt.openUrlExternally(link)
}

高级特性

1. 主题集成

qml

Label {text: "Themed Label"palette.windowText: "blue" // 覆盖主题颜色
}

2. 自定义样式

qml

Label {id: customLabeltext: "Custom Style"background: Rectangle {border.color: customLabel.down ? "red" : "gray"border.width: 1radius: 2}
}

3. 多语言支持

qml

Label {text: qsTr("Hello World") + myTranslator.emptyString
}

与 Text 组件的区别

1. 主题集成：Label 自动遵循应用程序主题

2. 背景支持：Label 提供 background 属性

3. 内边距：Label 支持 padding 属性

4. 默认行为：Label 更适合 UI 开发场景

5. 性能优化：Label 针对控件使用场景优化

性能优化建议

1. 静态文本设置 renderType: Text.NativeRendering

2. 避免频繁修改文本内容

3. 复杂样式考虑使用 Text 替代

4. 大量标签考虑使用 Repeater + 模型

5. 动态内容合理设置 clip: true

注意事项

1. 需要导入 QtQuick.Controls 2 模块

2. 主题样式可能覆盖自定义设置

3. 富文本功能需要谨慎使用

4. 复杂的文本布局可能需要使用 Text 替代

5. 在 ListView 等滚动区域中使用时注意性能