【QT Quick】函数与信号处理：QML函数定义与调用

news2024/10/8 18:08:32

本节课讲解了如何在 QML 6 中定义和调用函数，探讨了函数与属性、JS 函数的关系，以及它们在不同场景中的使用方法。我们将按照以下内容展开详细教程：

QML 函数基本特征

QML 6 中函数作为属性的一部分存在，类似 C++ 的成员函数。
函数可以包含参数和返回值，但这些都是可选的。
QML 6 和 JS 函数互相兼容，但 JS 函数不支持 QML 类型，因此当函数调用跨到 JS 层时，通常使用 var 类型或不指定类型。

QML 6 函数定义格式

函数的名称必须以小写字母开头，符合语法格式要求。

可以定义参数类型和返回值类型，格式如下：

function 函数名(参数1: 参数类型, 参数2: 参数类型): 返回值类型 {
    // 函数体
    return 返回值;
}

与 JS 函数的区别

JS 函数灵活，但没有强类型检查，而 QML 函数可以指定类型。
JS 函数与 QML 函数通过 import 模块互相调用。QML 通过 ID 来访问不同层次的函数，JS 则通过模块名访问。

函数调用的两种方式

直接调用：通过 ID 或当前作用域直接调用。
作为属性赋值：QML 属性可以赋值为一个函数，返回值将影响属性值。

函数指针与回调机制

QML 6 中函数也可作为变量传递，类似 C++ 中的函数指针。此特性允许实现回调机制，用于动态重构函数逻辑。

示例代码讲解

定义简单函数

我们首先在 QML 中定义一个简单函数：

import QtQuick
import QtQuick.Controls

Rectangle {
    width: 200
    height: 100
    id: root
    
    function testFunction(index: int, str: string): int {
        console.log("Called with index:", index, "and str:", str)
        return 1001
    }
    
    Button {
        text: "Call Function"
        anchors.centerIn: parent
        onClicked: {
            let result = root.testFunction(99, "Hello")
            console.log("Function returned:", result)
        }
    }
}

调用与返回值

在按钮点击时调用函数 testFunction，并传递参数 99 和 "Hello"。
输出函数返回的值 1001。

Button {
    text: "Call Function"
    onClicked: {
        let result = root.testFunction(99, "Hello")
        console.log("Function returned:", result)
    }
}

使用 JS 文件定义函数

可以将函数定义在独立的 JS 文件中，并通过 QML 调用：

在 QML 中引入 JS 文件：
```
import "myFunctions.js" as MyFunctions
```

在 myFunctions.js 中定义函数：

function externalFunction(arg) {
    console.log("External function called with arg:", arg)
    return arg.length
}

调用方式：

onClicked: {
    let length = MyFunctions.externalFunction("Hello from JS")
    console.log("Length returned:", length)
}

通过属性调用函数

我们可以将属性赋值为一个函数，从而动态决定属性值：

Text {
    text: getTitle()
    
    function getTitle(): string {
        return "Dynamic Title"
    }
}

多层次与函数作用域

在复杂的组件层次中，使用 ID 来确保正确调用：

Item {
    id: parentItem
    
    Rectangle {
        id: childItem
        function childFunction() {
            console.log("Called child function")
        }
    }
    
    Button {
        text: "Call Child Function"
        onClicked: {
            childItem.childFunction()
        }
    }
}

动态函数重写

通过属性和函数指针实现函数重构：

Rectangle {
    width: 200
    height: 100
    id: root
    
    function defaultFunction() {
        console.log("Default function")
    }
    
    var currentFunction = defaultFunction
    
    Button {
        text: "Call Function"
        onClicked: {
            root.currentFunction()
        }
    }
    
    Component.onCompleted: {
        // 动态修改函数指针
        root.currentFunction = function() {
            console.log("New function called")
        }
    }
}