QML深入学习三（JavaScript用法）

QML之JavaScript用法

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
    id:containerRectid
    width:100
    height: getHeight()
    color: x>300?"lightgray":"blue"
    // anchors.centerIn: parent  //拖动就不能使用这个了，不然拖动不生效。
    //java script 函数,注意作用域。
    function getHeight(){
        console.log("width =",width)
        return width*2
    }
    }
    MouseArea{
        anchors.fill: parent
        drag.target: containerRectid
        drag.axis: Drag.XandYAxis
        drag.minimumX: 0
        drag.maximumX: parent.width - containerRectid.width
        drag.minimumY: 0
        drag.maximumY: parent.height - containerRectid.height
    }
}

调用外部的函数

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import "utilities.js" as Utilities  //as后首字母必须大写
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
    id:containerRectid
    width:100
    height: 100
    color: "lightgray"
    MouseArea{
        anchors.fill: parent
        onClicked: {
            Utilities.greeting()
        }

    }
    }

}

js文件中这么写，仅仅只在当前文件有效

//问候
function greeting() {
    console.log("greeting in utilities.js")
}

循环嵌套调用

.import "utilities1.js" as Utilities1  //as后首字母必须大写

//问候
function greeting() {
    console.log("greeting in utilities.js")
    Utilities1.add(1+3)
}

function add(a,b) {
    console.log("method for utilities add ",a+b )
    return a+b
}

跨文件调用（已经废弃了）

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
import "utilities.js" as Utilities  //as后首字母必须大写
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
    id:containerRectid
    width:100
    height: 100
    color: "lightgray"
    MouseArea{
        anchors.fill: parent
        onClicked: {
            // Utilities.add()
            console.log("ret = ",Utilities.add(1,3))
        }

    }
    }

}

// .import "utilities1.js" as Utilities1  //as后首字母必须大写
Qt.include("utilities1.js")
//问候
function greeting() {
    console.log("greeting in utilities.js")
    // Utilities1.add(1+3)
    add(1,3)
}

function add(a,b) {
    console.log("method for utilities add  = ",a+b )
    return a+b
}

JS模块

mjs文件都需要导入在资源文件中才可以使用的噢

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
// import "utilities.js" as Utilities  //as后首字母必须大写

import "utilities1.mjs" as Utilities1 //这里只能这样，不能下面
// import * as utilities1 from "utilities1.mjs"

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
    id:containerRectid
    width:100
    height: 100
    focus: true
    color: "lightgray"
    MouseArea{
        anchors.fill: parent
        onClicked: {
            console.log("ret = ",Utilities1.com(1,3))
            console.log("ret = ",Utilities1.diff(1,3))

        }
    }
    Keys.onPressed: function(event){
        if(event.key === Qt.Key_Q){
            console.log("press  is 0 with ctrl ");
            Qt.quit();
        }
    }
    }

}

import * as Utilities2 from "utilities2.mjs" //只能用这种方式，不能下面
// import "utilities2.mjs" as Utilities2

export function com(a,b)
{
    return Utilities2.add(a,b)
}

export function diff(a,b)
{
    return Utilities2.sub(a,b)
}


export function add(a,b) //export证明可以向外部导出，不加外部不可用
{
    return a+b
}

function sub(a,b)
{
    return a-b
}

按键退出程序

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.15
// import "utilities.js" as Utilities  //as后首字母必须大写

import "utilities1.mjs" as Utilities1 //这里只能这样，不能下面
// import * as utilities1 from "utilities1.mjs"

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Qml 91 learn")
    Rectangle{
    id:containerRectid
    width:100
    height: 100
    color: "lightgray"
    MouseArea{
        anchors.fill: parent
        focus: true
        onClicked: {
            console.log("ret = ",Utilities1.com(1,3))
            console.log("ret = ",Utilities1.diff(1,3))

        }
    }
    // Keys.onPressed: function(event){
    //     if(event.key === Qt.Key_Q){
    //         console.log("press  is 0 with ctrl ");
    //         Qt.quit();
    //     }
    // }
    }
    //Qt5的windows没有focus属性，用以下实现
    Shortcut {
        sequence: "q"
        context: Qt.ApplicationShortcut
        onActivated: Qt.quit()
    }

}