Qt demo——修改用户资料窗口

最新推荐文章于 2024-05-08 09:48:11 发布
最新推荐文章于 2024-05-08 09:48:11 发布
阅读量1k 收藏 4
点赞数 1
分类专栏： QT 文章标签： qt ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74396439/article/details/129635867
版权

一、效果展示

基本信息界面
在这里插入图片描述

联系方式界面
在这里插入图片描述
详细资料界面

在这里插入图片描述

二、实现

1.窗口布局

在这里插入图片描述

  • 左边是一个 QListWidget，分别包含三个 item。（基本信息，联系方式，详细资料）
  • 右边整体是一个 QVBoxLayout，即垂直布局。
    • 上面是一个 QStackWidget，包含三个不同的页面（baseInfo，contact，detail），每个页面都有自己的布局。
    • 上面是一个 QHBoxLayout，即水平布局。里面包含两个按钮（修改按钮 modifyBtn和 关闭按钮closeBtn）。
  • 最外层是一个分割窗口 QSplitter，将窗口分为左右两边。

2.实现步骤与代码

第一步：创建项目

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
将 content.h中继承的父类改为 QFrame，头文件也改成 #include <QFrame>。

在这里插入图片描述
将 conten.cpp里面的 QDialog也改成 QFrame。

在这里插入图片描述

第二步：添加三个页面类 BaseInfo，Contact和Detail

添加 BaseInfo类

点击 add new添加新文件。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

再依次添加 Contact和 Detail类。

第三步：导航页实现

打开 content.h，类声明中包含三个自定义页面对象 ，两个按钮对象 和 一个堆栈窗体对象。

#ifndef CONTENT_H
#define CONTENT_H

#include <QFrame>
#include <QStackedWidget>
#include <QPushButton>

#include "baseinfo.h"
#include "contact.h"
#include "detail.h"

class Content : public QFrame
{
    Q_OBJECT

public:
    Content(QWidget *parent = nullptr);
    ~Content();

    //堆栈窗体
    QStackedWidget * stkWidget;

    //基本信息页面
    BaseInfo * baseInfo;

    //联系方式页面
    Contact * contact;

    //详情页面
    Detail * detail;

    //修改按钮 和 关闭按钮
    QPushButton * modifyBtn;
    QPushButton * closeBtn;

};
#endif // CONTENT_H

打开 content.cpp添加如下代码。

#include "content.h"
#include <QLayout>

Content::Content(QWidget *parent)
    : QFrame(parent)
{
    stkWidget = new QStackedWidget(this);
    stkWidget->setFrameStyle(QFrame::Panel | QFrame::Raised);

    //插入三个页面
    baseInfo = new BaseInfo();
    contact = new Contact();
    detail = new Detail();

    stkWidget->addWidget(baseInfo);
    stkWidget->addWidget(contact);
    stkWidget->addWidget(detail);

    //对两个按钮进行布局
    modifyBtn = new QPushButton(tr("修改"));
    closeBtn = new QPushButton(tr("关闭"));
    QHBoxLayout * btnLayout = new QHBoxLayout();
    btnLayout->addStretch(1);
    btnLayout->addWidget(modifyBtn);
    btnLayout->addWidget(closeBtn);

    //对右边整体进行布局
    QVBoxLayout * rightLayout = new QVBoxLayout(this);
    rightLayout->setMargin(10);
    rightLayout->setSpacing(6);

    rightLayout->addWidget(stkWidget);
    rightLayout->addLayout(btnLayout);

}

Content::~Content()
{
}
第四步：用户基本信息界面实现

打开 baseinfo.h头文件，添加如下代码。

#ifndef BASEINFO_H
#define BASEINFO_H

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QTextEdit>
#include <QLayout>
#include <QComboBox>
#include <QPushButton>

class BaseInfo : public QWidget
{
    Q_OBJECT
public:
    explicit BaseInfo(QWidget *parent = nullptr);

