目录

一、简介

二、QML文件介绍

 三、导入JavaScript文件

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

2.main.qml中调用

四、Others

一、简介

        从 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文件。