QT学习笔记 - 从零开始

uindex

声明：本文的每一个单词标点符号，都是我手打的，抄袭转载的，请自觉绕道，不喜的速度闭上双眼。

• QT是啥
  

你来看帖，不知道QT是啥？
QT是基于C++语言编写GUI的框架。

• 写QT程序需要学啥？
  

最简单的QT程序可以像下面这样：

1. 
   
2. #include <QApplication>
   
3. #include <QDialog>
   
4. 
   
5. int main(int argc, char** argv)
   
6. {
   
7.     QApplication app(argc, argv);
   
8. 
   
9.     QDialog win;
   
10.     win.show();
    
11. 
    
12.     return app.exec();
    
13. }
    

复制代码

没有任何多余的东西，不需要任何资源，QT就会给你创建一个窗口。强迫症患者您告诉我，这么清爽的代码，创建一个窗口，哪家有？
为啥需要app，因为QT的实现消息循环是在app里面做的。用户点的鼠标事件交给哪个窗口，键盘消息发给哪个菜单等等。这些是QT为了方便编程者概念清晰，如果你乐意，自己硬生生制造一个超级类，啥都干，也行，那就可以写一行代码出个窗口。
为啥需要win，因为消息循环看不见摸不着，win是显示出来给人看的。一个app可以有很多个win。这些窗口用来和用户沟通干各种事。

是不是很简单？
秒入门。
接下来我要学习QT文档，往窗口上面添加东西。

KuJJ

搬砖学习，我现在GUI用的tkinker，简单好用

uindex

先添加个按钮吧，按钮是QPushButton

所以首先要想到，把定义按钮的头文件引用进来，有没有！
#include <QPushButton>

然后如何创建一个按钮呢？
QPushButton的构造函数有三种定义，四种形式。
1. 带骚浪图标 + 文字 + 父窗口
2. 仅文字 + 父窗口
3. 仅父窗口
4. 啥都没有，这种是因为3支持默认参数，不指定父亲是谁。

我为了最快的加个按钮，当然用最懒的一种形式3，省的用4还要再写一行代码设置父窗口。
QPushButton button(&win);

您肯定要吐了，只有一行代码？
是的，加个按钮真的只要一行代码。

1. #include <QApplication>
   
2. #include <QDialog>
   
3. #include <QPushButton>
   
4. 
   
5. int main(int argc, char** argv)
   
6. {
   
7.     QApplication app(argc, argv);
   
8. 
   
9.     QDialog win;
   
10.     QPushButton button(&win);
    
11.     win.show();
    
12. 
    
13.     return app.exec();
    
14. }

复制代码

有些网友可能会写出如下代码：

1.     QPushButton button;
   
2.     QDialog win;
   
3.     button.setParent(&win);

复制代码

这你可得长点心了，需要改成如下形式：

1.     QDialog win;
   
2.     QPushButton button;
   
3.     button.setParent(&win);

复制代码

因为后写的button，C++会保证它先析构，所以button在析构自己的时候，知道把自己从win的对象树上面移除下来，避免后面win析构的时候，作为子widget的button被二次析构。
假如反过来，win先析构，那么win会把button移除出对象树，然后delete掉。接着，是局部变量button的析构，此时的button已被其父窗口销毁，引发销魂的支线AV剧情。

uindex

KuJJ 发表于 2021-7-22 23:12
搬砖学习，我现在GUI用的tkinker，简单好用

谢谢关注，大神玩蟒蛇？蟒蛇自带了tkinker倒也非常舒适。

uindex

创建个按钮啥也不干？太浪费了，让他干点啥！

要不要显示个QT版权协议？免得有人以为QT的代码是他孙子写的~

1. QObject::connect(&button, SIGNAL(clicked()), &app, SLOT(aboutQt()));

复制代码

再或者按下按钮的时候，关闭这个窗口?

1. QObject::connect(&button, SIGNAL(clicked()), &win, SLOT(close()));

复制代码

反正套路一样一样的，把这个按钮的clicked事件指派一些事情做。

下一篇预告：我想在按下按钮的时候，在窗口上画个Soft Kitty。

szxszx

跟帖学习

redworlf007

施主 苦海无边回头是岸。

lhj200304

