Qml学习——使用JavaScript

最近在学习Qml，但对Qml的各种用法都不太熟悉，总是会搞忘，所以写几篇文章对学习过程中的遇到的东西做一个记录。
学习参考视频：https://www.bilibili.com/video/BV1Ay4y1W7xd?p=1&vd_source=0b527ff208c63f0b1150450fd7023fd8
其他文章：
Qml学习——动态加载控件
Qml学习——控件状态
Qml学习——使用JavaScript
Qml学习——动画
Qml学习——鼠标事件处理MouseArea
Qml学习——布局
Qml学习——基本控件

---

1 定义函数

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true; width: 200;height: 120

    Button {
        text: 'calculate'
        onClicked: console.log(sum(3, 4))
        function sum(arg1, arg2) {
            return arg1 + arg2
        }
    }
}

2 使用.js文件

例如现有一个robot.js文件，它的内容如下。

var x = 0
var y = 0

function goRight() {
    x++
    printLocation()
}

function goLeft() {
    x--
    printLocation()
}

function goUp() {
    y++
    printLocation()
}

function goDown() {
    y--
    printLocation()
}

function printLocation() {
    console.log("locate: (" + x + ", " + y + ")")
}

提供了四个函数控制机器人往上下左右移动，并打印当前坐标。
把它导入到项目。

配合界面使用。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import './robot.js' as Robot   //别名必须大写开头

Window {
    visible: true; width: 200; height: 120

    GridLayout {
        columns: 2
        Button {
            text: 'right'
            onClicked: Robot.goRight()
        }
        Button {
            text: 'left'
            onClicked: Robot.goLeft()
        }
        Button {
            text: 'up'
            onClicked: Robot.goUp()
        }
        Button {
            text: 'down'
            onClicked: Robot.goDown()
        }
    }
}