Qt QSplitter、QDockWidget及QStackedWidget综合布局的例子

最新推荐文章于 2024-05-20 22:42:45 发布
最新推荐文章于 2024-05-20 22:42:45 发布
阅读量364 收藏 1
点赞数 1
分类专栏： Qt学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanzhenyu2019/article/details/102738488
版权

导航页实现

新建Qt Gui应用，项目名称为“FormApplication”,基类选择“QDialog”，取消“创建界面”复选框的选中状态
新建类“Content”
content.h

#ifndef CONTENT_H
#define CONTENT_H

#include <QDialog>
#include <QStackedWidget>
#include <QPushButton>
#include "baseinfo.h"
#include "contact.h"
#include "detail.h"

class Content : public QFrame
{
    Q_OBJECT

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

    QStackedWidget *stack;
    QPushButton *AmendBtn;
    QPushButton *CloseBtn;

    BaseInfo *baseInfo;
    Contact *contact;
    Detail *detail;
};
#endif // CONTENT_H

content.cpp

  #include "content.h"

Content::Content(QWidget *parent)
   :QFrame(parent)
{
   stack = new QStackedWidget(this);
   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("修改"));
   CloseBtn = new QPushButton(tr("关闭"));
   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()
{

}

“修改用户基本信息”设计

新建类BaseInfo 基类选择 QWidget
baseinfo.h

#ifndef BASEINFO_H
#define BASEINFO_H

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

class BaseInfo : public QWidget
{
    Q_OBJECT
public:
    explicit BaseInfo(QWidget *parent = nullptr);
private:
    //左侧
    QLabel *UserNameLabel;
    QLabel *NameLabel;
    QLabel *SexLable;
    QLabel *DepartmentLabel;
    QLabel *AgeLable;
    QLabel *OtherLabel;
    QLineEdit *UserNameLineEdit;
    QLineEdit *NameLineEdit;
    QComboBox *SexComboBox;
    QTextEdit *DepartmentTextEdit;
    QLineEdit *AgeLineEdit;
    QGridLayout *LeftLayout;

    //右侧
    QLabel *HeadLable;
    QLabel *HeadIconLabel;
    QPushButton *UpdateHeadBtn;
    QHBoxLayout *TopRightLayout;

    QLabel *introductionLable;
    QTextEdit *IntroductionTextEdit;
    QVBoxLayout *RightLayout;

signals:

public slots:
};

#endif // BASEINFO_H

baseinfo.cpp

#include "baseinfo.h"

BaseInfo::BaseInfo(QWidget *parent) : QWidget(parent)
{
    /*** 左侧 ***/
    UserNameLabel = new QLabel(tr("用户:"));
    UserNameLineEdit = new QLineEdit;

    NameLabel = new QLabel(tr("姓名:"));
    NameLineEdit = new QLineEdit;

    SexLable = new QLabel(tr("性别:"));
    SexComboBox = new QComboBox;
    SexComboBox->addItem(tr("女："));
    SexComboBox->addItem(tr("男："));

    DepartmentLabel = new QLabel(tr("部门:"));
    DepartmentTextEdit = new QTextEdit;

    AgeLable = new QLabel(tr("年龄:"));
    AgeLineEdit = new QLineEdit;

    OtherLabel = new QLabel(("备注:"));
    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(SexLable,2,0);
    LeftLayout->addWidget(SexComboBox,2,1);

    LeftLayout->addWidget(DepartmentLabel,3,0);
    LeftLayout->addWidget(DepartmentTextEdit,3,1);

    LeftLayout->addWidget(AgeLable,4,0);
    LeftLayout->addWidget(AgeLineEdit,4,1);

    LeftLayout->addWidget(OtherLabel,5,0,1,2);
    //设定两列分别占用空间的比例为1：3
    LeftLayout->setColumnStretch(0,1);
    LeftLayout->setColumnStretch(1,3);

     /*** 右侧 ***/
    HeadLable = new QLabel(tr("头像:"));
    HeadIconLabel = new QLabel;
    QPixmap icon("312.png");
    HeadIconLabel->setPixmap(icon);
    HeadIconLabel->resize(icon.width(),icon.height());
    UpdateHeadBtn = new QPushButton(tr("更新"));

    TopRightLayout = new QHBoxLayout();

    TopRightLayout->setSpacing(20);
    TopRightLayout->addWidget(HeadLable);
    TopRightLayout->addWidget(HeadIconLabel);
    TopRightLayout->addWidget(UpdateHeadBtn);

    introductionLable = new QLabel(tr("个人说明:"));
    IntroductionTextEdit = new QTextEdit;

    RightLayout = new QVBoxLayout();
    RightLayout->setMargin(10);
    RightLayout->addLayout(TopRightLayout);
    RightLayout->addWidget(introductionLable);
    RightLayout->addWidget(IntroductionTextEdit);

    QGridLayout *mainlayout = new QGridLayout(this);
    mainlayout->setMargin(15); //设定对话框的边距为15
    mainlayout->setSpacing(10); //设定各个控件之间的间距为10
    mainlayout->addLayout(LeftLayout,0,0);
    mainlayout->addLayout(RightLayout,0,1);
    mainlayout->setSizeConstraint(QLayout::SetFixedSize);//设定最优化显示，并且使用用户无法改变对话框的大小
   }