我们是小白，编译环境的怎么搞，QT是基于C++语言编写GUI的框架。

kyq_linux

uindex 发表于 2021-7-23 00:09
创建个按钮啥也不干？太浪费了，让他干点啥！

要不要显示个QT版权协议？免得有人以为QT的代码是他孙子写的 ...

楼主，方便来一个 从零搭建环境 比如IDE的版本 QT版本 配置  安装 。。。吗？  

ZHAOBAO511

必须支持.最喜欢这种基本就是打开电源开始干活的教程了,对于初学者绝对是好福利!对于玩电路的来说随时参考.

chen849928055

楼主，方便来一个 从零搭建环境 比如IDE的版本 QT版本 配置  安装 。。。吗？

uindex

安装QT，配置QT，整个过程，可以简化到一路鼠标点点点：

官方目前提供三种版本，Windows/MAC/Linux，都在这下面：
https://download.qt.io/official_releases/online_installers/

略显小家子气的，是在安装过程中，需要注册一个QT的账号，忍一下，注册好了，后面嫖的时候没人会在意这点。

我安装的Windows版，普通的个人电脑搞开发无压力：
https://download.qt.io/official_ ... dows-x86-online.exe

daat

楼主接着写， 来个完整的教程

akey3000

QT不错，有坛友说使用QT开发应用软件，不怕失业

xuexikaifa

同样的功能QT编译出来的软件安装包，好像是VC++编译出来的10倍大小，是不是呀？这样很不方便啊。

keshipt

没有helloworld 差评

keshipt

redworlf007 发表于 2021-7-23 08:05
施主 苦海无边回头是岸。

你这是典型的吃瓜群众 不嫌事大啊

phone

简单入门了QT

PPS

xuexikaifa 发表于 2021-7-23 11:10
同样的功能QT编译出来的软件安装包，好像是VC++编译出来的10倍大小，是不是呀？这样很不方便啊。 ...

因为QT需要加入很多库，确实是大一些。

albert_w

akey3000 发表于 2021-7-23 10:30
QT不错，有坛友说使用QT开发应用软件，不怕失业

嵌入式linnux一时半会儿估计难替代

问题是写QT的都是不怕麻烦的主，他们哪会失业

uindex

xuexikaifa 发表于 2021-7-23 11:10
同样的功能QT编译出来的软件安装包，好像是VC++编译出来的10倍大小，是不是呀？这样很不方便啊。 ...

这个体积很合理啊，QT的美会让你无视她这点体积。好比刘亦菲的内裤淘宝可以卖五百块疯抢，凤姐的你肯定不要对吧。当QT超越MFC太多以后，哪怕它SM呢都愿意跪。这十几兆的核心库让人放心。没有点体积，说明QT啥都不干，反而心慌呢。
QT的代码在Windows上可以是VC++编译的，不存在说比VC++编译的大，十几兆的体积，她就是QT。
总不能要求刘亦菲外表光鲜，内里是空气，一层皮的你要不，那样手感可就吓人了。

akey3000

redworlf007 发表于 2021-7-23 08:05
施主 苦海无边回头是岸。

做啥不是苦海？吴签这不也苦海了么

shh6899

期待楼主的更新

kv2004

怎么注册完了，安装时提示http://download.qt.io/online/qts ... -02-15-1048_meta.7z访问不到。

G.ai

支持楼主，长期使用QT，已经用他做了好几个项目了。

fuu

搬板凳围观大伙从入门到放弃

uindex

今天的主题只有一个，就是画Soft Kitty，画完如果有时间，看看那个网络认证插件安装不鸟的问题。

lgg88

搬个凳子围观学习

uindex

在开始画Soft Kitty之前，需要学习一下如何接管QT的事件。
QT的每一个Widget负责绘制他自己的客户区域，我如何接管过来才有机会往上面画Kitty呢？
答案就是重载这个Widget类的paintEvent函数，写一个自己的paintEvent。

首先，很多人知道C++支持类，那么C++如何写一个类呢？

1.     class MyClass
   
2.     {
   
3.     };

复制代码

看清楚，如果你找工作，别人让你写一个类，那么四个要素，一个都不能少：
1：class关键字
2：类名字
3：花括号一对
4：结尾的分号！！！

