实战|Qt开发WordBN笔记软件#07 学习QML信号、连接槽实现，方法；消息对话框

最新推荐文章于 2024-12-24 13:12:47 发布

天恩软件工作室

最新推荐文章于 2024-12-24 13:12:47 发布

阅读量895

点赞数 31

分类专栏：实战Qt开发WordBN字远笔记文章标签： QML实战笔记软件

本文链接：https://blog.youkuaiyun.com/yanghz/article/details/140579893

版权

实战Qt开发WordBN字远笔记专栏收录该内容

10 篇文章

订阅专栏

01 背景

【WordBN字远笔记】是天恩软件工作室开发的一款免费笔记软件；WordBN基于VS2019、Qt6.5开发，使用Qt Quick（QML）开发语言。

本课程将以【WordBN字远笔记】的界面为实战基础，详细介绍如何基于Qt/QML开发语言，从零开始开发一套真正的程序，包括国际化、版本发布、安装包制作等项目实战技巧。

本课程重点不是教你如何开发一个笔记软件，而是教你如何利用Qt/QML+C++开发一个完整的程序，整套课程规划有40+章节，敬请关注！

本章内容《#07 学习QML信号signal、连接connect槽实现，方法function；消息对话框MessageDialog》

02 课程目标

学习QML信号signal、连接connect、槽实现。
学习QML方法function。
学习标准消息对话框MessageDialog的使用。

03 知识点

信号（signale）：信号（signal）是对象之间通信的一种方式，它允许一个对象在发生特定事件时通知其他对象。与C++中的信号和槽机制类似，QML中的信号也是基于Qt的元对象系统，但QML以更简洁和声明式的方式处理它们。
QML使用signal修饰一个信号，信号函数首字母必须用小写，如 signal aboutClicked()。
信号（signal）槽函数：监听对象信号（signal）槽函数，使用on+信号名称（首字母大写），如 onAboutClicked()。
函数（function）：函数（function）是定义在QML组件或QML文件中，用于执行特定任务的代码块。这些函数可以被QML的其他部分调用，包括其他QML文件、属性绑定、信号处理器等。QML函数通常使用JavaScript语法编写，因此它们支持JavaScript的所有基本功能和表达式。如下是一个函数例子：

function calculateSum(a, b) {
    var sum = a + b;
    return sum;
}

MessageDialog组件：MessageDialog是一个用于显示消息对话框的QML组件，它允许开发者在Qt Quick应用程序中向用户展示信息、警告或询问用户意见。
console.log()函数：console.log()用于在控制台输出信息，console.log 并不是一个直接定义在QML语言本身中的函数，而是借用了JavaScript的控制台输出功能。因为 QML 使用 JavaScript 作为其脚本语言，因此可以在QML文件中使用JavaScript的 console.log() 方法来输出日志信息到控制台（通常是在开发者的IDE或调试器的控制台输出窗口中）。

04 在菜单栏添加signal信号

打开YMenuBar.qml菜单栏，添加signal信号函数，代码如下：

signal newFileClicked();
signal aboutClicked();
signal helpClicked();

05 signal信号二种绑定机制

connect连接绑定方式：在Component.onCompleted组件完成槽函数添加绑定，示例代码如下：

idNewFile.triggered.connect(newFileClicked);

调用信号绑定方式：在菜单触发槽函数，调用信号函数绑定，示例代码如下：

MenuBar {
    id: idMenuBar
    
    signal      
    Menu {
        id: fileMenu
        title: qsTr("&File")

        MenuItem {
            text: qsTr("&New")
            onTriggered: idMenuBar.newFileClicked()
        }

    }
    
}

06 在主界面实现菜单栏信号槽函数

QML槽函数名称格式：onXxx()；on+signal信号（首字母大写）。如signal newFileClicked() 信号对应槽函数写 onNewFileClicked()
主界面实现YMenuBar菜单栏信号槽函数，示例代码如下：

menuBar: YMenuBar {

    onNewFileClicked: {
        console.log("new file clicked.");
    }

}

另一种槽函数写法：当槽函数只有一行代码，可以不写 { } 格式，直接写成下面代码例子：

onNewFileClicked: console.log("new file clicked.")

07 QML方法：function

QML方法名称格式：function functionName() {}，首字母小写；如下例子：

function doNewFile() {
    console.log("new file clicked.");
}

menuBar: YMenuBar {

    onNewFileClicked: {
        doNewFile();
    }

}

08 标准消息对话框MessageDialog的使用

使用消息对话框MessageDialog，main函数需要使用QApplicaiton初始应用；同时添加Widgets模块。
main函数修改代码如下：

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    // ...    
}

在CMakeLists.txt文件添加Widgets模块，代码如下：

// ...
find_package(Qt6 6.4 REQUIRED COMPONENTS Quick Widgets)
// ...

target_link_libraries(appYourWordBN
    PRIVATE Qt6::Quick
    PRIVATE Qt6::Widgets
)
// ...

使用MessageDialog消息对话框，例子代码如下：

import QtQuick
import QtQuick.Controls
import Qt.labs.platform

ApplicationWindow {
    visible: true
    width: utils.getScreenWidth()-20
    height: utils.getScreenHeight()-80
    title: qsTr("WordBN")

    function doNewFile() {
        console.log("new file clicked from function")
    }

    MessageDialog {
        id: idMessageDialog
        title: qsTr("Help")
        text: qsTr("这是一个帮助文档。")

    }

    menuBar: YMenuBar {

        onNewFileClicked: doNewFile()

        onHelpClicked: {
            // 显示帮忙信息（MessageDialog）
            idMessageDialog.open();
        }

    }

}