QML基础语法2

函数

函数格式：

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()
}