好了，现在C++也入门了，会写类了。

很快，你发现今天的目的，改写基类的函数实现，就是重载一个父类的函数。是不是很刺激？会继承轮子了！

1.     class QMyWindow : public QMainWindow
   
2.     {
   
3.     };

复制代码

语法就是一个冒号，那么为什么要加个public呢？因为C++默认是私有继承，私有继承的意思是，子类只能看到父类public的成员，private和protected的都看不到。就是只继承公开的账面财产，小金库看不到。
而public则表示保持和父类相同的访问权限，大金库，小金库，统统拿下，俨然亲爹降临。

下面这种是错误示范，表示只继承账面财产，只能看到父类public成员。

1.     class QMyWindow : QMainWindow
   
2.     {
   
3.     };

复制代码

好了，现在开始重载父类的paintEvent，简直，不要太简单：

1.     class QMyWindow : public QMainWindow
   
2.     {
   
3.     void paintEvent(QPaintEvent* event)
   
4.      {
   
5.          /* 绘图区域归你了。开始表演 */
   
6.     }
   
7.     }

复制代码

搞定，绘图区可以随便折腾了。有人会疑问，调用完我写的，还要调用父类的paintEvent么？父类难道不干点啥神秘的后台操作？
QT的好处就是你可以随时随地看他的源代码：
C:\Qt\6.0.4\Src\qtbase\src\widgets\kernel\qwidget.cpp

1. void QWidget::paintEvent(QPaintEvent *)
   
2. {
   
3. }

复制代码

这下放心了吧，父类其实啥也不干，那些羞羞的后台操作在更底层早封装好了。

uindex

今天画Soft Kitty最终以两行代码结束：

1. class QMyWindow : public QMainWindow
   
2. {
   
3.     void paintEvent(QPaintEvent* event)
   
4.     {
   
5.         QPainter p(this);        
   
6.         p.drawPixmap(rect(), QPixmap("C:\\Qt\\Kitty.png"));
   
7.     }
   
8. };

复制代码

我感觉似乎也不需要太多解释：
1.把一个QPainter对象和当前Widget联系起来
2.在Widget上面画Soft Kitty

不必担心，QT仍然会在Soft Kitty上面继续绘画按钮等其他控件。

uindex

Soft kitty, warm kitty, little ball of fur.



编辑了一下，用于图片版权合规。刚才看到过橘猫的公子，说明你和我一样是夜猫子！

uindex

kv2004 发表于 2021-7-23 14:37
怎么注册完了，安装时提示http://download.qt.io/online/qts ... ddons/qtnatworkauth ...

Windows10上我刚试过，没问题，贴一下我的设置你瞅瞅：

选自定义安装：


左边源选中最新，勾掉Preview/LTS/Archive那些，点一下Filter把那些过滤掉。
然后再点一下Default，组件列表恢复成默认。最后选中下图画红框的，这些画框的是因为我觉得有用，后面或许会接触。
提一下MinGW 8.1.0 64-bit这个，如果你打算一个QT全搞定，不玩VC++，那选这个MinGW 8.1.0 64-bit，把MSVC 2019 64-bit那个勾掉。



至于qtnatworkauth，主要是登录twitter，reddit之类的，先放放；忍不了就给QT提个缺陷。
反正也有用户名了，这natwork的拼写方式，保不准真是bug。

PCBBOY1991

想学，在网上下载了培训视频，苦于没时间…

lw32

之前用过，只做过一些简单的小工具
现在的QT不知如何发展，感觉对个人越来越不友好了

zdq2002

跟着楼主学习入门，这种风格我很喜欢，坚持不懈，楼主也不要半途而废啊。

uindex

我每天的志向都不大，今天也不例外，今天只介绍菜单。
在QT中主菜单是QMenuBar，上面可以添加一组组的下拉列表，QT把每一组列表叫做QMenu，诸如File/Edit/Option/Help等等，它们每一组都是一个QMenu。
然后，每一个QMenu的下拉列表里面，每个可以鼠标单击的item叫做QAction，空的QAction是Separator，显示一根横线。

话不多说，开干了：
首先毫无意外的，引入QMenuBar的定义：

1. #include <QMenuBar>