“显示用户联系方式”设计

新建类Contact，基类选择QWidget
contact.h

#ifndef CONTACT_H
#define CONTACT_H

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

class Contact : public QWidget
{
    Q_OBJECT
public:
   Contact(QWidget *parent = nullptr);
private:
    QLabel *EmailLabel;
    QLineEdit *EmailLineEdit;
    QLabel *AddrLabel;
    QLineEdit *AddrLineEdit;
    QLabel *CodeLabel;
    QLineEdit *CodeLineEdit;
    QLabel *MoviTelLabel;
    QLineEdit *MoviTelLineEdit;
    QCheckBox *MoviTelCheckBox;
    QLabel *ProTelLabel;
    QLineEdit *ProTelLineEdit;
    QGridLayout *mainLayout;

signals:

public slots:
};

#endif // CONTACT_H

contact.cpp

#include "contact.h"

Contact::Contact(QWidget *parent) : QWidget(parent)
{
    EmailLabel=new QLabel(tr("电子邮件:"));
    EmailLineEdit=new QLineEdit;

    AddrLabel = new QLabel(tr("联系地址:"));
    AddrLineEdit = new QLineEdit;

    CodeLabel = new QLabel(tr("邮政编码:"));
    CodeLineEdit = new QLineEdit;

    MoviTelLabel = new QLabel(tr("移动电话:"));
    MoviTelLineEdit = new QLineEdit;
    MoviTelCheckBox = new QCheckBox(tr("接收留言"));

    ProTelLabel = new QLabel(tr("办公电话:"));
    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(MoviTelCheckBox,3,2);
    mainLayout->addWidget(ProTelLabel,4,0);
    mainLayout->addWidget(ProTelLineEdit,4,1);
    mainLayout->setSizeConstraint(QLayout::SetFixedSize);

}

“显示用户的详细资料”设计
新建类Detail，基类选择QWidget
detail.h

#ifndef DETAIL_H
#define DETAIL_H

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

class Detail : public QWidget
{
    Q_OBJECT
public:
    explicit Detail(QWidget *parent = nullptr);
private:
    QLabel *NationalLabel;
    QComboBox *NationalComboBox;
    QLabel *ProvinceLabel;
    QComboBox *ProvinceComboBox;
    QLabel *CityLable;
    QLineEdit *CityLineEdit;
    QLabel *IntroductLabel;
    QTextEdit *IntroductTextEdit;
    QGridLayout *mainLayout;

signals:

public slots:
};

#endif // DETAIL_H

detail.cpp

#include "detail.h"

Detail::Detail(QWidget *parent) : QWidget(parent)
{
    NationalLabel = new QLabel("国家/地址:");
    NationalComboBox = new QComboBox;
    NationalComboBox->insertItem(0,tr("中国"));
    NationalComboBox->insertItem(1,tr("美国"));
    NationalComboBox->insertItem(2,tr("英国"));

    ProvinceLabel = new QLabel(tr("省份:"));
    ProvinceComboBox = new QComboBox;
    ProvinceComboBox->insertItem(0,tr("11"));
    ProvinceComboBox->insertItem(1,tr("22"));
    ProvinceComboBox->insertItem(2,tr("33"));

    CityLable = new QLabel(tr("城市:"));
    CityLineEdit = new QLineEdit;

    IntroductLabel = new QLabel(tr("个人说明:"));
    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(CityLable,2,0);
    mainLayout->addWidget(CityLineEdit,2,1);
    mainLayout->addWidget(IntroductLabel,3,0);
    mainLayout->addWidget(IntroductTextEdit,3,1);

}

