最近在学习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()
}
}
}