Qt | 初识QML

目录

一、简介

二、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: true
    width: 640
    height: 480
    title: qsTr("Hello World") //出现在QML 中的字符串如果需要翻译则可以通过使用 qsTr()来进行标记。
    Row {   //横排
        spacing: 5
        //可视控件
        Button{
            id:addBtn
            text: qsTr("add")
            onClicked: {
                text.text=(add(1,2))
            }
            function add(num1,num2)
            {
                return num1+num2;
            }
        }
       
        Slider{
            id:slider
            from: 1
            to:100
            value: 50
            onValueChanged: {
                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:testJsBtn
            text: "testJs"
            onClicked: {
                let t= new Test.MyJSClass(10);
                text.text=(t.add(11));
                text.text=(t.sub(11));
            }
        }

四、Others

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