一、先行准备

安装好QT，配置好QT环境

重点：

1. Qt5 布局管理
2. Qt5 模版库、工具类及控件
3. Qt5 的信号与槽机制

二、新建项目

选择模板（widgets application）——qmake——QDialog模板——select all kits——完成


这里的select all kits是为了避免只加载进了pro文件而无.h和.cpp

三、添加文件

添加文件（一共4个.h文件和4个.cpp) ——命名——完成

四、编辑代码

1、基本信息窗口类

QGridLayout::addWidget ( QWidget * widget, int row, int column, Qt::Alignment alignment = 0 )
QWidget * widget 控件名字
row:行位置
column：列位置
alignment；对齐方式

//baseinfo.h
#include <QLabel>
#include <QLineEdit>
#include <QTextEdit>
#include <QGridLayout>//网格布局
#include <QComboBox>//QComboBox 是下拉列表框组件类
#include <QPushButton>class BaseInfo : public QWidget
{Q_OBJECT
public:explicit BaseInfo(QWidget *parent = 0);//表明该构造函数是显示的, 而非隐式的, 跟它相对应的另一个关键字是implicit
signals:public slots:
private://左侧QLabel *UserNameLabel;//用户名标签QLabel *NameLabel;//姓名标签QLabel *SexLabel;//性别标签QLabel *DepartmentLabel;//部门标签QLabel *AgeLabel;//年龄标签QLabel *OtherLabel;//备注标签QLineEdit *UserNameLineEdit;//用户名输入文本控件QLineEdit *NameLineEdit;//姓名输入文本控件QComboBox *SexComboBox;//性别选择ComboBox控件QTextEdit *DepartmentTextEdit;//部门文本输入控件QLineEdit *AgeLineEdit;//年龄文本输入控件QGridLayout *LeftLayout;//左侧布局管理对象//右侧QLabel *HeadLabel;//头像标签QLabel *HeadIconLabel;//头像图片显示控件QPushButton *UpdateHeadBtn;//更新按钮控件QHBoxLayout *TopRightLayout;//右侧上半部分布局管理对象QLabel *IntroductionLabel;//个人介绍标签QTextEdit *IntroductionTextEdit;//个人介绍文本输入控件QVBoxLayout *RightLayout;//右侧整体布局管理对象
};

//baseinfo.cpp
#include "baseinfo.h"BaseInfo::BaseInfo(QWidget *parent) : QWidget(parent)
{//构建“显示用户详细资料”左侧部分控件创建及布局UserNameLabel = new QLabel(tr("User:"));UserNameLineEdit = new QLineEdit;NameLabel = new QLabel(tr("Name:"));NameLineEdit = new QLineEdit;SexLabel = new QLabel(tr("Sex:"));SexComboBox = new QComboBox;SexComboBox->addItem(tr("Man"));SexComboBox->addItem(tr("Woman"));DepartmentLabel = new QLabel(tr("Department:"));DepartmentTextEdit = new QTextEdit;AgeLabel = new QLabel(tr("Age:"));AgeLineEdit = new QLineEdit;OtherLabel = new QLabel(tr("Other:"));OtherLabel->setFrameStyle(QFrame::Panel | QFrame::Sunken);//新建左侧布局管理器，将前面创建好的控件添加到布局管理器中对应坐标的部分。LeftLayout = new QGridLayout();LeftLayout->addWidget(UserNameLabel, 0, 0);LeftLayout->addWidget(UserNameLineEdit, 0, 1);LeftLayout->addWidget(NameLabel, 1, 0);LeftLayout->addWidget(NameLineEdit, 1, 1);LeftLayout->addWidget(SexLabel, 2, 0);LeftLayout->addWidget(SexComboBox, 2, 1);LeftLayout->addWidget(DepartmentLabel, 3, 0);LeftLayout->addWidget(DepartmentTextEdit, 3, 1);LeftLayout->addWidget(AgeLabel, 4, 0);LeftLayout->addWidget(AgeLineEdit, 4, 1);LeftLayout->addWidget(OtherLabel, 5, 0, 1, 2);LeftLayout->setColumnStretch(0,1);LeftLayout->setColumnStretch(1,3);//构建“显示用户详细资料”右侧部分控件创建及布局HeadLabel = new QLabel(tr("Head:"));HeadIconLabel = new QLabel;QPixmap icon("312.png");//应用程序图标，通常显示在应用程序的顶层窗口的左上角HeadIconLabel->setPixmap(icon);HeadIconLabel->resize(icon.width(), icon.height());UpdateHeadBtn = new QPushButton(tr("Update"));TopRightLayout = new QHBoxLayout();TopRightLayout->setSpacing(20);TopRightLayout->addWidget(HeadLabel);TopRightLayout->addWidget(HeadIconLabel);TopRightLayout->addWidget(UpdateHeadBtn);IntroductionLabel = new QLabel(tr("Introduction:"));IntroductionTextEdit = new QTextEdit;//新建右侧布局管理器，将右侧需要的控件添加到布局管理器中对应坐标的部分。RightLayout = new QVBoxLayout();RightLayout->setMargin(10);RightLayout->addLayout(TopRightLayout);RightLayout->addWidget(IntroductionLabel);RightLayout->addWidget(IntroductionTextEdit);//新建整个界面全局布局管理器，将完成基本设置，将左侧布局和右侧布局添加进来完成全局布局显示。QGridLayout *mainLayout = new QGridLayout(this);mainLayout->setMargin(15);//设置控件与窗体的左右边距mainLayout->setSpacing(10);//设置各个控件之间的上下间距mainLayout->addLayout(LeftLayout, 0, 0);mainLayout->addLayout(RightLayout, 0, 1);mainLayout->setSizeConstraint(QLayout::SetFixedSize);
}

