本人的第一篇博客,希望能够帮助到大家~同时感谢”CSDN 和 Qt分享&&交流 26197884“给予我的帮助!
本篇博客的目的是简单介绍:创建一个用QLabel类来显示图片的自定义控件的编写。如果想实现在图片上绘制文字、箭头和曲线,请参考我的第二篇博客源码!!!给大家一个链接~【Qt自定义控件的创建与初步使用(二)之图片上绘制文字、箭头、曲线】在写自定义控件的过程中遇到了很多的难题,但都慢慢解决了,本人对Qt自定义控件的认识还不深刻,做的不对的地方,还请大家指出,我会尽快修改,免得误导他人!同时推荐一篇关于自定义控件的博客连接:http://blog.csdn.net/giselite/article/details/12622429,写的还挺详细,大家可以参考,关于Qtcreator和vs2013的相关安装和配置,网上有很多,Qt的安装和配置也比较简单,简单的配置后即可用于创建Qt自定义控件,这里不再赘述,贴心的给初学者两个关于Qt安装和配置的参考教程吧。连接(http://blog.csdn.net/wangell/article/details/41117139
http://tieba.baidu.com/p/3451630520)
配置:Qt creator5.7,Qt 5.7+VS2013(64位)(有人喜欢用后者,全凭个人爱好,我用的是creator,本文也会关联到后者的使用),本篇博客是关于创建Qt自定义控件的内容,本篇案例的说明用的是Qt5.6,VS2013(因为本人的电脑装的是Qt5.6,公司的电脑装的是Qt5.7),建议最好用Qt5.7,但实际操作中不会有太大差别。
一、新建Qt4设计师自定义控件工程
1.打开creator,按红色箭头所示,新建Qt4设计师自定义控件工程;
2.设置项目名称,位置;
3.下一步默认就好;
4.双击修改控件类工程名称(注:本篇博文所有是”CV“名称命名,均采用的大写符号),即可生成红色箭头所指的几个文件;
5.下一步,就会自动生成名为cvplugin的插件,下面的步骤中会用到它;
6.至此就完成了新建Qt4设计师自定义控件工程,就会生成如图所示的工程。
二、编写自定义控件界面
既然是控件,就应该有界面,本篇博客的目的是想创建一个继承于QWidget类,并用QLabel类来显示图片的自定义控件;既然默认生成的控件类只是一个继承了QWidget的类,只是一个空壳控件,所以你应该按如下的操作来为此控件添加内容。
1.为了简单起见,我不想自己手动去写这些界面相关的代码,为此我们可以先删掉默认生成的cv.h和cv.cpp文件,选中cv.h和cv.cpp文件,右键选择”删除文件“,并勾上”彻底删除“选项,确定删除即可;
2.这样我们就可以重新使用”CV“这个名称为此控件添加一个ui类了。在上图所示的界面中选中CV项目,右键选择“添加新文件”,使用Qt下的“Qt设计师界面类”模板,创建一个ui类,如下图所示:
3.选中Widget即可,其他全部默认;
4.写上”CV“即可,点击下一步;
5.默认下一步;
6.至此就为自定义控件工程添加上了UI界面;
7.双击"cv.ui”,拖拽一个Label到界面上,并调整下大小,居中即可。在右边的列表中可以看到label控件,因为想显示图片,所以用的肯定是属于Display Widgets类的“QLabel”。这样就为自定义控件CV添加了一个显示图片的类QLabel了,接下来就可以为这个“CV”工程构建.dll和.lib文件了;
8.先将编译器改为“Release”模式,然后执行下qmake,为什么这样,我也不是很清楚,你可以自己去查一下;
9.再点击那个绿色三角形按钮,会弹出“自定义执行挡”,不要管,直接关闭即可(我查过好像是什么接口,我也不是很清楚,毕竟也是接触Qt不久),最后点击那个小锤子,等右下角那个绿色进度条变暗了,即可在你所建立的工程目录下见到如图所示的“build-CV-Desktop_Qt_5_6_0_MSVC2013_64bit-Release”插件工程;
10.打开该文件,并找到如图所示的两个文件“cvplugin.dll”、"cvplugin.lib”,将两个文件并拷贝到你安装的Qt5.7的designer中(注意路径!!!,根据自己安装的进行),如下第二个图所示。若想用“VS2013+Qt设计师”进行程序编写的,你就要将两个文件“cvplugin.dll”、"cvplugin.lib”拷贝到如下第三个图所示的路径的文件夹下(注意路径!!!,根据自己安装的进行);
11.最后你随便在Qt creator 或 Qt设计师中 新建一个工程就可以在Widgets窗口中看到“CV”插件了,于是你就可以想使用其他控件一样来随意使用“CV”了,这个控件目前的功能相当于“Label”控件(本次主要用来显示图片),当然你可以在创建的过程中为它添加任意想要的组合功能。
第二篇,“CV”插件的使用。未完待续......