我的QML学习笔记-前言

最新推荐文章于 2025-12-27 22:17:15 发布
原创 最新推荐文章于 2025-12-27 22:17:15 发布 · 669 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#界面 #qt #QML #Linux

这篇博客是作者关于QML的学习笔记，主要介绍了QML的基础组件，包括锚定布局和动画，还探讨了QML与JavaScript的结合，以及如何进行C++与QML的交互，如信号与槽的绑定，函数调用以及单例通信，适合Qt开发者学习。

前言

最早接触Qt是在两年多以前，刚上大一，老师教学都用VC（不知道是不是大家学校也这样），刚接触编程的骚年多少有些兴奋，就什么都玩玩，某些原因就用上了Qt。
各种语言的教学第一件事情干基本就是“hello world”，你懂的。但是我是那种更喜欢图形界面的人，总是想把看到学到的都用图形界面显示出来，所以并不安心于天天写数据结构什么的，人各有所爱嘛，喜欢算法的当然就应该没有我这种想法了（当然也有都喜欢的人啦）。当我接触到Qt的时候我就发现停不下来了，发现Qt正是我喜欢的利器啊，然后就有了很多事情咯。。。
好吧，啰嗦完了
想写这些文章的原因是想把这么久学习到的一些小技巧总结一下，做一下笔记，跟大家分享一下学习感受
我会按照一定的结构和顺序作总结，大家不用跳着看

最近这段时间在使用Qt做一个项目，使用的是QtQuick（C++和QML），最大的感受就是：只有想不到的，没有做不到的！

这个学习笔记主要会分成几个部分：
  1. QML组件
    1. QML常用的几个组件
    2. QML的锚定布局（个人特别喜欢）
    3. QML的动画
    4. QML中的函数
    5. QMl与J
