QT总结-P2 - 技术栈

Qt Quick QML 代码逐行详解+学习笔记

这份代码是Qt Quick 桌面应用基础UI代码，核心功能是创建一个固定大小的应用窗口，并在窗口中展示一个带自定义字体、圆角背景、内边距的标签（Label），同时包含注释的「文本组件（Text）」和「字体加载（FontLoader）」示例，是Qt Quick入门级UI开发代码。

下面逐模块、逐行详细拆解代码含义：

一、代码逐行/逐模块详解

1. 模块导入（import 语句）

import 是QML的模块导入语法，作用是引入Qt官方UI模块或自定义组件，相当于编程语言的「导包」。

qml 复制代码

import QtQuick 2.12          // 导入Qt Quick核心UI模块（2.12版本），提供基础可视化组件（Text/Rectangle等）
import QtQuick.Window 2.2    // 导入窗口模块，提供「应用根窗口」组件ApplicationWindow
import QtQuick.Controls 2.5  // 导入Qt Quick标准控件模块，提供Label/Button等封装好的控件
import QtQml 2.0             // 导入QML核心引擎模块，支持QML基础语法（变量绑定、逻辑处理）
import QtQuick 2.9           // 重复导入QtQuick（低版本），冗余代码，实际以高版本2.12为准
import "./Components"        // 导入当前目录下的「Components文件夹」，使用里面自定义的QML组件（如字体组件Fonts）

2. 应用根窗口：ApplicationWindow

ApplicationWindow 是Qt Quick桌面应用的根组件（必须作为最外层容器），相当于应用的主窗口。

qml 复制代码

ApplicationWindow
{
    id: window              // 给窗口设置唯一标识「id」，方便其他组件引用（如parent.width）
    visible: true           // 窗口默认「显示」（false则启动后窗口隐藏）
    width: 600              // 窗口宽度：600像素
    height: 480             // 窗口高度：480像素
    title: qsTr("Application Demo")  // 窗口标题；qsTr是Qt国际化函数，支持后续多语言翻译
}

3. 注释代码1：FontLoader（外部字体加载器）

被 // 注释，暂不生效 ；FontLoader 是Qt Quick内置组件，专门用于加载外部字体文件（.ttf/.otf格式）。

qml 复制代码

// FontLoader{
//     id:myfont                // 字体加载器的唯一id
//     source: "qrc:/Fonts/SupermercadoOne-Regular.ttf"  // 字体文件路径：qrc是Qt资源系统路径，指向资源包内的字体
// }

4. 注释代码2：Text（基础文本组件）

被 // 注释，暂不生效 ；Text 是Qt Quick最基础的文本显示组件，仅负责展示文本，无默认样式。

qml 复制代码

// Text {
//     text:"我是余晨晨 jhhkj <br><b>jhklj lliii</b> <i>lkjkhjg</i> jhghf ghfhg"  // 显示的文本内容（含中文、英文、富文本标签）
//     font.pixelSize: 25         // 字体「像素大小」（固定像素，不随系统DPI缩放）
//     font.pointSize: 70         // 字体「磅值大小」（设备无关，推荐用这个，适配多设备）
//     font.bold: true            // 字体加粗
//     font.italic:true           // 字体斜体
//     font.underline: true       // 字体加下划线
//     color: "#47CD57"           // 文本颜色（十六进制色值）
//     font.family: "Helvetica"   // 字体族（使用系统自带的Helvetica字体）
//     width:parent.width         // 文本宽度 = 父组件（窗口）的宽度
//     wrapMode: Text.WrapAnywhere  // 换行模式：任意位置换行（哪怕单词中间也会拆）
//     wrapMode:Text.WordWrap     // 换行模式：按「完整单词」换行（推荐，不拆分单词）
//     color: "#383838"           // 重复设置文本颜色，会覆盖上一个color属性
//     textFormat: Text.PlainText // 文本格式：纯文本（富文本标签<br>/<b>会失效，仅当普通字符显示）
// }