复制代码

然后，因为我加了两组菜单，默认的QMenuBar宽度只够一组的，于是我额外设置了QMenuBar的宽度，要不然就撑叉了，在实际的应用程序设计中，不光初始化这里，应该在Resize时候也同步调整，感觉你已经懂了！

1.     win.setWindowTitle("QT open source demo");/* 任务栏，标题栏的标题 */
   
2. 
   
3.     QMenuBar menu(&win);
   
4.     menu.setMinimumWidth(win.rect().width()); /* 给QMenuBar一点点空间 */
   
5. 
   
6.     QMenu *pm = menu.addMenu("Menu1");
   
7.     pm->addAction("AA");
   
8.     pm->addAction("BB");
   
9.     pm->addSeparator();
   
10.     pm->addAction("CC");
    
11. 
    
12.     pm = menu.addMenu("Menu2");
    
13.     pm->addAction("AA2");
    
14.     pm->addAction("BB2");
    
15.     pm->addSeparator();
    
16.     QAction *act = pm->addAction("Quit"); /* 注意这里把QAction保存了下来，因为我想让这个菜单项起作用，下面一行我会给这个QAction安排点事情 */
    
17. 
    
18.     QObject::connect(act, SIGNAL(triggered()), &app, SLOT(aboutQt()));

复制代码

你没猜错，关于事件，我又偷懒了，最后一个菜单干的事情，只是触发aboutQt，一张臭脸的LGPL。
LGPL的意思，简要说明一下，就是使用二进制DLL/SO没问题，不用开源你的代码。
但是如果静态链接了，当然，也包括那些DIY了QT的，那么所有包含了QT调用的源文件都必须开源。
这传染性比GPL弱，没有要求你调二进制也得开源。
但是好歹也是一份协议，和长得再帅，也得给过夜会是一个道理，自愿就好。不同意，不允许脱裤子，否则锯掉。

下面是加了菜单的演示：

TINXPST

果断收藏了！

uindex

勘误：29楼，代码第07行，漏了一个分号。
下一篇预告：主菜单下边的工具条。

spacekey

轻松入门

kitten

先入门再说

uindex

在开始今天的笔记之前，提一下QT如何集成到VC++，因为大部分情况下我都是用VC++去调试的。

• QT这边，参考32楼，选中MSVC 2019 64-bit。
• VC++这边，选择Extensions菜单 -> Manage Extensions -> 搜索Qt Visual Studio Tools并安装。
  

需要关闭并重新启动Visual C++，以完成QT插件的安装。
安装好以后设置Extensions -> Qt VS Tools -> Options：

像这样设置好QT所在的位置。

现在，通过Extensions -> Qt VS Tools -> Open Qt Project File(*.pro)来打开QT工程，此时，QT插件会自动生成VC++的工程文件，用VC++打开那个工程文件就好了。
如果VC++提示您工程文件版本需要更新，那有可能是因为QT插件生成的某些设置过时了，要同意它更新工程文件。

uindex

以下四行文字庸俗油腻，因为场景相似，才引来凸显中心思想。

转眼的功夫，和各位撸了三天的C++代码，手已经撸脏了吧？想必各位也盘算着能早点迈向新台阶。
如今是该和五姑娘说拜拜，去体验洗澡水的温度，是否烫嘴。
后面界面设计的代码，将不再是纯C++实现，由QT Designer一条龙服务，没错，妥妥的欲仙欲死警告！
在QT Designer上面画界面，怎么拖怎么拉的过程就不多说了，它好比前戏，各人有个人的爱好，入门嘛谁不犯个错？你肯定不想在焦急的找门过程中有人插手，那么享受这难忘的找门过程吧！

设计界面的操作，和C++没有太大关系，各种折腾，我假设你已经画好了如下界面：

值得一提的是，QToolBar上的按钮，在当前QT的版本，还没办法通过QT Designer鼠标点点点就能弄出来，需要手动的编辑.ui文件加addaction进去，这些QAction事件和菜单是共享的：

1.   <widget class="QToolBar" name="toolBar">
   
2.    <property name="windowTitle">
   
3.     <string>toolBar</string>
   
4.    </property>
   
5.    <property name="iconSize">
   
6.     <size>
   
