一、简介

从 Qt 4.7 开始，Qt 引入了一种声明式脚本语言，称为 QML（Qt Meta Language 或者 Qt Modeling Language），作为 C++ 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库。 QML 是一种基于 JavaScript 的声明式语言。

二、QML文件介绍

一个 QML 文档分为 import 和 declaration 两部分。

import用于引入文档中所需要的组件（有可能是类库，也可以是一个 JavaScript 文件或者另外的 QML 文件）；
declaration 用于声明本文档中的 QML 元素。

import QtQuick 2.12
import QtQuick.Window 2.12 //Window模块代表一个窗体
import QtQuick.Controls 2.14 //Controls模块有很多的控制组件//每一个QML文件都需要一个根元素，eg:Window
Window {id:root //建议根元素的id直接叫“root”visible: truewidth: 640height: 480title: qsTr("Hello World") //出现在QML 中的字符串如果需要翻译则可以通过使用 qsTr()来进行标记。Row {   //横排spacing: 5//可视控件Button{id:addBtntext: qsTr("add")onClicked: {text.text=(add(1,2))}function add(num1,num2){return num1+num2;}}Slider{id:sliderfrom: 1to:100value: 50onValueChanged: {text.text=(value);}}Text {id: text}}
}

三、导入JavaScript文件

1.创建一个js文件：MyJs.js

Javascript语言不支持"类"，但是可以用一些变通的方法，模拟出"类"。

定义类的关键字是function而不是class。

构造函数法

用构造函数模拟"类"，在其内部用this关键字指代实例对象。

function MyJSClass(num){this.num=num;this.add= function (number){return number+num;}this.sub= function (number){return number-num;}
}

2.main.qml中调用

import "./MyJs.js" as Test //起别名，首字母大写

        Button{id:testJsBtntext: "testJs"onClicked: {let t= new Test.MyJSClass(10);text.text=(t.add(11));text.text=(t.sub(11));}}

四、Others

Qt安装目录下的qmlscene.exe 可以打开qml文件。

Qt | 初识QML相关推荐

qt之qml开发优缺点_linux配置vlc-qt
vlc-qt 是基于vlc库,用于开发音频视频应用,性能优秀. vlc-qt/vlc-qtgithub.com 使用vlc-qt首先需要编译vlc-qt (windows可以下载使用编译好的,但是只 ...
QT集成QML和JavaScript
QT 集成QML和JavaScript 集成QML和JavaScript JavaScript表达式 JavaScript资源 JavaScript导入 JavaScript主机环境精调JavaSc ...
Qt与QML的枚举绑定（C++枚举）
Qt到QML的枚举绑定 QML中是不支持c++的枚举类型的,所以我们可以使用Qt的元对象系统,即MOS,来帮助我们实现. 进行绑定的好处就是,以后数据发生变化的时候,就是枚举发生增加修改,添加等的时候 ...
【Qt】QML快速入门7——输入元素
QML快速入门 [Qt]QML快速入门1--语法:https://blog.csdn.net/See_Star/article/details/113729827 [Qt]QML快速入门2--基本元素 ...
Qt Quick QML 实例之疯狂数字游戏（QML C++混合编程、翻译、QSetting ）【建议收藏】
文章目录一.开门见山二.最基本的框架(v0.1) 1. 后端数据处理 2. 导出 C++ 对象的 QML 的属性 3. 前台 UI 数据三.完善执行逻辑(v0.2) 四.发布版本(v1.0) 1 ...
Qt基于Qml图片翻转演示
效果: qml源码 import QtQuick 2.12 import QtQuick.Controls 2.12ApplicationWindow {id: rootvisible: truewi ...
Qt Quick QML
Qt Quick简介 Qt Quick是一个用于帮助开发者设计直观,现代,流畅的用户界面的技术集,近年来被广泛应用于手机,媒体播放器,机顶盒和其他手提设备.Qt Quick中包含了大量的用户界面元素, ...
Qt基于Qml超链接使用
演示效果 1.鼠标区域相关属性 hoverEnabled: true;//鼠标在控件范围内 cursorShape: (containsMouse? Qt.PointingHandCursor: Qt ...
Qt基于Qml实现分页控件
演示效果分页控件实现Qml PageNavigation.qml import QtQuick 2.12 import QtQuick.Controls 2.12Row{id: pageNaviga ...

Qt | 初识QML