最低0.47元/天 解锁文章
js 正则是否包含某些字符串_JavaScript怎么判断字符串中是否包含指定字符？
weixin_39845113的博客
12-19 2002
JavaScript中要判断字符串中是否包含某个字符串有多种方法，下面本篇文章就来给大家介绍几种使用JavaScript判断字符串中是否包含指定字符的方法，希望对大家有所帮助。方法一：使用indexOf()方法indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。var str = "123";console.log(str.in...
QML语法-对象篇（上篇）
m0_60259116的博客
02-27 687
QML语法-对象篇
QML 正则表达式 笔记
ke的博客
07-03 2686
参考 <<Qt Quick 核心编程>> 在Qt C++ 中有QRegExp , 在QML中有RegExp,它们是对字符串执行模式匹配的强大工具. 两种构造正则表达式的方法 字面量语法: /pattern/attributes 创建RegExp对象: new RexExp(pattern, attributes) 在"/String/i"这个正则表达式中, String就是模式(pattern), i是修饰符,表示忽略大小写.这个正则表达式的意思就是忽略大小写地匹配String这个单
我的QML学习笔记-QML组件（1.QML常用的几个组件--窗口阴影）
MatchYangWanQing的专栏
09-14 2541
先看一个普通组件（）的阴影效果
我的QML学习笔记-QML组件（1.QML常用的几个组件）
MatchYangWanQing的专栏
09-07 1064
常用的可视化组件：
QML学习笔记（三十三）QML的CheckBox
Larry_Yanan的博客
10-12 985
本文介绍了Qt框架中的CheckBox控件及其用法。主要内容包括：1. CheckBox的基本功能，支持两态和三态切换；2. 简单实现方法，通过checked属性设置初始状态；3. 使用ButtonGroup实现多选、互斥等复杂逻辑，详细说明了父子复选框联动机制；4. CheckBox的信号处理，特别是三态状态的判断方法；5. 自定义样式示例，展示如何修改复选框外观。文章通过代码示例和效果图，直观地演示了CheckBox控件的各种应用场景和配置方法。
QML学习笔记（七）QML的基本数据类型
Larry_Yanan的博客
09-21 815
本文介绍了QML基础数据类型的使用方法。主要内容包括：1）如何通过property关键字定义字符串、整型、布尔值等基本属性；2）在Rectangle组件中应用这些属性进行简单运算和赋值；3）使用var通用类型存储多种数据类型，包括数字、颜色、矩形、数组等；4）通过Component.onCompleted回调函数进行初始化后的日志输出和类型比较。文章通过具体代码示例展示了不同数据类型的应用场景和注意事项，并特别指出字符串比较时推荐使用===运算符以避免自动类型转换带来的问题。这些基础数据类型为QML应用程序
QML学习笔记（五）QML新手入门其三：使用Row和Colunm进行简单布局
Larry_Yanan的博客
09-20 1121
本文介绍了QML中Row和Column布局的基本使用方法，通过创建不同颜色的矩形演示了这两种布局的效果差异。文章展示了如何通过嵌套Row和Column实现复杂布局，并探讨了单个元素居中的问题。作者发现Row和Column默认不会自动居中单个子元素，尝试了固定尺寸和设置锚点等方法，但效果不理想，最后指出可能需要使用更高级的RowLayout/ColumnLayout或通过添加空白元素来模拟弹簧效果。全文以代码示例配合效果截图，直观呈现了QML布局的特性与局限。
QML学习笔记（十四）QML的自定义模块
Larry_Yanan的博客
09-26 922
本文介绍了在QT5中使用qmake实现QML自定义模块的方法。首先将自定义按钮组件放入custom_buttons文件夹，并创建qmldir文件描述模块内容。随后在pro文件中配置QML_IMPORT_PATH导入路径，并在main.cpp中添加引擎导入路径。最后解决了Creator语法高亮问题，通过+= $$PWD方式确保路径识别正确。这种模块化方式有效解决了多个自定义组件的管理问题，实现了类似C++封装的组件复用机制。
如何遍历QML Item下的所有的children并显示它们的属性
Elastic 中国社区官方博客
09-06 9833
在今天的这篇文章中，我们将用一个简单的应用来展示如何显示一个Item的所有的children并展示它们的一些主要的也一些属性． 我们的例程非常简单： Main.qml import QtQuick 2.0 import Ubuntu.Components 1.1 /*! \brief MainView with a Label and Button elem
JavaScript判断字符串中包含另一个字符串（QML 中使用）
luoyayun361的专栏
10-18 3276
前言 为啥会搞JavaScript呢，原因很简单，因为 QML 中用到了 JS 的语法，本来在 Qt 里面 QString 检查字符串是否包含一个子串是非常简单的事情，直接用contains()函数就可以搞定了，但是一到了 QML 中进行相同的判断就懵逼了，还好知道这家伙是用了 JS 的语法，所以果断搜了一堆资料进行一番总结，以免今后遇到同样问题时又是一脸懵逼。 正文 其实 JS 中有很多种方式做...
JsonRpc：手搓一个高性能Rpc服务(底座篇)
最新发布
Visual_progress的博客
12-27 338
JSON-RPC框架摘要 本文介绍了一个基于C++的JSON-RPC远程调用框架的实现。框架分为多个抽象层： 消息层：定义BaseMessage基类，包含消息ID、类型标识、序列化/反序列化等方法 连接层：BaseConnection类处理底层TCP连接，提供发送、关闭连接等功能 缓冲层：BaseBuffer类封装数据缓冲区操作 协议层：BaseProtocol类解决TCP粘包/半包问题，提供消息处理接口 服务层：包含BaseServer和BaseClient基类，分别实现服务端和客户端功能 框架采用多态设
qt加ffmpeg制作简易录屏工具
chen_227的博客
12-25 402
简易录屏工具
关于Qt QReadWriteLock(读写锁) 以及 QSettings 使用的问题
Python1996的博客
12-25 240
关于Qt QReadWriteLock(读写锁) 使用的问题。
【视频】GStreamer+WebRTC（三）：Qt和GStreamer冲突
郭老二
12-23 188
Qt 提供了一个宏：QT_NO_KEYWORDS，当定义 QT_NO_KEYWORDS 后会取消signals/slots/emit的宏定义；GStreamer 使用 glib-2.0 库来实现，而Qt 的预处理器宏 signals 与 GLib/GIO 的标识符命名冲突，而 public 是 C++ 关键字，不能作为变量名，因此编译器报错。QMake 项目（pro文件）中定义。
qt-float转QByteArray-二进制存储-数据存储（IEEE 754标准）
世转神风的博客
12-25 1059
本文介绍了在Qt C++中将float转换为IEEE 754标准4字节QByteArray的方法。通过memcpy直接拷贝内存实现高效转换，核心代码仅需5行。重点解析了内存操作原理、字节序处理（小端/大端转换）和数据验证技术，并提供了跨平台增强方案。文章还涵盖性能优化、内存安全注意事项及典型应用场景，如网络传输和硬件交互。示例代码可直接用于实际项目，完整展示了从基础实现到工业级应用的完整解决方案。
20251222 - 轻量级通信协议 JsonRPC
qq_50932511的博客
12-23 1033
哪怕这个函数不在我这台机器（或这个进程）的内存里，我也能像调用本地函数一样调用它。本地调用：你在main.cpp里写，程序直接跳转到那个内存地址执行。RPC调用前台（顾客）：想吃“宫保鸡丁”（想执行），前台也算是一个进程。后台（厨师）：在厨房里（另一个进程），前台（顾客）进不去。RPC机制：前台写一张单子塞进窗口，后台拿到单子，做好菜，再把菜（结果）递出来。错觉：对前台来说，感觉就像自己直接让菜变出来了一样，实际上是别人代劳的。JSON 就是上述那张“单子”的书写格式。
在vs-qt中,怎么修改项目名
敖丙007的博客
12-25 590
在vs-qt中,怎么修改项目名
qml学习笔记打印
09-15
<think> 我们被要求提供可用于打印的QML学习笔记。根据提供的引用资料，我们可以整理出一个结构化的学习笔记，包含QML的基本语法、结构、布局、信号和槽、函数属性等核心内容。同时，我们需要确保格式清晰，适合打印。 我们将按照以下结构组织笔记： 1. QML简介 2. QML基本结构 3. 导入模块 4. 对象声明与属性 5. 布局（锚布局） 6. 信号和槽 7. 函数属性（方法） 注意：由于是打印版，我们应避免使用代码块（但在文本中仍需清晰展示代码结构），并确保内容连贯。同时，我们将参考多个引用，并在适当位置添加引用标识。 开始整理： # QML学习笔记（可打印版） ## 1. QML简介 QML（Qt Meta-Object Language）是一种用于创建高度动态应用程序的多范式语言。使用QML，可以声明诸如UI组件之类的应用程序构建块，并设置各种属性来定义应用程序行为。应用程序行为可以通过JavaScript进一步编写脚本，JavaScript是该语言的一个子集。此外，QML大量使用Qt，这允许直接从QML应用程序访问Qt的类型和其他Qt功能[^1]。 ## 2. QML基本结构 QML文档的基本结构由元素名、属性和子元素组成： ``` 元素名 { 属性名1: 属性值1 属性名2: 属性值2 ... 子元素1 { ... } 子元素2 { ... } ... } ``` 例如： ```javascript import QtQuick 2.12 import QtQuick.Window 2.12 Window { width: 640 // 宽 height: 480 // 高 visible: true // 是否可见 title: qsTr("Hello World") // 标题 // 子元素1：矩形 Rectangle { width: 100 height: 100 color: "red" } // 子元素2：文本 Text { text: "Hello World" font.bold: true font.pixelSize: 24 color: "red" } } ``` 在这个例子中，`Window`是根元素，它包含两个子元素：`Rectangle`和`Text`[^2]。 ## 3. 导入模块 在QML中，使用`import`语句导入模块。可以导入： - 已注册类型的版本化命名空间（如`import QtQuick 2.0`） - 包含作为QML文档的类型定义的相对目录（如`import "../privateComponents"`） - JavaScript文件（如`import "somefile.js" as Script`） 示例： ```javascript import QtQuick 2.0 import QtQuick.LocalStorage 2.0 as Database import "../privateComponents" import "somefile.js" as Script ``` 导入的模块提供了在QML中使用的类型和功能[^3]。 ## 4. 对象声明与属性 在QML中，对象通过声明其类型并设置属性来创建。每个对象都可以包含属性、信号、方法等。属性可以是基本类型（如int, string, color）或复杂类型（如其他对象）。 ## 5. 布局（锚布局） QML使用锚（anchors）对元素进行布局。锚定是基础元素对象的基本属性，可以被所有的可视化QML元素使用。锚就像协议，比几何变化更强大。锚是相对关系的表达式，通常需要与其他元素搭配使用[^4]。 示例： ```javascript Rectangle { id: rect1 width: 100; height: 50; color: "blue" } Rectangle { id: rect2 width: 100; height: 50; color: "red" anchors.top: rect1.bottom // rect2的顶部锚定在rect1的底部 } ``` ## 6. 信号和槽 信号和槽机制用于对象之间的通信。当某个对象的特定事件发生时，会发出信号，而槽是响应该信号的函数。 在QML中，可以使用以下方式连接信号和槽： - 使用`on<Signal>`语法（如`onClicked: { ... }`） - 使用`Connections`对象 示例： ```javascript Button { id: button onClicked: { // 当按钮被点击时执行 console.log("Button clicked") } } ``` ## 7. 函数属性（方法） 对象类型的方法是可以调用以执行某些处理或触发更多事件的函数。方法可以连接到信号，以便在发出信号时自动调用该方法。 定义方法有两种方式： - 在C++中注册一个类的函数到QML类型系统。 - 在QML文档中直接使用函数声明语法。 语法： ```javascript function 函数名([参数1[, 参数2, ...]]) [: 返回类型] { // 函数体 } ``` 注意：与信号不同，方法参数类型不必声明（默认为`var`类型），但建议声明以提高性能和可维护性[^5]。 示例： ```javascript import QtQuick 2.0 Rectangle { id: rect width: 100 // 定义一个计算高度的方法 function calculateHeight(): real { return rect.width / 2; } height: calculateHeight() // 使用函数计算高度 } ``` ## 总结 QML是一种声明性语言，用于构建流畅的用户界面。它结合了JavaScript的灵活性和Qt的强大功能，使得开发动态应用变得简单高效。 --- [^1]: QT开发学习笔记，环境搭建、QML [^2]: QT学习笔记-qml开发 [^3]: QML学习笔记 [^4]: QML学习笔记【02】：QML快速入门 [^5]: QT中QML学习笔记2 §§相关问题§§ 1. QML中的锚布局(anchors)具体有哪些属性？ 2. 如何在QML中导入和使用JavaScript文件？ 3. 请解释QML中信号和槽的连接方式。 4. 如何优化QML应用的性能？ </think> ### QML学习笔记（可打印版） #### **一、QML基础概念** 1. **QML定义** QML（Qt Meta-Object Language）是一种用于创建动态应用程序的多范式语言。它通过声明式语法构建UI组件，支持属性绑定和JavaScript脚本，可直接访问Qt底层功能[^1]。 **核心特点**： - 组件化声明 - 属性驱动行为 - JavaScript脚本扩展 2. **基本结构** ```qml 元素名 { 属性名1: 属性值1 属性名2: 属性值2 子元素 { // 嵌套定义 } } ``` **示例**： ```qml Window { width: 640 // 宽度属性 height: 480 // 高度属性 visible: true // 可见性 Rectangle { // 子元素 color: "red" width: 100 } } ```[^2] --- #### **二、核心语法详解** 1. **导入模块** - 标准模块：`import QtQuick 2.12` - JavaScript文件：`import "utils.js" as Script` - 本地目录：`import "../components"` **注意**：版本号需与Qt安装版本匹配[^3]。 2. **属性声明** | 属性类型 | 示例 | |----------------|--------------------------| | 基础属性 | `width: 100` | | 绑定属性 | `height: width * 0.5` | | 颜色属性 | `color: "#FF0000"` | | 文本属性 | `text: qsTr("Hello")` | 3. **锚布局（Anchors）** - 相对定位元素的核心方法[^4]： ```qml Rectangle { anchors.centerIn: parent // 居中于父元素 anchors.left: sibling.right // 锚定到兄弟元素右侧 } ``` --- #### **三、进阶功能** 1. **信号与槽** - **信号定义**： ```qml signal mySignal(string message) ``` - **槽连接**： ```qml Button { onClicked: parent.mySignal("Clicked!") // 触发信号 } ``` 2. **函数属性** 动态计算方法： ```qml Rectangle { id: rect function calculateArea() { return width * height } Text { text: "面积：" + calculateArea() } } ```[^5] --- #### **四、开发实践** 1. **组件化设计** - 创建自定义组件 `MyButton.qml`： ```qml // 文件：MyButton.qml Rectangle { signal clicked Text { text: "按钮" } MouseArea { onClicked: parent.clicked() } } ``` - 主文件调用： ```qml MyButton { onClicked: console.log("按钮被点击") } ``` 2. **性能优化** - 避免过度嵌套布局 - 使用`Loader`动态加载组件 - 启用QML缓存机制（`qmlcache`） --- #### **引用来源** [^1]: QT开发学习笔记，环境搭建、QML [^2]: QT学习笔记-qml开发 [^3]: QML学习笔记 [^4]: QML学习笔记【02】：QML快速入门 [^5]: QT中QML学习笔记2 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值