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

最新推荐文章于 2024-04-27 23:00:45 发布

带刀木头

最新推荐文章于 2024-04-27 23:00:45 发布

阅读量4k

点赞数

分类专栏：本科学习文章标签：嵌入式

本文链接：https://blog.csdn.net/weixin_43482693/article/details/115059169

版权

本科学习专栏收录该内容

31 篇文章 3 订阅

订阅专栏

QT简单入门程序

一、先行准备
二、新建项目
三、添加文件
四、编辑代码
五、CTRL+R运行
六、额外知识补充

一、先行准备

安装好QT，配置好QT环境

重点：

Qt5 布局管理
Qt5 模版库、工具类及控件
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的实现，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 ! " ```