Qt界面UI之QML初见(学习笔记四)
2017-12-20 19:16
323 查看
拖了大半年,今天终于有更新了。。。我自己都不好意思,最近太忙了!
今天讲一下:QML语法
属性通过“属性:值”来初始化,属性和它的值使用一个冒号隔开。属性可以分开写,也可写在一行,分开时分号不是不需的,写在一行必须有分号。
表达式中可包含其他对象或属性的引用,这样便创建了一个绑定,当表达式的值改变时,这个属性会自动更新为新的值。
接下来详细的讲解下import语句
<DirectoryPath>既可以是本地目录,也可以是远程目录
<Qualifier>和前面一样,是限定符。
例如:
import “../mycomponnets” 和 import "https://wiki.autodesk.com/mycomponnets"
注意:当导入网络上的目录时,只能访问该目录qmldir文件制定的QML文件和JavaScript文件。
目录清单的语法如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/fd5464e70740c2d1730ece3c7bae8034.png)
每个导入的JavaScript文件都要指定一个标识符,以便能够在QML文档中访问,这个标识符必须是唯一的。
此笔记主要参考《QT5编程入门》一书,并非原创,但写了这么多也很耗时,纯手打。
今天讲一下:QML语法
一 概述
QML是一种专门用于构建用户界面的编程语言,它允许用户构建高性能,具有流畅特效的可视化应用程序,QML是可读的,声明式的文档,具有类似JSON的语法,支持使用JavaScrip表达式,具有动态属性绑定等特性。二 QML语法基础
QMl的代码一般长如下:import QtQuick 2.2 Rectangle { width: 360 height: 360 MouseArea { anchors.fill: parent onClicked: { Qt.quit(); } } Text { anchors.centerIn: parent text: "Hello World" } }
1 导入语句 import
import语句导入了QtQuick模块,它包含了QML各种类型!2 对象和属性
QML文档就是一个QML对象树,在这段代码中创建了两个对象,Rectangle和它的子对象Image,对象有它的类型指定,大写字母开头,后面跟一对大括号,里面有宽,高,颜色等属性。属性通过“属性:值”来初始化,属性和它的值使用一个冒号隔开。属性可以分开写,也可写在一行,分开时分号不是不需的,写在一行必须有分号。
Rectangle { width: 360 height: 36 }
3 布局
Image的anchors.centerIn起到了布局的作用,使Image处于对象的中心位置。还有其他布局方式。4 注释
QML的注释和javascript相似。//单行注释,/**/多行注释。5 表达式
“属性:值”中的值可以设置成表达式,例如:Item { width: 100*3 height: 50+22 }
表达式中可包含其他对象或属性的引用,这样便创建了一个绑定,当表达式的值改变时,这个属性会自动更新为新的值。
6 调试输出
在QML代码中,可以用console.log()和conlole.debug()来输出调试信息。接下来详细的讲解下import语句
三 import导入语句
默认情况下,QML文档可以访问到该.qml同目录下的对象类型,要想访问其他对象类型,就必须使用import导入该类型的命名空间。1 模块导入
import<ModuleIdentifier><Version.Number> [as<Qualifier>] 例如:import QtQuick 2.2 as Quick Quick.Rectangle { width: 360 height: 360 }
2 导入目录
QML文档支持直接导入包含有QML文档的目录:import “<DirectoryPath>” [as<Qualifier>]<DirectoryPath>既可以是本地目录,也可以是远程目录
<Qualifier>和前面一样,是限定符。
例如:
import “../mycomponnets” 和 import "https://wiki.autodesk.com/mycomponnets"
注意:当导入网络上的目录时,只能访问该目录qmldir文件制定的QML文件和JavaScript文件。
3 目录清单qmldir文件
除了远程目录,本地目录也可以包含一个qmldir文件,这样可以只暴露qmldir中指定类型给导入该目录的客户端。如果目录中的JavaScript资源没有声明在一个qmldir文件中,那么它们不能暴露给客户端。目录清单的语法如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202011/09/fd5464e70740c2d1730ece3c7bae8034.png)
4 JavaScript资源导入语句
import “<JavaScriptFile>” as "<Identifier>"每个导入的JavaScript文件都要指定一个标识符,以便能够在QML文档中访问,这个标识符必须是唯一的。
此笔记主要参考《QT5编程入门》一书,并非原创,但写了这么多也很耗时,纯手打。
相关文章推荐
- Qt界面UI之QML初见(学习笔记四)
- Qt学习笔记之一,登录界面。
- 【Qt学习笔记】14.界面的样式 (Qt Stylesheet)
- QT学习笔记5---QtDesigner设计ui文件并调用
- 一个基于qt的桌面聊天系统的学习笔记(1)-邮件模块(1)邮件界面的初始化流程
- Qt学习笔记-界面设置入门
- 【Qt学习笔记】001 基础篇——多窗口&登录界面
- Cocos2d-x 3.2 学习笔记(十四)保卫萝卜之界面UI
- [1]PyQt学习01-Qt Designer生成的界面UI代码分析
- qml学习笔记(一):界面元素初探
- QT笔记---UI学习
- Qt 学习笔记--------------------使用纯代码写dialog 与 UI文件
- Qt界面简单绘图学习笔记
- 【WPF学习】WPF、WinForm(C#)多线程编程并更新界面(UI)/子线程更新主界面方式
- qt学习笔记(四)之对话框-Qt内建对话框 .
- Qt Model/View 学习笔记
- QT学习笔记----窗口的相互切换
- Qt学习笔记之图片的上下左右移动
- QML与现有Qt UI代码的整合
- QT学习(五)----360界面制作(2终结)