    /* 左侧 */
    QLabel * userNameLabel;
    QLabel * nameLabel;
    QLabel * sexLabel;
    QLabel * departmentLabel;
    QLabel * ageLabel;
    QLabel * noteLabel;
    QLineEdit * userNameLineEdit;
    QLineEdit * nameLineEdit;
    QComboBox * sexComboBox;
    QTextEdit * departmentTextEdit;
    QLineEdit * ageLineEdit;

    //左侧布局
    QGridLayout * leftLayout;


    /*  右侧  */
    QLabel * profilePhotoLabel;
    QLabel * profilePhotoIconLabel;
    QPushButton * updateBtn;

    //右上区域布局
    QHBoxLayout * topRightLayout;

    QLabel * profileLabel;
    QTextEdit * profileTextEdit;

    //右侧布局
    QVBoxLayout * rightLayout;



signals:

};

#endif // BASEINFO_H

添加头像资源文件。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
随便选择一张头像。

在这里插入图片描述

再打开 baseinfo.cpp，添加如下代码。


#include "baseinfo.h"
#include <QPixmap>

BaseInfo::BaseInfo(QWidget *parent) : QWidget(parent)
{
    /*   左侧  */
    userNameLabel = new QLabel(tr("用户名:"));
    userNameLineEdit = new QLineEdit;
    nameLabel = new QLabel(tr("姓名:"));
    nameLineEdit = new QLineEdit;
    sexLabel = new QLabel(tr("性别:"));
    sexComboBox = new QComboBox;
    sexComboBox->addItem(tr("男"));
    sexComboBox->addItem(tr("女"));
    departmentLabel = new QLabel(tr("部门:"));
    departmentTextEdit = new QTextEdit;
    ageLabel = new QLabel(tr("年龄:"));
    noteLabel = new QLabel(tr("备注:"));

    //设置备注样式
    noteLabel->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(noteLabel,5,0,1,2);

    //设置两列的比例为 1 : 3
    leftLayout->setColumnStretch(0,1);
    leftLayout->setColumnStretch(1,3);


    /*  右侧  */
    profilePhotoLabel = new QLabel(tr("头像:"));
    profilePhotoIconLabel = new QLabel();
    QPixmap profileIcon(":/C:/Users/hp/Pictures/Saved Pictures/121.jpg");
    profilePhotoIconLabel->setPixmap(profileIcon);
    profilePhotoIconLabel->resize(profileIcon.width(),profileIcon.height());
    updateBtn = new QPushButton(tr("更新"));

    //右上区域布局
    topRightLayout = new QHBoxLayout();
    topRightLayout->setSpacing(20);
    topRightLayout->addWidget(profilePhotoLabel);
    topRightLayout->addWidget(profilePhotoIconLabel);
    topRightLayout->addWidget(updateBtn);

    profileLabel = new QLabel(tr("个人说明:"));
    profileTextEdit = new QTextEdit;

    //右侧布局
    rightLayout = new QVBoxLayout();
    rightLayout->setMargin(10);
    rightLayout->addLayout(topRightLayout);
    rightLayout->addWidget(profileLabel);
    rightLayout->addWidget(profileTextEdit);


    /*  主布局  */

    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);

}
第五步：联系方式页面实现

打开 contact.h头文件，添加如下代码。

#ifndef CONTACT_H
#define CONTACT_H

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QCheckBox>
#include <QGridLayout>


class Contact : public QWidget
{
    Q_OBJECT
public:
    explicit Contact(QWidget *parent = nullptr);

    QLabel * emailLabel;
    QLabel * addressLabel;
    QLabel * postalCodeLabel;
    QLabel * mobilePhoneLabel;
    QCheckBox * messageCheckBox;
    QLabel * bussinessPhoneLabel;
    QLineEdit * emailLineEdit;
    QLineEdit * addressLineEdit;
    QLineEdit * postalCodeLineEdit;
    QLineEdit * mobilePhoneLineEdit;
    QLineEdit * bussinessPhoneLineEdit;

    QGridLayout * mainLayout;

signals:

};