编写主函数

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

    Content *content = new Content(splitterMain);
    QObject::connect(list,SIGNAL(currentRowChanged(int)),content->stack,SLOT(setCurrentIndex(int)));

    splitterMain->setWindowTitle(QObject::tr("修改用户资料"));
    splitterMain->setMinimumSize(splitterMain->minimumSize());
    splitterMain->setMaximumSize(splitterMain->maximumSize());
    splitterMain->show();

    return a.exec();
}

工程结构及效果图

工程结构图
在这里插入图片描述
程序运行效果图
在这里插入图片描述

yanzhenyu2019
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QT界面布局——停靠窗口QDockWidget +分割窗口QSplitter +堆叠窗口QStackedWidget
仲羊的博客
04-09 2165
窗口的基本布局如下 1、分割窗口 QSplitter //分割窗口使用QSplitter类 QSplitter *splitterMain =new QSplitter(Qt::Horizontal,0); // 对窗口进行水平分割，0代表有分割的窗口为主窗口，也可以选择要分割的窗口 QTextEdit *textLeft =new QTextEd...
Qt之QDockWidget实例Demo
05-30
1、Demo演示参见博客：https://blog.csdn.net/ManagerUser/article/details/124892827?spm=1001.2014.3001.5502 2、Demo工程环境VS2019+Qt5.15.2 3、Demo主要作用帮助初学者立马上手
QSplitter、QDockWidget、QToolBar、布局
草帽小子的博客
01-03 595
最近使用Qt完成一个页面，里面很对东西都是自己摸索的，现在网上信息太分散，之前想做子窗口嵌套的效果，在网上找了好长时间都没有发现有人用QDockWidget,我很纳闷。我做一下整理，和大家分享。定义一个Qwidget * widget,把mainsplit...
QT教程-七,堆栈窗口 QStackedWidget
qq_58136559的博客
05-20 999
QT教程，堆栈窗体QStackWidget，实例介绍，接口详解，轻松get到其使用情况。
Qt窗口：QSplitter、QDockWidget、QStackedWidget
m0_73443478的博客
02-22 253
Qt窗口：QSplitter、QDockWidget、QStackedWidget
堆栈窗体QStackedWidget类以及布局QSplitter
化天际的相遇---博客
12-21 1603
Qt的布局方式主要有四种:   QGridLayout         栅格布局 QFormLayout       表格布局 QHBoxLayout       水平布局 QVBoxLayout       垂直布局   然而,只通过以上四种布局的组合似乎不太好用, 因此需要搭配分割器QSplitter, 在QSplitter中实现局部布局,最后再放进主
学习QT之QSplitter、QDockWidget、QStackedWidget
贝勒里恩的博客
03-03 657
学习QT之QSplitter、QDockWidget、QStackedWidget 一、QSplitter（分割窗口） #include "mainwindow.h" #include <QApplication> #include <QFont> #include <QSplitter> #include <QTextEdit> int mai...
QT Creator Qstackedwidget的简单例子
03-08
这个"QT Creator Qstackedwidget的简单例子"是一个基础的教学资源，帮助初学者理解如何在QT Creator中使用QStackedWidget。 首先，QStackedWidget的基本用法是将多个QWidget子类的对象（如QLabel、QPushButton、...
Qt的Widgets布局实战例子 经典QT布局例子
最新发布
06-18
分别是 QVBoxLayout（垂直布局）、QHBoxLayout（水平布局）、QGridLayout（网格布局）、QFormLayout（表单布局）和 QStackedLayout（分组布局）实战例子 除Qt Designer支持可视化设计和布局界面之外，Qt 提供了代码...
Qt5开发及实例-CH303.rar,Qt5堆栈窗体QStackedWidget类的使用代码
09-15
Qt5开发及实例,）（CH303）堆栈窗体QStackedWidget类的使用，当选择左侧列表框中不同的选项时，右侧显示所选的不同的窗体。在此使用列表框QListWidget. 本实例是采用编写代码的方式实现的，具体步骤如下： （1）新建...
Qt QDockWidget、QtreeWidget界面实现
03-09
QDockWidget是Qt提供的一种功能强大的组件，它允许我们创建浮动或停靠的工具面板，这对于那些需要灵活布局和多面板工作的应用程序尤其有用。而QTreeWidget则是一个用于展示层次化数据的控件，常用于文件系统浏览、...
[PyQt5]高级控件6 - 堆叠窗口QStackedWidget
yurensan的博客
11-08 2449
文章目录效果图完整代码 效果图 完整代码 import sys from PyQt5.QtWidgets import * class QStackedWidgetDemo(QMainWindow): def __init__(self): super(QStackedWidgetDemo, self).__init__() self.resize(400, 150) #设置窗口标题 self.setWindowTitle("Q
分割窗口QSplitter、停靠窗口QDockWidget和堆栈窗体QStackedWidget
SNAKEpc12138的博客
07-04 619
分割窗口QSplitter 直接上示例，内有详细备注。 一个简单的分割窗口功能，整个对话框由三个窗口组成，各窗口之间的大小可随意拖曳改变。 效果图如下： 代码如下： #include "mainwindow.h" #include <QApplication> #include <QSplitter> #include <QTextEdit> #include <QTextCodec> //提供文本编码之间的转换 int main(int argc,
Python Qt GUI设计：QTabWidget、QStackedWidget和QDockWidget容器控件类（提升篇—2）
不脱发的程序猿
11-03 3万+
有时候我们可能会面临这样一种情况：所开发的程序包含了太多的控件，导致一个窗口装载不下或者装载的控件太多而不美观。本篇博文就来解决这个问题，即如何在现有的窗口空间中装载更多的控件。
Qt学习——堆栈窗体QStackedWidget类
热门推荐
liming's blog
07-27 6万+
这些窗体都比较类似，相对简单，就没什么可以深入研究的了。 下面用代码实现上面窗口的设计： 1.建立项目时基类选择QDialog，取消Gernerate form复选框的选中状态。 2.在头文件dialog.h中编写如下代码： #include #include #include #include class Dialog : public QDi
QStackedWidget 控件
Jeffxu_lib的博客
12-08 7839
一、简介 1、QStackedWidget 控件相当于一个容器，提供一个空间来存放一系列的控件，并且每次只能有一个控件是可见的，即被设置为当前的控件。 2、常用接口函数： addWidget：向容器中添加控件 setCurrentWidget：设置当前显示的控件 currentWidget：返回当前的控件 removeWidget：删除指定控件 count：容器中控件的个数 insertWidget：在指定位置上插入指定控件 3、代码示例 /**** .h头文件 ****/ QStackedWidget
通俗易懂玩QT：QStackedWidget 学习
我是混子我怕谁
09-05 1264
业务需求，用到了 QStackWidget 这个类，然后程序存在很严重的内存泄露问题，所以特意研究了一下 QStackWidget 类，QStackWidget 类的功能是窗体切换，它比 QTabWidget 使用起来更为灵活，QStackWidget 类的窗体切换需要自己用 connect 来关联，同时也可以使用事件来触发。
Qt学习08——布局管理综合应用
shawn06
06-21 1291
本文通过制作一个用户信息管理窗口，复习之前所用到的多个布局管理控件和方法，实现堆栈、分割器、layout等的综合运用。本综合实例将采用Qt Creator的Design来设计UI，整个项目无需代码，完全由.ui文件实现。全文通过图文讲解，并在文末附上.ui文件的xml代码以供参考。
QT的多界面StackedWidge布局
qq_52137592的博客
05-20 853
在实际应用中，经常会遇到如图中这类页面，点击左侧按钮或菜单，右侧区域（红色框内）会切换不同页面的内容，在QT中，就可以使用StackedWidge来实现这种布局。简单来说，StackedWidge布局，是一个用于管理和显示多个页面的控件。所有页面堆叠在一起，但一次只显示其中一个，常用于用户需要在不同的视图或页面之间来回切换。
Qt不用Qdockwidget实现布局高度调节
05-19
如果你不想使用QDockWidget，可以使用QWidget和QVBoxLayout来实现布局高度调节。具体步骤如下： 1. 创建一个QWidget作为主窗口，并设置布局为QVBoxLayout。 2. 在QVBoxLayout中添加需要布局的子控件。 3. 为...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值