函数
函数格式:
function关键字 函数名(参数名1:参数类型,参数名2:参数类型,...):返回值类型{}
其中:
- 函数名必须以小写字符开头,后面驼峰
- 可以有多个参数或者没有参数
- 参数类型可以不写
- 返回值类型也可以不写
如何调用:通过id点出来
举例:
Rectangle {
id: rect
//显示指定参数类型和返回值类型
function getWidth(num1: int, num2: int): int {
return num1 + num2;
}
//不显示指定
function getHeight(num1, num2) {
return num1 * num2;
}
//调用
width: rect.getWidth(10, 20)
height: rect.getHeight(1, 20)
}
信号
信号格式:
signal关键字 信号名(参数名1:参数类型,参数名2:参数类型...)
其中:
- 信号名仍然要首字母小写,后面驼峰
- 参数可以有多个或没有
- 若有参数则参数类型必须要写
- 同一个作用域内信号名要唯一,不能多个信号重名
举例:
Rectangle {
id: rect2
width: 100
height: 50
color: "red"
//声明1个信号
signal testSignal(num: int)
}
自动绑定信号的槽函数
定义一个信号号,同时可以定义一个自动绑定信号的槽函数
即自己发出信号,自己接收信号然后处理
格式为:
on信号名(参数列表){}
其中:
- 信号名的首字母要变成大写
- 参数的个数可以少于信号的个数,也可以多于信号的参数
- 参数不能加参数类型,只需要参数名
举例:
Rectangle {
id: rect2
width: 100
height: 50
color: "red"
//声明1个信号
signal testSignal(num: int)
//on+信号名首字母大写
//信号处理函数中打印这个参数
onTestSignal: (num) => {
print(num);
}
//槽函数参数可以没有,也可以多与信号
// onTestSignal:(num1,num2)=>{
// print(num1);
// }
// onTestSignal:{
// //没有参数时,即忽略信号里的参数,不使用
// print("----");
// }
//点击这个矩形,发射信号
MouseArea {
anchors.fill: parent
onClicked: rect2.testSignal(10)
}
}
属性改变信号处理器
自定义一个属性后,qml会自动生成这个属性改变的处理器(槽函数)
同样是自己发出属性改变信号,自己接受信号处理
格式:
on属性名Changed:{}
其中:
- 属性名要变成大写开头
举例:
Rectangle {
id: rect3
width: 100
height: 50
color: "red"
//声明属性num
property int num: 10
//自动生成的属性变化处理器
onNumChanged: {
print("num属性变化了,num:" + rect3.num)
}
//点击后修改这个属性,对应的处理器就会自己调用
MouseArea {
anchors.fill: parent
onClicked: rect3.num++
}
}
connect函数
可以 将自己的信号 连接到 在其他元素中定义的槽函数
即自己发出信号,由其他对象接受信号进行处理
通常会在元素创建完成后Component.onCompleted中,将信号和槽函数进行连接
此方法连接信号和槽,对槽函数的名称没有要求
举例:
Rectangle {
id: rect4
width: 100
height: 50
color: "red"
//定义信号
signal testSignal(w: int)
MouseArea {
anchors.fill: parent
onClicked: rect4.testSignal(rect4.width)
}
//通常在元素创建完成之后将信号与对应的槽函数进行连接
Component.onCompleted: {
//信号调用connect方法连接到其他元素中的槽函数
rect4.testSignal.connect(rect5.doSomething)
}
}
Rectangle {
id: rect5
width: 100
height: 50
color: "yellow"
//定义槽函数
function doSomething(w: int) {
print("4号矩形的宽度是:" + w)
}
}
Connections元素
可以 将其他元素中的信号 与 自己的槽函数进行连接
Connections元素的写法:
Connections {
//需要指定target,即连接谁的信号
target: 某个元素的id
//可以在Connections同时连接多个信号
function on信号名(){}
}
槽函数格式为:
和普通函数一样,只是名称有要求
function关键字 on信号名(参数名1:参数类型,参数名2:参数类型,...):返回值类型
其中:
- 信号名的首字母要变成大写
举例:
Rectangle {
id: rect6
width: 100
height: 50
color: "red"
signal mySignal1(info: string)
signal mySignal2()
//点击发射信号
MouseArea {
anchors.fill: parent
onClicked: {
rect6.mySignal1("你好")
rect6.mySignal2()
}
}
}
Rectangle {
id: rect7
width: 100
height: 50
color: "blue"
//连接rect6中的信号
Connections {
//需要指定target,即连接谁的信号
target: rect6
//可以在Connections同时连接多个信号
//连接rect6中的mySignal1信号
function onMySignal1(info: string) {
print(info)
}
//连接rect6中的mySignal1信号
function onMySignal2() {
print("响应rect2中的mySignal2信号")
}
}
}
注意connect函数和Connections元素的区别
- 前者是将自己的信号连接其他元素的槽函数
- 后者是将自己的槽函数连接到其他元素中的信号
基本数据类型
其中:
color,font,rect,point如何赋值:
property color c: "#FF112233" //ARGB,前面两位那个是透明度
property point p: Qt.point(50, 100)
property rect r: Qt.rect(50, 50, 100, 100)
property font f: ({
family: "微软雅黑"
}) //js对象
property font ff: Qt.font({
family: "微软雅黑",
bold: true
})
枚举类型注意点:
- 自定义的qml文件的名称需要首字母大写,定义的枚举无法在当前qml文件中使用和访问
- 当前qml文件中只能使用其他qml文件中定义的枚举
- 枚举名需要首字母大写,枚举值也要首字母大写
- 访问格式:qml文件名.枚举类型名.枚举值
举例:
MyItem.qml文件中定义了枚举Week
Item {
width: 100
height: 100
enum Week{
Mon=1,
Tue=2
}
}
在另一个qml文件中使用
Rectangle{
width:100
height:100
//定义了一个属性,并赋枚举值
property int week:MyItem.Week.Mon
}
其他类型
qml自带的或者自己定义的这些元素类型
Rectangle {
width: 100
height: 100
//定义了一个属性,属性的类型是自己定义的元素
property MyItem myitem: MyItem {
width: 100
}
//定义了一个属性,属性的类型是qml自带的Button
property Button btn: Button {
text: "按钮"
}
}
js对象
Rectangle {
width: 100
height: 100
//js里的日期
property
var datee: new Date()
}