7.      <width>32</width>
   
8.      <height>32</height>
   
9.     </size>
   
10.    </property>
    
11.    <attribute name="toolBarArea">
    
12.     <enum>TopToolBarArea</enum>
    
13.    </attribute>
    
14.    <attribute name="toolBarBreak">
    
15.     <bool>false</bool>
    
16.    </attribute>
    
17.    <addaction name="actionAdd"/>
    
18.    <addaction name="actionOpen"/>
    
19.   </widget>

复制代码

另外，界面上list widget和graphic view是通过QHBoxLayout对齐的，这俩widget会跟着窗口大小自动调节自己的大小。

请忽略界面上的事件列表内容，以及英语语法错误；每天的安排因人而异，计划也都是空话。

那片留空白的区域，我打算画一个24小时的表盘，合理地计划每一天的日常。
健康规律的生活少不了，另一方面，也算过了不惑之年，需要逼着自己学点东西。
在完成这个用于生活自律的闹钟以后，笔记的第零阶段将剧终。

252514251

纠正下是Qt，不是QT

252514251

lw32 发表于 2021-7-24 08:32
之前用过，只做过一些简单的小工具
现在的QT不知如何发展，感觉对个人越来越不友好了 ...

做些小工具，基本够用了，就是界面想漂亮的话，很费功夫
为了兼容xp，停止在5.6，听说 5.12后面听说离线安装包都拿不到，不准备升了

uindex

252514251 发表于 2021-7-27 21:36
纠正下是Qt，不是QT

果然如此，勘误还要加一条拼写成Qt。
是不是有啥原因，讲讲后面有啥故事么？

uindex

今天开始画表盘，毕竟目标是做个作息管理工具，每天的作息时间的安排，要体现在表盘上。
先画表盘的圆框吧，然后需要画上24个小时的刻度，然后是时针分针，然后是对这24个小时合理划分作息规律，最后榨干自己。
画圆框，要用到一个API叫drawEllipse，画椭圆，正圆也是椭圆的一种。
默认，是画实心，那可不行，我们要的是那种带有渐变的，只有边缘有颜色，这需要QRadialGradient出场，它能控制渐变：

1.         QPainter p(this);
   
2.         p.translate(rect().width() / 2, rect().height() / 2);
   
3.         p.setRenderHint(QPainter::Antialiasing, true);
   
4. 
   
5.         if (getMaxDiameter() > 0)
   
6.         {
   
7.             QRadialGradient Radial(0, 0, getMaxDiameter() / 2, 0, 0);
   
8. 
   
9.             Radial.setColorAt(1, QColor::fromRgba(0xFF808080));
   
10.             Radial.setColorAt(0.98, QColor::fromRgba(0xFFE6E6E6));
    
11.             Radial.setColorAt(0.93, QColor::fromRgba(0xFFE6E6E6));
    
12.             Radial.setColorAt(0.91, QColor::fromRgba(0));
    
13.             Radial.setColorAt(0.00, QColor::fromRgba(0));
    
14.             
    
15.             p.setPen(Qt::NoPen);
    
16.             p.setBrush(Radial);
    
17.             p.drawEllipse(-(getMaxDiameter() / 2), -(getMaxDiameter() / 2), getMaxDiameter(), getMaxDiameter());
    
18.         }

复制代码

画出来的效果如下：

uindex

给表盘画上刻度，用到的函数是drawPie：

1.             QRadialGradient Radial(0, 0, getMaxDiameter() / 2, 0, 0);
   
2.             QRadialGradient RadialH(0, 0, getMaxDiameter() / 2, 0, 0);
   
3.             QRadialGradient RadialM(0, 0, getMaxDiameter() / 2, 0, 0);
   
4. 
   
5.             Radial.setColorAt(1, QColor::fromRgba(0xFF808080));
   
6.             Radial.setColorAt(0.98, QColor::fromRgba(0xFFE6E6E6));
   
7.             Radial.setColorAt(0.93, QColor::fromRgba(0xFFE6E6E6));
   
8.             Radial.setColorAt(0.91, QColor::fromRgba(0));
   
9.             Radial.setColorAt(0.00, QColor::fromRgba(0));
   
10.             p.setBrush(Radial);
    