#endif // CONTACT_H

打开 contact.cpp，添加如下代码。

#include "contact.h"

Contact::Contact(QWidget *parent) : QWidget(parent)
{
    emailLabel = new QLabel(tr("电子邮件:"));
    emailLineEdit = new QLineEdit;
    addressLabel = new QLabel(tr("联系地址:"));
    addressLineEdit = new QLineEdit;
    postalCodeLabel = new QLabel(tr("邮政编码:"));
    postalCodeLineEdit = new QLineEdit;
    mobilePhoneLabel = new QLabel(tr("移动电话:"));
    mobilePhoneLineEdit = new QLineEdit;
    messageCheckBox = new QCheckBox(tr("接收留言"));
    bussinessPhoneLabel = new QLabel(tr("办公电话:"));
    bussinessPhoneLineEdit = new QLineEdit;

    mainLayout = new QGridLayout(this);

    //布局
    mainLayout->setMargin(15);
    mainLayout->setSpacing(10);

    mainLayout->addWidget(emailLabel,0,0);
    mainLayout->addWidget(emailLineEdit,0,1);
    mainLayout->addWidget(addressLabel,1,0);
    mainLayout->addWidget(addressLineEdit,1,1);
    mainLayout->addWidget(postalCodeLabel,2,0);
    mainLayout->addWidget(postalCodeLineEdit,2,1);
    mainLayout->addWidget(mobilePhoneLabel,3,0);
    mainLayout->addWidget(mobilePhoneLineEdit,3,1);
    mainLayout->addWidget(messageCheckBox,3,2);
    mainLayout->addWidget(bussinessPhoneLabel,4,0);
    mainLayout->addWidget(bussinessPhoneLineEdit,4,1);

    mainLayout->setSizeConstraint(QLayout::SetFixedSize);
}
第六步：详细资料页面实现

打开 detail.h头文件，添加如下代码。

#ifndef DETAIL_H
#define DETAIL_H

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QComboBox>
#include <QTextEdit>
#include <QGridLayout>

class Detail : public QWidget
{
    Q_OBJECT
public:
    explicit Detail(QWidget *parent = nullptr);

    QLabel * nationLabel;
    QLabel * provinceLabel;
    QLabel * cityLabel;
    QLabel * profileLabel;
    QComboBox * nationComboBox;
    QComboBox * provinceComboBox;
    QLineEdit * cityLineEdit;
    QTextEdit * profileEdit;

    QGridLayout * mainLayout;

signals:

};

#endif // DETAIL_H

打开 detail.cpp文件，添加如下代码。


#include "detail.h"

Detail::Detail(QWidget *parent) : QWidget(parent)
{
    nationLabel = new QLabel(tr("国家/地址:"));
    nationComboBox = new QComboBox();
    nationComboBox->addItem(tr("中国"));
    nationComboBox->addItem(tr("日本"));
    nationComboBox->addItem(tr("俄罗斯"));
    nationComboBox->addItem(tr("美国"));
    nationComboBox->addItem(tr("英国"));

    provinceLabel = new QLabel(tr("省份:"));
    provinceComboBox = new QComboBox();
    provinceComboBox->addItem(tr("四川省"));
    provinceComboBox->addItem(tr("贵州省"));
    provinceComboBox->addItem(tr("山西省"));
    provinceComboBox->addItem(tr("湖南省"));
    provinceComboBox->addItem(tr("广东省"));
    provinceComboBox->addItem(tr("江苏省"));

    cityLabel = new QLabel(tr("城市:"));
    cityLineEdit = new QLineEdit();

    profileLabel = new QLabel(tr("个人说明:"));
    profileEdit = new QTextEdit();

    //布局
    mainLayout = new QGridLayout(this);

    mainLayout->setMargin(15);
    mainLayout->setSpacing(10);

    mainLayout->addWidget(nationLabel,0,0);
    mainLayout->addWidget(nationComboBox,0,1);
    mainLayout->addWidget(provinceLabel,1,0);
    mainLayout->addWidget(provinceComboBox,1,1);
    mainLayout->addWidget(cityLabel,2,0);
    mainLayout->addWidget(cityLineEdit,2,1);
    mainLayout->addWidget(profileLabel,3,0);
    mainLayout->addWidget(profileEdit,3,1);

    mainLayout->setSizeConstraint(QLayout::SetFixedSize);
}
第七步：编写主函数
#include "content.h"

