Qml 开发笔记

 

1. 编译中出现“The process could not be started!”错误

 

在Qml Viewer中添加qml Exe路径“C:/Qt/4.7.0/bin/qmlviewer.exe”

Main QML File可以选择 编译运行的qml文件

 

2. 

在Model的append方法中每一个属性间需要“,” 分割,如果没有的话运行会报,Unable to assign [undefined] to QUrl source 错误

 

3.

如果将model单独写出一qml,则ListView中的model要使用model的qml文件名并加"{}",否则如果都写在main中,则ListView中的model使用model的id。

 

4. 如何在QML中直接调用Qt中类的方法。

http://www.thisisqt.com/forum/viewthread.php?tid=346

http://www.thisisqt.com/?action-viewnews-itemid-12

http://wiki.forum.nokia.com/index.php/%E5%9C%A8C%2B%2B%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8QML

 

 

为了能让在QML中可以直接调用某个方法,这个方法需要满足以下两个条件其中一个:

1.这个方法是是一个公开的槽,即声明在public slots访问区域中的方法。但有个缺点,槽没有返回值,

如果你需要使用返回值,请使用条件2。

2.方法的声明前需要带Q_INVOKABLE宏.

 

在main函数中我们调用setContextProperty将StringHelper设为QDeclarativeView中根元素上下文的一个属性。

这样ui.qml中的根元素rec就可以将StringHelper视为其子元素。

 

 

5. QML WorkerScript Element

The WorkerScript element enables the use of threads in QML

 

source : url

Signals : onMessage

Methods : sendMessage

 

Detailed Description

Use WorkerScript to run operations in a new thread. This is useful for running operations in the background so that the main GUI thread is not blocked.

Messages can be passed between the new thread and the parent thread using sendMessage() and the onMessage() handler.

 

 

6.

property color buttonColor: "lightblue"

自定义的属性用property type name:值 语句来声明。

 

 

7. QML之可视化元素

1、Item

所有的QML可视化元素都继承自Item。Item没有可视化界面,但是它定义了可视化元素的所有属性。

//记住要为Item指定width和height不然运行看不到窗体 

 

 

 

 

8. 下面是介绍QML元素。元素作为QML编程的最基本单元。主要分为以下几大类:

Basic Visual Items(基础可视单元)

Basic Interaction Items(基础交互单元)

States(状态)

Animation and Transitions(动画和过渡)

Working with Data(数据操作)

Views(视图)

Positioners(位置)

Utility(通用)

Transforms(变换)

Effects(效果)

 

 

9. Qml中的定时器是Timer对象

     Timer {

         interval: 100; running: true; repeat: true;

         onTriggered: clock.timeChanged()

     }

clock.timeChanged调用的是Id为clock的组件中的json函数 timeChanged()

 

<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 ---
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值