5. 核心组件：Label（标准标签控件）

Label 是 QtQuick.Controls 提供的标准标签控件，比Text更易用，自带样式支持（内边距、背景、字体等），是开发中常用的文本展示组件。

qml 复制代码

Label{
    // visible: Fonts.isLoaded   // 注释：等待自定义字体「加载完成」后，再显示Label（避免字体未加载导致乱码）
    text: "I am a label"         // Label显示的文本内容
    font.family: Fonts.superMercado  // 引用自定义字体：从Components/Fonts组件中调用superMercado字体
    font.pointSize: 27           // 字体磅值：27（推荐用pointSize，适配不同分辨率）
    x:25                         // Label距离窗口「左上角X轴」：25像素
    y:25                         // Label距离窗口「左上角Y轴」：25像素
    leftPadding: 25              // 左内边距：文本与Label左边缘的距离
    rightPadding: 25             // 右内边距：文本与Label右边缘的距离
    topPadding:20                // 上内边距：文本与Label上边缘的距离
    bottomPadding:10             // 下内边距：文本与Label下边缘的距离

    // 设置Label的背景（自定义矩形背景）
    background: Rectangle{
        radius:25                 // 矩形圆角：25像素（实现圆角背景）
        anchors.fill:parent       // 矩形「完全填充」父组件（即Label的整个区域）
        color: "#1182B0"         // 背景颜色：十六进制蓝绿色
    }
}

二、核心知识点总结（学习笔记）

1. QML基础导入规则

官方模块：import 模块名版本号（必须指定版本，Qt Quick组件依赖版本）
自定义组件：import "./文件夹路径"（导入本地自定义QML组件，直接用文件夹内的组件名）
冗余导入：重复导入同一模块（如QtQuick 2.12/2.9）无效，保留高版本即可。

2. 窗口组件（ApplicationWindow）

是Qt Quick桌面应用的根容器，不能嵌套在其他组件内；
核心属性：id（唯一标识）、visible（显示/隐藏）、width/height（窗口大小）、title（窗口标题）。

3. 文本组件：Text vs Label

组件	定位	特点	适用场景
Text	基础组件	无默认样式，仅纯文本展示	简单文本、富文本自定义
Label	标准控件	封装好的样式（内边距/背景），支持自定义字体	开发中主流文本展示

4. 字体相关知识点

FontLoader：加载外部字体文件（.ttf/.otf），解决系统无对应字体的问题；
自定义字体：通过自定义组件（如Fonts）封装字体，实现全局复用；
字体大小：优先用 font.pointSize（设备无关），font.pixelSize 仅固定像素场景用。

5. 样式与布局核心属性

内边距（padding） ：left/right/top/bottomPadding，控制文本与控件边缘的距离；
定位：x/y 绝对定位（固定控件位置），anchors.fill:parent 填充父组件；
样式：color（颜色，十六进制）、radius（圆角）、background（自定义背景）；
换行：wrapMode: Text.WordWrap（按单词换行，最常用）。

6. 实用技巧

qsTr()：Qt国际化函数，提前加这个方便后续做多语言翻译；
富文本：Text组件支持 <br>（换行）、<b>（加粗）、<i>（斜体），需将 textFormat 设为 RichText 才生效。

三、代码注意事项

重复导入 QtQuick 2.9 是冗余代码，可删除；
font.pixelSize 和 font.pointSize 同时设置时，后者会覆盖前者；
自定义字体（Fonts.superMercado）需确保 Components 文件夹下存在 Fonts.qml 组件，否则会报错；
注释的 visible: Fonts.isLoaded 是优化项，避免字体未加载完成导致Label显示异常。

总结

这份代码是Qt Quick入门级UI代码，核心是创建窗口+展示带样式的Label；
重点掌握：模块导入、根窗口ApplicationWindow、Label控件用法、字体/样式/基础布局属性；
Text是基础文本组件，Label是开发主流选择，自定义字体和背景是UI美化的核心操作。