#include <QApplication>
#include <QSplitter>
#include <QListWidget>
#include <QTextCodec>

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("基本信息"));
    list->insertItem(1,QObject::tr("联系方式"));
    list->insertItem(2,QObject::tr("详细资料"));

    Content * content = new Content(splitterMain);
    QObject::connect(list,&QListWidget::currentRowChanged,content->stkWidget,&QStackedWidget::setCurrentIndex);

    //设置主布局框 即 水平分割窗口的标题
    splitterMain->setWindowTitle(QObject::tr("修改用户资料"));

    //设置主布局框 即 水平分割窗口的最小尺寸
    splitterMain->setMinimumSize(splitterMain->minimumSize());

    //设置主布局框 即 水平分割窗口的最大尺寸
    splitterMain->setMaximumSize(splitterMain->maximumSize());

    //显示主布局框 上面的控件也会一同显示
    splitterMain->show();
    //Content w;
    //w.show();
    return a.exec();
}
感觉画质不如…原神
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QtQuick串口编程Demo
zusi_csdn
07-09 3771
一、目标：实现QtQuick界面，操控串口通信，进行串口数据的接收和发送二、核心思想：利用Qt库的QSerialPort类，使用C++实现串口数据的逻辑通信，并接受QtQuick界面的参数设置，在QML中调用C++实现的函数进行实际的数据收发（QML与C++混合编程)三、具体实现：（1）C++中的逻辑实现首先看serialport.h文件#ifndef SERIALPORT_H #define S...
四、Qt 的第一个demo
01-13 1374
Qt文件组成，简单demo
Qt的demo展示——photosurface
sinat_31608641的博客
08-15 489
demo qt
Qt跨平台开发demo（简单练手）
最新发布
张公子的博客
05-08 997
MVC模式模型（Model）、视图（View）和控制器（Controller）。使用MVC模式有很多优势，例如:简化后期对项目的修改、扩展等维护操作；使项目的某一部分变得可以重复利用；使项目的结构更加直观。具体来讲，MVC模式可以将项目划分为模型（M）、视图（V）和控制器（C）三个部分，并赋予各个部分不同的功能，方便开发人员进行分组。**（1）模型（Model）：**模型持有所有的数据、状态和程序逻辑。模型接受视图数据的请求，并返回最终的处理结果。
QT--编写自己的TCP/IP上位机软件--demo
weixin_44087298的博客
05-25 3425
之前做项目一直是别人负责做上位机软件，我负责调试硬件程序，定好协议各干各的就行了，但是渐渐地我发现总是有很多内容在调试中会发生变动，而且协调起来周期很长，还是自己能写上位机软件比较方便。 下面整理了一个我最近做的Qt项目Demo，主要用于以后新项目编写上位机的框架用。 QT版本：5.14.2 语言：C++ 通信方式：TCP/IP 1.打开工程 打开工程文件夹中的EQAT_Debug.pro文件 勾选需要的编译方式后点击configure project 这样就成功打开工程了。 2.编辑工程内容 在For
QT 仿QQ资料界面
时越的博客
10-21 377
#include "mainwindow.h" #include <QApplication> #include <QMessageBox> #include <QHBoxLayout> #include <QLabel> #include <QGridLayout> #include <QWidget> #include <QLineEdit> #include <QTextEdit>//多行文本 #inclu
Qt 修改用户资料demo
11-26
写了一个简易的“修改用户资料”的小demo，主要学习的是布局管理器。 1、StackWidget 2、QSplitter 3、QGridLayout... 这套demo没有使用UI文件实现，主要就是要考查开发者对代码实现布局的熟练度，个人认为理解这套...
Qt入门—— 使用按钮打开新的窗口
05-18
Qt入门—— 使用按钮打开新的窗口 - CSDN博客 https://blog.csdn.net/qq_35451572/article/details/80363908
qt窗口部件——其他窗口部件代码
04-09
———————————————— 版权声明：本文为CSDN博主「MechMaster」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：...
QT编程——嵌入式用户图形界面编程（QT）
12-17
QT编程——嵌入式用户图形界面编程（QT）以挖掘自身潜藏的能力为核心，致力于为你提供最实用的QT...该文档为QT编程——嵌入式用户图形界面编程（QT），是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
qt5 demo 串口通信，多窗口间相互调用
01-23
qt5 demo,包括串口通信，多窗口间相互调用，mysql 数据库连接，非常好用的一手资料程序。绝对值。。。。
QT5修改用户信息.zip
04-09
仅供参考学习，QT5上已验证通过
Qt登陆窗口，将登陆用户的信息显示到主界面中
KimHerojae的专栏
10-10 7870
该种方法是利用public成员来实现不同ui间的xi
使用Qt开发一个登录界面
qq_25549309的博客
07-11 2639
在本文中，我们介绍了如何使用Qt创建一个简单的登录界面，并演示了如何获取用户输入和执行身份验证操作。通过结合QLineEdit、QPushButton和QMessageBox等组件，我们可以轻松地实现各种交互和事件处理，使得登录界面更加灵活和可扩展。在实际应用中，登录界面通常是一个非常关键的界面元素，涉及到身份验证和安全性等多个方面。因此，我们需要仔细考虑安全性和用户体验，以确保登录功能的稳定性和可靠性。
自学QT之实现一个用户信息窗口
CN小黑
09-05 1322
用户信息窗口如果用设计师界面来做当然是非常简单了，但是为了锻炼自己的开发能力和对QT以及C++的深入理解，有必要用代码来进行操作。其实，代码比设计师界面更加灵活。看到代码多，不要害怕，其实代码中的大部分单词只需要输入开头就可以自动补全的。 新建一个项目，基于对话框，取消界面选项。 头文件如下： #ifndef DIALOG_H #define DIALOG_H #include #i
2023.04.26 QT 制作登录界面
qq_58544023的博客
04-26 1161
2. 当用户名，和密码（admin，123456）输入错误时，输出账号或密码错误 ，并清空密码。3. 正确时，输出登录成功，并退出。
Qt与Mysql进行连接实现账号的注册登录和密码修改和验证码附带gitee链接
weixin_45646601的博客
09-06 3034
Qt与Mysql进行连接实现账号的注册登录和密码修改和验证码附带gitee链接
[QT编程系列-7]：C++图形用户界面编程，QT框架快速入门培训 - 3- QT窗体设计 - 自定义工具栏、状态栏、快捷键、图标
文火冰糖（王文兵）的博客
07-13 1219
在Qt中，ToolBar（工具栏）是一种常见的GUI元素，用于提供应用程序的常用工具按钮和操作。工具栏通常包含一系列图标按钮，用于执行常见的操作或快速访问功能。以下是在Qt中创建和使用工具栏的一般步骤：创建// 创建工具栏对象，this为父窗口或父部件创建工具栏上的QAction* openAction = new QAction(QIcon(":/icons/open.png"), tr("打开"), this);// 创建一个工具按钮动作。
[QT_047]Qt学习之表单布局器（QFormLayout）
kongcheng253的博客
01-28 4819
Qt学习之表单布局器（QFormLayout）
Qt高级——Qt数据可视化性能优化
06-10
Qt 数据可视化是 Qt 框架的一个强大功能，但是如果数据量过大，绘制会变得缓慢，影响用户体验。为了优化性能，可以采取以下措施： 1. 数据分块：将数据分为多个小块，分批绘制，避免一次性绘制过多数据。 2. 使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值