1. Toy模板网首页
  2. > Toy博客

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

9月前 作者：感觉画质不如…原神 分类：Toy博客 阅读(31) 违法举报

这篇具有很好参考价值的文章主要介绍了Qt demo——修改用户资料窗口。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、效果展示

基本信息界面
qt界面设计 demo,QT,qt,ui

联系方式界面
qt界面设计 demo,QT,qt,ui
详细资料界面

qt界面设计 demo,QT,qt,ui

二、实现

1.窗口布局

qt界面设计 demo,QT,qt,ui

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

2.实现步骤与代码

第一步：创建项目

qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
将 content.h中继承的父类改为 QFrame，头文件也改成 #include <QFrame>。

qt界面设计 demo,QT,qt,ui
将 conten.cpp里面的 QDialog也改成 QFrame。

qt界面设计 demo,QT,qt,ui

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

添加 BaseInfo类

点击 add new添加新文件。
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui

再依次添加 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

添加头像资源文件。

qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
qt界面设计 demo,QT,qt,ui
随便选择一张头像。

qt界面设计 demo,QT,qt,ui

再打开 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文件，添加如下代码。文章来源地址https://www.toymoban.com/news/detail-770779.html


#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();
}

到了这里，关于Qt demo——修改用户资料窗口的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • [Qt学习笔记]Halcon窗口界面上显示文字的字体尺寸、样式修改

    [Qt学习笔记]Halcon窗口界面上显示文字的字体尺寸、样式修改

    养成良好的查资料习惯，可以实现事半功倍。 在Halcon12中，有set_font和set_display_font两个算子，其中set_display_font是本地函数形式，所以最终的实现算子为set_font. 按照不同的系统环境下，使用方法略有不同： 不同的系统下使用的方法不同，原本以为比较简单，直接按照文档的

    2024年03月20日
    浏览(53)
  • 常用界面设计组件 —— 窗体（QT）

    常用界面设计组件 —— 窗体（QT）

    组件是GUI的基本元素，也称为UI控件。它接受来自底层平台的不同用户事件，如鼠标和键盘事件（以及其它事件）。所有组件都继承自QObject。QWidget是一个基本的组件，是所有UI组件的基类。它描述组件所需要的大多数属性，包括几何图形、颜色、键盘行为、工具提示等属性。

    2024年01月20日
    浏览(41)
  • qt设计界面

    qt设计界面

    widget.h main.cpp widget.cpp 结果 XMind

    2024年02月10日
    浏览(38)
  • QT界面布局和设计

    QT界面布局和设计

    2024年02月12日
    浏览(47)
  • Qt Dialog 界面设计之 FindDialog

    Qt Dialog 界面设计之 FindDialog

    目录 一、FindDialog效果图 二、实现代码 H文件： CPP文件： 三、信号和槽 四、补充说明 代码的逻辑顺序：          1、创建并初始化窗口部件。          2、添加布局,把创建好的控件放入布局当中。          3、设置控件的属性。          4、建立信号-槽之间的

    2023年04月18日
    浏览(47)
  • QT day1 (图形界面设计)

    QT day1 (图形界面设计)

    要求：  功能函数模块  做出如下效果图：  

    2024年02月08日
    浏览(37)
  • QT界面设计：深入理解QSS样式表设计

    QT界面设计：深入理解QSS样式表设计

    本文详细介绍了QT界面设计中的QSS样式技术，包括QSS样式表的语法、用法、selector设置以及属性列表等内容，帮助你提升审美，打造出令人羡慕的软件界面。

    2024年02月13日
    浏览(47)
  • 设计qt界面并通过代码显示

    设计qt界面并通过代码显示

    方法 1： 在 ui 文件所在的文件夹中，按快捷键 Shift+鼠标右键，在弹出的菜单栏中选择“在此处打开 Powershell\\\" 在终端输入指令：pyuic5 -o xxx.py py xxx.ui 例子：pyuic5 -o 界面.py untitled.ui 方法 2：通过 python 代码直接调用终端输入命令 方法 1.界面生成的代码 + python 代码 方法 2.ui 文件

    2024年02月09日
    浏览(39)
  • Qt界面设计——侧边栏隐藏和滑出

    Qt界面设计——侧边栏隐藏和滑出

    在日常项目中，界面布局上经常使用到侧边栏的方式，在侧边栏放置控件进行复合使用，可以实现子功能界面的隐藏和滑出，效果展示如下： 界面控件很简单，主界面QWidget，侧边栏也用一个QWidget和一个按钮QPushbutton来进行组合。通过点击按钮来显示和隐藏侧边栏。主要用到

    2024年02月11日
    浏览(46)
  • 【Qt设计开发】GUI界面设计开发

    【Qt设计开发】GUI界面设计开发

      本文是我在学习QT的GUI界面设计过程当中的心得和学习笔记，在学习时已经有C， C++，Python的基础。文章附上了学习的代码，仅供大家参考。如果有问题，有错误欢迎大家留言。此外，博主还有另外几篇文章，分别关于 Python基础知识 、 Python的具体应用 、 C语言指针结构体

    2024年02月02日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包