11.             p.drawEllipse(-(getMaxDiameter() / 2), -(getMaxDiameter() / 2), getMaxDiameter(), getMaxDiameter());
    
12. 
    
13.             RadialM.setColorAt(1, QColor::fromRgba(0xFF808080));
    
14.             RadialM.setColorAt(0.98, QColor::fromRgba(0xFFA0A0A0));
    
15.             RadialM.setColorAt(0.96, QColor::fromRgba(0xFFA0A0A0));
    
16.             RadialM.setColorAt(0.95, QColor::fromRgba(0));
    
17.             RadialM.setColorAt(0.00, QColor::fromRgba(0));
    
18.             p.setBrush(RadialM);
    
19. 
    
20.             for (int i = 0; i < 120; ++i)
    
21.             {
    
22.                 p.drawPie(-(getMaxDiameter() / 2), -(getMaxDiameter() / 2), getMaxDiameter(), getMaxDiameter(), 0 + i * 48, 8);
    
23.             }
    
24. 
    
25.             RadialH.setColorAt(1, QColor::fromRgba(0xFF808080));
    
26.             RadialH.setColorAt(0.98, QColor::fromRgba(0xFFA0A0A0));
    
27.             RadialH.setColorAt(0.93, QColor::fromRgba(0xFFA0A0A0));
    
28.             RadialH.setColorAt(0.92, QColor::fromRgba(0));
    
29.             RadialH.setColorAt(0.00, QColor::fromRgba(0));
    
30.             p.setBrush(RadialH);
    
31. 
    
32.             for (int i = 0; i < 24; ++i)
    
33.             {
    
34.                 p.drawPie(-(getMaxDiameter() / 2), -(getMaxDiameter() / 2), getMaxDiameter(), getMaxDiameter(), 0 + i * 240, 16);
    
35.             }

复制代码

刻度盘的外观：

下一页

qt程序员主要两个方向，一个是嵌入式系统，主要是linux平台下界面编程。还有就是各种需要国产化环境的应用场景，如军、工、基本上都是岗位等人，现在学软件的孩子们都去搞web开发，大数据啥的，没有人愿意下这个笨功夫。一个web程序员就是调用一下框架啥的，上来就大几千上万的月薪。

uindex

最近几周，有英语考试，每次都需要练习到深夜；耽误了Qt学习笔记的更新，罪过！
好在假期来临，或许会有空闲时间续更~

thomascao

跟贴学习!

NM2012

养肥了再看

hecat

支持一下楼主，辛苦！

认真学习中。

lee345

楼主继续，跟贴学习

uindex

作息时间小程序的主界面完成：

也算是可以比较清晰的看到一天某段时间具体该干什么，比稀里糊涂地闷着头好吧。

akey3000

uindex 发表于 2021-9-18 02:40
最近几周，有英语考试，每次都需要练习到深夜；耽误了Qt学习笔记的更新，罪过！
好在假期来临，或许会有空 ...

学习控，自律牛人。lz考什么英语？

uindex

akey3000 发表于 2021-11-5 05:48
学习控，自律牛人。lz考什么英语？

谢谢支持！考试是公司内部的培训。

当前贴所提到的作息时钟Demo代码，我已上传到某hub了，供慧眼大牛们娱乐~
https://github.com/tsengjun/DailySchedule

这篇笔记，共涉及以下八个基础问题：

• Qt的下载安装
• 通过C++代码创建控件
• 通过C++代码画图
• 自己写C++类
• 继承C++类并重载函数
• 2D坐标变换
• 常用基础绘图API
• 渐变色填充
  

鉴于各位Qt都已经成功入门了，本贴任务也算圆满完成，到此收工打烊。

adcr

M-A-K-E 坐等版块变丰满

chenxin2015

楼主继续，跟贴学习

zhq_chd

楼主继续，跟贴学习

清新怡人

Qt5.12 LTS之后的版本,不再对免费用户维护了.貌似用.net6更符合趋势.

zhq_chd

okmark学习

shuiluo2

现在是不是用PythonQT更好了

lyl1070

我连注册个账号都注册不了。

jiulong855@.163

跟着楼主看看

贪吃的蚂蚁

跟着楼主好好学习