2、详细资料窗口类

//detail.h
#include <QLabel>
#include <QComboBox>
#include <QLineEdit>
#include <QTextEdit>
#include <QGridLayout>class Detail : public QWidget
{Q_OBJECT
public:explicit Detail(QWidget *parent = 0);
signals:public slots:
private:QLabel *NationalLabel;//地址标签QComboBox *NationalComboBox;//地址选择控件QLabel *ProvinceLabel;//省份标签QComboBox *ProvinceComboBox;//省份选择控件QLabel *CityLabel;//城市标签QLineEdit *CityLineEdit;//城市文本编辑框QLabel *IntroductLabel;//个人说明标签QTextEdit *IntroductTextEdit;//个人说明文本编辑框QGridLayout *mainLayout;//全局布局管理对象
};

//detail.cpp
#include "detail.h"
Detail::Detail(QWidget *parent) : QWidget(parent)
{NationalLabel = new QLabel(tr("National:"));//新建国家/地址选择控件QComboBox，向该控件中添加三个可选项。NationalComboBox = new QComboBox;NationalComboBox->insertItem(0, tr("PRC"));NationalComboBox->insertItem(1, tr("UK"));NationalComboBox->insertItem(1, tr("USA"));ProvinceLabel = new QLabel(tr("Province:"));//新建省份选择控件QComboBox，向该控件中添加三个可选项。ProvinceComboBox = new QComboBox;ProvinceComboBox->insertItem(0, tr("JiangSu"));ProvinceComboBox->insertItem(0, tr("ShanDong"));ProvinceComboBox->insertItem(0, tr("ZheJiang"));CityLabel = new QLabel(tr("City:"));CityLineEdit = new QLineEdit;IntroductLabel = new QLabel(tr("Introduct:"));IntroductTextEdit = new QTextEdit;mainLayout = new QGridLayout(this);mainLayout->setMargin(15);mainLayout->setSpacing(10);mainLayout->addWidget(NationalLabel, 0, 0);mainLayout->addWidget(NationalComboBox, 0, 1);mainLayout->addWidget(ProvinceLabel, 1, 0);mainLayout->addWidget(ProvinceComboBox, 1, 1);mainLayout->addWidget(CityLabel, 2, 0);mainLayout->addWidget(CityLineEdit, 2, 1);mainLayout->addWidget(IntroductLabel, 3, 0);mainLayout->addWidget(IntroductTextEdit, 3, 1);}

3、联系信息窗口类

//contact.h
#include <QLabel>
#include <QGridLayout>
#include <QLineEdit>
#include <QCheckBox>class Contact : public QWidget
{Q_OBJECT
public:explicit Contact(QWidget *parent = 0);
signals:public slots:
private:QLabel *EmailLabel;//电子邮件标签QLineEdit *EmailLineEdit;//电子邮件编辑控件QLabel *AddrLabel;//联系地址标签QLineEdit *AddrLineEdit;//联系地址文本编辑控件QLabel *CodeLabel;//邮政编码标签QLineEdit *CodeLineEdit;//邮政编码文本编辑控件QLabel *MoviTelLabel;//移动电话标签QLineEdit *MoviTelLineEdit;//移动电话文本编辑控件QCheckBox *MoviTelCheckBook;//是否选择“接收留言”复选框QLabel *ProTelLabel;//办公电话标签QLineEdit *ProTelLineEdit;//办公电话文本编辑控件QGridLayout *mainLayout;//全局布局管理器
};

//contact.cpp
#include "contact.h"Contact::Contact(QWidget *parent) : QWidget(parent)
{//新建电子邮件标签及文本编辑框EmailLabel = new QLabel(tr("Email:"));EmailLineEdit = new QLineEdit;//新建联系地址标签及文本编辑框AddrLabel = new QLabel(tr("Addr:"));AddrLineEdit = new QLineEdit;//新建邮政编码标签及文本编辑框CodeLabel = new QLabel(tr("Code:"));CodeLineEdit = new QLineEdit;//新建移动电话标签及文本编辑框MoviTelLabel = new QLabel(tr("MoviTel:"));MoviTelLineEdit = new QLineEdit;MoviTelCheckBook = new QCheckBox(tr("MoviTelCheck"));//新建办公电话标签及文本编辑框ProTelLabel = new QLabel(tr("ProTel:"));ProTelLineEdit = new QLineEdit;//新建全局布局管理器，将上面新建的各个控件添加进来，完成当前界面的布局管理。mainLayout = new QGridLayout(this);mainLayout->setMargin(15);mainLayout->setSpacing(10);mainLayout->addWidget(EmailLabel, 0, 0);mainLayout->addWidget(EmailLineEdit, 0, 1);mainLayout->addWidget(AddrLabel, 1, 0);mainLayout->addWidget(AddrLineEdit, 1, 1);mainLayout->addWidget(CodeLabel, 2, 0);mainLayout->addWidget(CodeLineEdit, 2, 1);mainLayout->addWidget(MoviTelLabel, 3, 0);mainLayout->addWidget(MoviTelLineEdit, 3, 1);mainLayout->addWidget(MoviTelCheckBook, 3, 2);mainLayout->addWidget(ProTelLabel, 4, 0);mainLayout->addWidget(ProTelLineEdit, 4, 1);mainLayout->setSizeConstraint(QLayout::SetFixedSize);
}

4、导航界面

界面中导航页面就用 Content 类来实现

QFrame 类：QFrame 是一个可以直接使用的类，主要是控制一些边框的样式，凸起，凹下，阴影等，其继承自QWidget
继承关系：QFrame继承于QWidget，QPushButton,QLabel… -> QFrame ->QWidget

上图为QListWidget的实现，QListWidget是继承QListView，QListView可以用来以列表的形式展示数据

类声明中包含自定义的三个页面类对象、两个按钮对象以及一个堆栈窗体对象，在 Content 类头文件中定义类成员变量，添加如下代码：

//content.h
#include <QStackedWidget>//QStackedWidget继承自QFrame，供了多页面切换的布局，一次只能看到一个界面，类似于QTabWidget
#include <QPushButton>
#include "baseinfo.h"//自定义头文件
#include "contact.h"//自定义头文件
#include "detail.h"//自定义头文件
#include <QListWidget>//以列表的形式展示数据class Content : public QFrame
{Q_OBJECT//只有加入了Q_OBJECT，你才能在类中使用QT中的signal和slot机制
public:Content(QWidget *parent=0);//QWidget *parent = 0 表示Content控件不是任何控件的子控件~Content();QStackedWidget *stack;//堆栈窗体对象声明QPushButton *AmendBtn;//修改按钮声明QPushButton *CloseBtn;//关闭按钮声明BaseInfo *baseInfo;//基本信息窗口类Contact *contact;//联系方式窗口类Detail *detail;//详细信息窗口类
};

addStretch是按比例分配空白区域
https://blog.csdn.net/weixin_42949480/article/details/104885267?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-16.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-16.control

//content.cpp
#include "content.h"Content::Content(QWidget *parent) : QFrame(parent)
{stack = new QStackedWidget(this);//创建一个QStackedWidget对象//对堆栈窗口的显示风格进行设置stack->setFrameStyle(QFrame::Panel | QFrame::Raised);//插入三个页面baseInfo = new BaseInfo();contact = new Contact();detail = new Detail();stack->addWidget(baseInfo);stack->addWidget(contact);stack->addWidget(detail);//创建两个按钮AmendBtn = new QPushButton(tr("Amend"));CloseBtn = new QPushButton(tr("Close"));QHBoxLayout *BtnLayout = new QHBoxLayout;BtnLayout->addStretch(1);BtnLayout->addWidget(AmendBtn);BtnLayout->addWidget(CloseBtn);//整体布局QVBoxLayout *RightLayout = new QVBoxLayout(this);RightLayout->setMargin(10);RightLayout->setSpacing(6);RightLayout->addWidget(stack);RightLayout->addLayout(BtnLayout);
}Content::~Content()
{}

5、main函数

//main.cpp
#include "content.h"
#include <QApplication>
#include <QTextCodec>
#include <QSplitter>
#include <QListWidget>int main(int argc, char *argv[])
{QApplication a(argc, argv);QFont font("AR PL KaitiM GB", 12);//设置整个程序采用的字体和字号a.setFont(font);//新建一个水平分割窗口对象，作为主布局框QSplitter *splitterMain = new QSplitter(Qt::Horizontal, 0);splitterMain->setOpaqueResize(true);//新建列表界面，并添加对应三个界面的名称QListWidget *list = new QListWidget(splitterMain);list->insertItem(0, QObject::tr("BaseInfo"));list->insertItem(0, QObject::tr("Contact"));list->insertItem(0, QObject::tr("Detail"));Content *content = new Content(splitterMain);//使用Qt的信号槽机制将列表界面中的选择改变事件和对应界面显示响应进行连接，这样在左侧界面进行选择//后，右侧会显示选择对应的页面。QObject::connect(list, SIGNAL(currentRowChanged(int)), content->stack, SLOT(setCurrentIndex(int)));//设置主布局框即水平分割窗口的标题splitterMain->setWindowTitle(QObject::tr("Modify User Message"));//设置主布局框即水平分割窗口的最小尺寸splitterMain->setMinimumSize(splitterMain->minimumSize());//设置主布局框即水平分割窗口的最大尺寸splitterMain->setMaximumSize(splitterMain->maximumSize());splitterMain->show();//显示主布局框，其上面的控件一同显示return a.exec();
}

五、CTRL+R运行

六、额外知识补充

1、wget

wget是一个强力方便的命令行下的下载工具，可以通过HTTP和FTP协议（两种最广泛的互联网协议）从因特网中检索并获取文件。

2、chmod 777 文件或目录

chmod 777 /etc/squid 运行命令后，squid文件夹（目录）的权限就被修改为777（可读可写可执行）。如果是Ubuntu系统，可能需要加上sudo来执行：
sudo chmod 777 /etc/squid
https://blog.csdn.net/pythonw/article/details/80263428

3、Qt 常用控件

QDialog：QDialog 类是对话框窗口的基类，对话框窗口是主要用于短期任务以及和用户进行简要通讯的顶级窗口。
QMainWindow：QMainWindow 类提供一个有菜单条、锚接窗口（例如工具条）和一个状态条的主应用程序窗口。
QPushButton：QPushButton 窗口部件提供了命令按钮。
QLabel：QLabel 是 QT 界面中的标签类。
QLineEdit：QLineEdit 是一个文本编辑窗口。
QSplitter：QSplitter 是用来对窗口的拆分，通常用于布局
QMdiArea：QMdiArea 使用了建立子区域
QMdiSubWindow：QMdiSubWindow 是用于在子区域建立子窗口

4、Poppler

Poppler 是一个用来生成 PDF 的C++类库

5、qmake 和 cmake区别

https://blog.csdn.net/vbskj/article/details/7792061

6、只有pro文件的解决办法

https://blog.csdn.net/qq_43510916/article/details/104583367

• 教程来源于实验楼训练营课程

7、数据库操作

QSqlQuery
QSqlQuery类提供了一种执行和操纵SQL语句的方式
未写db.open()的话会显示
QSqlQuery::exec: database not open
就是说要换行的字符串最后，添加双引号，下一行开头也加上双引号就可以了。、
QString::arg()//用字符串变量参数依次替代字符串中最小数值

插入一组数据

    str=QString("insert into Pro(ID, Pro,Achoice,Bchoice) values('%1','%2','%3','%4')").arg(QString::number(ID),Achoice,Bchoice,Cchoice);res=query.exec(str); ```而下面这种方式不可以
```cpp str=QString("insert into Pro(ID, Pro,Achoice,Bchoice,Cchoice)
values(QString::number(ID),Achoice,Bchoice,Cchoice,Dchoice)"); ```

Qt还提供了另一种方便的字符串组合方式，使用QString::arg()函数，此函数的重载可以处理很多的数据类型。此外，一些重载具有额外的参数对字段的宽度、数字基数或者浮点精度进行控制。相对于QString::sprintf(),QString::arg()是一个比较好的解决方案，因为它类型安全，完全支持Unicode，并且允许改变“/n”参数的顺序。例如：

%2.").arg("Joy").arg(1993);     //str =  "Joy was born in 1993."; ```

去除字符串两端的空白（空白字符包括回车符号“\n”、换行符“\r”、制表符"\t"和空格字符：“
”等）非常常用，如获取用户输入账号时就需要去掉空白符。

a. QString::trimmed()函数：移除字符串两端的空白符

b. QString::simplified()函数：移除字符串两端的空白字符，使用单个空格字符“ ”代替字符串中出现的空白字符。

= "   Welcome  \t  to  \n  you!   "; str1 = str1.trimmed();      // str1 = " Welcome \t to \n you! " str2 = str2.simplified();     // str2
= " Welcome to you ! " ```

weekList.clear();//清楚QString链表原有数据

i=0;i<weekList.size();i++) { qDebug()<<weekList[i]; }

weekList.insert(0,“星期零”);

QT简单入门程序——实现可修改用户信息界面相关推荐

1. SSM整合--简单的增删改查--修改用户信息

   SSM整合--简单的增删改查 修改用户信息 修改用户信息 ## 根据id查找用户信息,显示在employ_update页面 ## 进行修改信息后,提交表单,保存数据### 1.根据id查询用户信息 h ...

2. 微信小程序云开发 修改用户信息

   编写一个微信小程序修改已注册的用户的信息. 开发平台:微信开发者工具 微信云开发更新信息的代码字段update: 在update.js页面添加数据库peocollection(需要提前在云数据库创建并 ...

3. thinkPHP6.0入门笔记（四）——删除和修改用户信息

   thinkPHP6.0实现删除和修改用户信息 1.删除用户信息 2.优化bootstrap资源引入方式 3.浏览器的cookie与session机制 4.token令牌原理 5.利用token防止表单 ...

4. 微信小程序开发之获取用户信息

   环境 微信开发者工具 Stable 1.06.2303220 云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识.注意, openid 并不是微信用户 ...

5. 【JSP】用户信息界面操作 ---- 用户信息修改

   文章目录 用户信息界面操作 ---- 用户信息修改 Ⅰ.修改userinfo.jsp 实现修改页面跳转 Ⅱ.创建 userUpdate.jsp 修改页面 Ⅲ.完善 dbHelper类,添加用户修改方法 ...

6. jsp弹窗修改信息_WEB最最最初级修改用户信息

   哈喽,今天第一次发.内容非常非常基础,记录一下自己的成长吧. 今天的内容是通过jsp页面传参来修改用户信息.emmm,说的通俗一点就是对数据库的修改. 好! 话不多说!我们开始! 先看我简陋的页面 那 ...

7. 用户中心 - 修改用户信息

   package com.leon.pojo.bo.center;import io.swagger.annotations.ApiModel; import io.swagger.annotation ...

8. VueJS ajax综合案例（修改用户信息实现步骤）

   修改用户信息 1.过程演示 2.代码实现

9. usermod 修改用户信息

   7.2 usermod 修改用户信息 1.命令功能 usermod 修改已存在的用户账号信息. 2.语法格式 usermod option login 参数选项说明 选项 选项说明 -c 修改用户pa ...

最新文章

1. json-c库使用总结
2. 【测试点分析】1072 开学寄语 (20分)_42行代码AC
3. 在jsp文件中通过超链接访问servlet_Eclipse中创建Servlet
4. [Unity] 战斗系统学习 3：FlowCanvas 中的 Input System
5. Hibernate-HQL基础
6. 数据 到 端口 linux,linux如何查看某个端口接收到的数据
7. 公司怎么吸引和留住核心技术大牛
8. Windows下配置安装Git（一）
9. 在浏览器中将表格导入到本地的EXCEL文件，注意控制内存
10. android百度在线音乐api,百度音乐免费API接口
11. win10使用vnc远程树莓派
12. 输出1234无重复三位数
13. advised by org.springframework.transaction.interceptor.TransactionInterceptor.invoke(org.aopallian
14. 西南大学907专硕考研，西南大学计算机808学硕
15. 2019年数字IC校招薪酬火爆出炉，你被倒挂了吗_
16. warning C4996的分析
17. 计算机网络和因特网笔记
18. ubuntu搜狗输入法
19. js 忽略字母大小写
20. Excel中使用F-检验

热门文章

1. hypot函数、fmod函数
2. 狂热之下被遗忘的指标—快充倍率
3. LeetCode-1873. 计算特殊奖金
4. 药店微信小程序的功能
5. 校园文化建设计算机教室标语,【校园文化宣传墙】_校园文化建设墙上布置必备标语宣传画大全...
6. Java设计一个测桃花模块_20145209刘一阳《JAVA程序设计》第十五周补充测试
7. ./config.status --recheck 而发现的error的根因与解决方案
8. PSU CS Guest Lectures at CCUT（波特兰州立大学在长春工业大学的讲座课程）
9. Python攻城师的成长————css语法、伪元素选择器（部分）
10. python复制word段落_使用python将整个word文档(包括表)复制到另一个