QML中的Label组件是构建用户界面时最常用的文本显示控件之一，它继承自Text元素但提供了更丰富的UI特性和主题集成支持。本文将全面介绍Label的核心功能、属性配置、使用技巧以及与Text组件的区别，帮助开发者高效构建美观的文本界面。
Label组件基础
Label是Qt Quick Controls 模块提供的文本显示控件，它具有以下特点：
- 自动适配系统主题：默认遵循应用程序的主题设置
- 更丰富的样式定制：支持背景、内边距等UI特性
- 优化的排版处理：内置更好的文本布局管理
- 控件级功能：提供焦点策略、状态管理等控件特性
基本使用需要先导入模块：
import QtQuick.Controls 2.15最简单的Label定义：
Label {text: "Hello QML"
}核心属性详解
1. 文本内容与样式
- text：显示的文字内容，支持静态文本和动态绑定
- color：文本颜色，支持颜色名称或十六进制值
- font：字体样式组，包含多个子属性：
font {family: "Arial" // 字体pixelSize: 16 // 字号bold: true // 加粗italic: true // 斜体underline: true // 下划线 }
2. 布局与对齐
- horizontalAlignment/verticalAlignment：水平和垂直对齐方式
- wrapMode：文本换行模式（NoWrap/WordWrap/WrapAnywhere）
- elide：文本溢出处理（ElideLeft/ElideMiddle/ElideRight）
- padding：内边距设置，支持统一或分边设置：
padding: 10 // 统一设置 // 或分边设置 topPadding: 5 leftPadding: 10
3. 背景与装饰
Label特有的背景设置能力：
background: Rectangle {color: "lightgray"radius: 5 // 圆角border.color: "gray"
}高级功能应用
1. 富文本支持
通过设置textFormat属性支持富文本显示：
Label {text: "<b>粗体</b>和<i>斜体</i>文本"textFormat: Text.RichTextonLinkActivated: Qt.openUrlExternally(link)
}2. 多语言国际化
使用qsTr()函数实现多语言支持：
Label {text: qsTr("欢迎使用")
}示例代码：
import QtQuick
import QtQuick.ControlsWindow {width: 1024height: 768visible: truetitle: qsTr("Hello World")Label {id: backgroundLabelanchors.fill: parentbackground: Image {source: "kun.jpg"}}// Text文本Label {id: label1width: 300height: 300text: "普惠体 3.0 55 Regular ABCDEFG 1234546789"font.family: "阿里巴巴普惠体 3.0 55 Regular"font.pixelSize: 32font.bold: truefont.underline: true //下划线font.wordSpacing: 30 //字体间距color: "red"wrapMode: Text.WordWrap //根据word换行leftPadding: 10 //设置左边距10像素horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter}Label {id: label2width: 220height: 50anchors.top: label1.bottomanchors.topMargin: 10anchors.left: parent.leftbackground: Rectangle {color:"#FFFF00"}text: "Hello World123456"font.pixelSize: 32color: "blue"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter// topInset: 20// leftInset: 30 //设置背景间隔，跟QSS的padding-left差不多吧style: Text.Raised //字体风格elide: Text.ElideRight //超出右边范围省略}Label {id: label3width: 220height: 50anchors.top: label2.bottomanchors.topMargin: 10anchors.left: parent.leftanchors.leftMargin: 20background: Rectangle {color:"#00FF00"}text: "Hello World123456"font.pixelSize: 32color: "blue"horizontalAlignment: Text.AlignHCenterverticalAlignment: Text.AlignVCenter// leftInset: 30clip: true //文本字体太大，超出文本范围截断}Label {id: label4width: 140height: 60anchors.centerIn: parentbackground: Image {source: "qt_logo.png" //如果是资源文件，要赋值资源文件的地址}}Label {id: label5width: 50height: 50anchors.top: label4.bottomanchors.topMargin: 30anchors.horizontalCenter: parent.horizontalCenterbackground: Image {id: label5Imagesource: "settings.png"}MouseArea {anchors.fill: label5onPressed: {label5Image.opacity = 0.5}onReleased: {label5Image.opacity = 1}onClicked: {console.log("label5 clicked!")}}}}
效果展示：
)
