找回密码
 立即注册

第4篇 Qt5基础(四)添加菜单图标(使用Qt资源文件 )

发表于 2017-3-3 20:58:55 | 显示全部楼层 |阅读模式


版权声明

该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处!

导语

       后面几篇里我们将介绍经典的Qt主窗口部件QMainWindow,主窗口部件就是一般的应用程序主窗口,它包含了菜单栏、工具栏、中心部件、状态栏和可停靠部件等。这一篇将着重介绍菜单的实现以及使用资源文件来添加菜单图标。


环境:Windows 7 + Qt 5.8.0(包含QtCreator 4.2.1



目录

一、添加主窗口菜单
二、添加菜单图标
三、添加资源文件
四、使用资源文件
五、使用代码来添加菜单和图标

正文


一、添加主窗口菜单

1.新建Qt Widgets Application,项目名称为mymainwindow,基类选择QMainWindow,类名为MainWindow

2.创建完项目后,双击mainwindow.ui文件进入设计模式。在这里可以看到界面左上角的“在这里输入”,我们可以在这里添加菜单。双击“在这里输入”,将其更改为“文件(&F)”,然后按下回车键,效果如下图所示。这里的&F表明将菜单的快捷键设置为了Alt+ F,可以看到,实际的显示效果中&符号是隐藏的。



3.同样的方法,我们在文件菜单中添加“新建(&N)”子菜单,效果如下图所示。菜单后面的那个加号图标是用来创建下一级菜单的。(PS:菜单中如果无法输入中文,可以从别处复制粘贴)



二、添加菜单图标


1.Qt中的一个菜单被看做是一个Action,我们在下面的Action编辑器(Action Editor)中可以看到刚才添加的“新建”菜单,如下图所示。



2.双击该条目,会弹出编辑动作对话框,这里可以进行各项设置,比如我们可以设置菜单项的快捷键,点击一下Shortcut后面的行编辑器,然后按下键盘上的Ctrl + N,这样就可以将该菜单项的快捷键设置为Ctrl + N。如下图所示。那么大家可能会问,既然该菜单项的快捷键是这么设置的,那么菜单项名称“新建(N)”中的N是什么呢?这个可以被称为加速键,就是只有当文件菜单处于激活(显示)状态时,按下N键才会执行新建菜单的功能。



3.在编辑动作对话框中的“图标”后面的黑色箭头下拉框可以选择使用资源还是使用文件来最为图标,如果使用文件的话,那么就可以直接在弹出的文件对话框中选择本地磁盘上的一个图标文件。下面我们来讲述使用资源的方式,如果直接点击这个按钮就是默认的使用资源。现在我们先按下编辑动作对话框的OK按钮关闭它。


三、添加资源文件


1.Qt中可以使用资源文件将各种类型的文件添加到最终生成的可执行文件中,这样就可以避免使用外部文件而出现的一些问题。而且,在编译时Qt还会将资源文件进行压缩,我们可能发现生成的可执行文件比我们添加到其中的资源文件还要小。


2.我们向项目中添加新文件,模板选择Qt分类中的Qt资源文件(Qt Resource File)。如下图所示。然后将名称设置为myicon




3.添加完文件后会自动打开该资源文件,需要先添加前缀,点击“添加”按钮,然后选择“添加前缀”,默认的前缀是“/new/prefix1”,这个可以随意修改(不要出现中文字符),我们这里因为要添加图片,所以修改为“/myimages”。然后再按下添加按钮来添加文件,这里最好将所有要用到的图片放到项目目录中。比如这里在项目目录中新建了一个images文件夹,然后将需要的图标文件粘贴进去。添加完文件后,如下图所示。



4.当添加完资源后,一定要按下Ctrl + S来保存资源文件,不然在后面可能无法显示已经添加的资源。


四、使用资源文件


1.我们重新回到设计模式打开新建菜单的编辑动作对话框,然后添加图标。在打开的选择资源对话框中,第一次可能无法显示已经存在的资源,可以按下左上角的绿箭头来更新显示。效果如下图所示。


2.我们点击这里需要的新建图标filenew.png,按下确定即可。现在按下Ctrl + R运行程序,效果如下图所示。



五、使用代码来添加菜单和图标


1.对于添加的资源文件,在项目源码目录中可以看到,即myicons.qrc,使用写字板程序将其打开,可以发现它其实就是一个XML文档:


<RCC>
    <qresourceprefix="/myimages">
       <file>images/filenew.png</file>
       <file>images/fileopen.png</file>
       <file>images/filesave.png</file>
       <file>images/filesaveas.png</file>
       <file>images/find.png</file>
    </qresource>
</RCC>


2.前面在设计模式添加了菜单项和图标,下面我们使用代码再来添加一个菜单项,并为其设置图标。在编辑模式打开mainwindow.cpp文件,并在构造函数中添加如下图所示代码:



       这里添加图标时,就使用了资源文件中的图标。使用资源文件,需要在最开始使用冒号,然后添加前缀,后面是文件的路径。在代码中使用“文件菜单”,就是使用其objectName。主窗口上的菜单都是在菜单栏menuBar上的,因为这里使用了设计模式,所以可以通过ui->menuBar来获取菜单栏,菜单栏是QMenuBar类对象。如果不使用设计模式而使用纯代码创建项目,那么可以直接在MainWindow类中使用menuBar()方法来获取菜单栏。菜单栏上可以通过addMenu()来添加新的菜单,而菜单中可以使用QAction来创建菜单项。现在可以运行程序查看效果。


结语


  这一篇中主要讲解了如何使用资源文件,讲述了在设计模式和代码中两种使用方法。希望大家可以亲自练习一下本篇的内容,在后面的章节中,对于添加菜单和图标等操作将不再进行详细讲解。


资源下载







本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

发表于 2017-3-3 23:19:22 | 显示全部楼层
新手学习中,非常感谢
回复 支持 反对

使用道具 举报

发表于 2017-3-26 16:34:22 | 显示全部楼层
这一节的内容有点绕。
自己找的PNG图片总是无法加载。
再就是前缀、图片所在的文件夹名称、图片路径,这些容易混淆。
还有就是那些菜单的快捷键,不知道有什么作用啊。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-3-26 22:28:23 | 显示全部楼层
BlueLinux 发表于 2017-3-26 16:34
这一节的内容有点绕。
自己找的PNG图片总是无法加载。
再就是前缀、图片所在的文件夹名称、图片路径,这些 ...

嗯。多操作几遍会好点。
回复 支持 反对

使用道具 举报

发表于 2017-4-26 23:02:10 | 显示全部楼层
本帖最后由 lu21hao 于 2017-4-26 15:05 编辑

icon 图片只能在编辑模式下显示,运行后什么图片都没有。。。。
下载了楼主的code也是一样。我的运行环境:
Ubuntu 14.04.5 LTS
QT Creator 3.6.0, Based on Qt 5.5.1 GCC 4.9.1.
不知道是不是版本的问题。

第三篇 connect 函数也是报错,void QAbstractButton::clicked(bool) is protected
我最后改成
    connect(loginBtn, SIGNAL(clicked(bool)),SLOT(login()));
    connect(exitBtn, SIGNAL(clicked(bool)),SLOT(close()));
才正常运行。
我是初学者,不确定问题在哪。望楼主不吝赐教。
回复 支持 反对

使用道具 举报

发表于 2017-4-29 11:53:35 | 显示全部楼层
最近,跟着老师学QT5,学到这了。谢谢老师无私的奉献。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-5-2 11:14:27 | 显示全部楼层
lu21hao 发表于 2017-4-26 23:02
icon 图片只能在编辑模式下显示,运行后什么图片都没有。。。。
下载了楼主的code也是一样。我的运行环境: ...

是因为版本和系统原因造成的,这个设置icon的方式只适用于Windows系统,其他系统可以看下:http://doc.qt.io/qt-5/appicon.html

第二个问题,是确定以前的代码没有写错?
回复 支持 反对

使用道具 举报

发表于 2017-5-3 17:01:33 | 显示全部楼层
yafeilinux 发表于 2017-5-2 03:14
是因为版本和系统原因造成的,这个设置icon的方式只适用于Windows系统,其他系统可以看下:http://doc.qt ...

我检查了一下,connect()函数代码应该没有写错,我截屏了,包括错误信息您看一下
.

我下载了您的代码,运行后是同样的错误。
会不会还是运行环境和版本的问题。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-5-7 21:06:12 | 显示全部楼层
lu21hao 发表于 2017-5-3 17:01
我检查了一下,connect()函数代码应该没有写错,我截屏了,包括错误信息您看一下
.

如果确定自己代码没有写错,那么就把项目清除构建,然后再重新构建试试。
回复 支持 反对

使用道具 举报

发表于 2017-7-19 10:36:22 | 显示全部楼层
我的图片也没有出来,一开始在设计界面添加的图片显示出来了,后面代码添加的图片两个都出不来
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

12下一页

Qt开源社区——开源 共享 自由

微信扫一扫
查看精品教程!