QML学习之QML和JavaScript脚本

1，以函数function(参数){…}的形式定义JavaScript函数，每次SpacePress递增时绑定属性也将更新

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import './JieJs.js' as Jie   //导入js文件
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Text {
        // (1)
        id: thislabe
        // (2)
        x: 24 ; y: 16
        // (3)
        height: 2 * width
        // (4)
        property int times: 24
        // (5)
        property alias  anotherTimer: thislabe.times
        // (6)
        text:"thislabe " + anotherTimer
        // (7)
        font.family: "宋体"
        // (8)
        font.pixelSize: 24
        // (9)
        KeyNavigation.tab: thatLabel
        onHeightChanged: console.log('height:',height)
        focus: true
        color: focus ? "red" : "black"
    }

    Text {
        id: thatLabel
        text: "thatLabel " + thislabe.times
        // 当按下tab键focus切换到thislabe上
        focus: !thislabe.focus
        KeyNavigation.tab: thislabe
        color: focus ? "red" : "black"

        // 调用js函数方法
        Keys.onSpacePressed: {increment()}
        // js函数
        function increment(){
            thislabe.times += 1
        }
    }
}

2. 创建js文件以别名方式导入js文件,就可以使用js里面的方法

// JieJs.js
function OperotorNumber(number) {
    this.number = number

    this.add = function(num) {
        return number + num
    }

    this.sub = function(num){
        return number - num
    }
}

// main.qml
import './JieJs.js' as Jie   //导入js文件