QT基础之QLayout综合实例

已于 2022-05-16 00:13:00 修改
阅读量1.1k 收藏 6
点赞数 2
分类专栏： QT学习与应用 文章标签： qt 开发语言 QLayout QStackedWidget
于 2022-05-16 00:02:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leacock1991/article/details/124790976
版权

文章目录

更多参见
QT基础与实例应用目录

代码链接

GitHub链接 ： LayoutExample

布局介绍

最外层使用一个分割窗体QSplitter，其左侧为一个QListWidget，右侧是一个QVBoxLayout布局，此布局包含一个堆栈窗体QStackWidget和一个QHBoxWidget用于布局按钮，堆栈窗体包含三个页面。整体布局如下图。

请添加图片描述

导航页的实现

导航页为上图QSplitter的右侧部分，包含 三个页面对象、两个按钮，一个堆栈窗体对象。

头文件：

class Content : public QFrame
{
    Q_OBJECT
    // 包含 三个页面对象、两个按钮，一个堆栈窗体对象
public:
    Content(QWidget *parent = nullptr);
    ~Content();
    // 一个堆栈窗体对象
    QStackedWidget *stack;
private:
    // 整体布局
    QVBoxLayout *rightMainLayout;
    // 三个页面对象
    BaseInfo *baseInfo;
    Contact *contact;
    Detail *detail;
    // 两个按钮
    QPushButton *modifyBtn;
    QPushButton *closeBtn;
    QHBoxLayout *btnLayout;  // 按钮布局
};

Cpp文件：

Content::Content(QWidget *parent)
    : QFrame(parent)
{
    // 创建 QStackedWidget
    stack = new QStackedWidget(this);
    stack->setFrameStyle(QFrame::Panel|QFrame::Raised); // 设置风格
    // 向QStackedWidget中插入页面，按顺序插入
    baseInfo = new BaseInfo();
    contact = new Contact();
    detail = new Detail();
    stack->addWidget(baseInfo);
    stack->addWidget(contact);
    stack->addWidget(detail);
    // 创建两按钮
    modifyBtn = new QPushButton(tr("修改"));
    closeBtn = new QPushButton(tr("关闭"));
    // 按钮布局
    btnLayout = new QHBoxLayout;
    // 加入 空间间隔 占位符，使两个按钮靠右对齐
    btnLayout->addStretch();
    btnLayout->addWidget(modifyBtn);
    btnLayout->addWidget(closeBtn);
    // 整体布局
    rightMainLayout = new QVBoxLayout(this);
    rightMainLayout->setMargin(10);
    rightMainLayout->setSpacing(6);
    rightMainLayout->addWidget(stack);
    rightMainLayout->addLayout(btnLayout);
}

基本信息页面的实现

请添加图片描述

导航页中baseInfo对象,参见QT基础之基本布局QLayout 或者 QT基础之基本布局QLayout.md

头文件

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

signals:
private:

    // LeftLayout 设置函数
    void LeftLayoutSetting();
    // RightLayout 设置函数
    void RightLayoutSetting();
    // MainLayout 设置函数
    void MainLayoutSetting();

    // LeftLayout
    QLabel *UserNameLabel;// 用户名
    QLabel *NameLabel;// 姓名
    QLabel *SexLabel;// 性别
    QLabel *DepartmentLabel;// 部门
    QLabel *AgeLabel;// 年龄
    QLabel *NoteLabel;// 备注
    QLineEdit * UserNameLineEdit;
    QLineEdit *NameLineEdit;
    QComboBox *SexComboBox;
    QTextEdit *DepartmentTextEdit;
    QLineEdit *AgeLineEdit;
    QGridLayout *LeftLayout; //整个 左侧 网格布局

    // RightLayout
    QLabel *HeadLabel; // 头像
    QLabel *HeadIconLabel; // 头像图标
    QPushButton *UpdateHeadBtn; // 头像更新按钮
    QHBoxLayout *RightTopLayout; // 头像 这部分 水平布局
    QLabel *PersonalInfoLabel; // 个人说明
    QTextEdit *PersonalInfoTextEdit;
    QVBoxLayout *RightLayout; //整个 右侧 垂直布局

    // MainLayout
    QGridLayout *MainLayout; //整个 所有 网格布局
};

Cpp文件

BaseInfo::BaseInfo(QWidget *parent) : QWidget(parent)
{
    setWindowTitle(tr("QT基础之基本布局QLayout"));
    LeftLayoutSetting();
    RightLayoutSetting();
    MainLayoutSetting();
}


void BaseInfo::LeftLayoutSetting()
{
    //左侧
    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("年龄:"));
    AgeLineEdit = new QLineEdit();

    NoteLabel = new QLabel(tr("备注:"));
    // 设置控件的风格，有形状和阴影两项配合设定
    // 形状: NoFrame Box Panel WinPanel HLine VLine StyledPanel 六种
    // 阴影: Plain Raised Sunken 三种
    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);
}
void BaseInfo::RightLayoutSetting()
{
    HeadLabel = new QLabel(tr("头像"));
    HeadIconLabel = new QLabel();
    QPixmap icon(":/icon/head.png");
    HeadIconLabel->setPixmap(icon);
    HeadIconLabel->setFixedSize(100, 100);
    //HeadIconLabel->resize(icon.width(),icon.height());
    // setScaledContents按比例缩放图片达到理想的效果
    HeadIconLabel->setScaledContents(true);
    UpdateHeadBtn = new QPushButton(tr("更新"));
    // 右上 头像部分布局
    RightTopLayout = new QHBoxLayout();
    RightTopLayout->addWidget(HeadLabel);
    RightTopLayout->addWidget(HeadIconLabel);
    RightTopLayout->addWidget(UpdateHeadBtn);
    RightTopLayout->setSpacing(20); // 控件之间的间距

    PersonalInfoLabel = new QLabel(tr("个人说明"));
    PersonalInfoTextEdit = new QTextEdit();

    RightLayout = new QVBoxLayout(); // 由于 不是主布局器 不用指定父窗口

    RightLayout->addLayout(RightTopLayout); // 子布局
    RightLayout->addWidget(PersonalInfoLabel);
    RightLayout->addWidget(PersonalInfoTextEdit);
    RightLayout->setMargin(10); // 控件与窗体的边距

}

void BaseInfo::MainLayoutSetting()
{
    MainLayout = new QGridLayout(this);// 主布局 父窗口指定为this
    MainLayout->setMargin(15); // 控件与窗体的边距
    MainLayout->setSpacing(10); // 控件之间的间距
    MainLayout->addLayout(LeftLayout,0,0);
    MainLayout->addLayout(RightLayout,0,1);

    // 保存布局的调整大小模式
    MainLayout->setSizeConstraint(QLayout::SetFixedSize);
}

setSizeConstraint此属性保存布局的调整大小模式看下表，枚举 QLayout::SizeConstraint 可能的值是:
请添加图片描述

联系方式页面的实现

请添加图片描述

头文件

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

signals:

private:
    QLabel *emailLabel;
    QLineEdit *emailLineEdit;
    QLabel *addrLabel;
    QLineEdit *addrLineEdit;
    QLabel *zipCodeLabel;
    QLineEdit *zipCodeLineEdit;
    QLabel *mobileTeleLabel;
    QLineEdit *mobileTeleLineEdit;
    QCheckBox *mobileTeleCheckBox;
    QLabel *officePhoneLabel;
    QLineEdit *officePhoneEdit;

    QGridLayout *mainLayout;
};

Cpp文件

Contact::Contact(QWidget *parent) : QWidget(parent)
{
    emailLabel = new QLabel(tr("电子邮件:"));
    emailLineEdit = new QLineEdit;
    addrLabel = new QLabel(tr("联系地址:"));
    addrLineEdit = new QLineEdit;
    zipCodeLabel = new QLabel(tr("邮政编码:"));
    zipCodeLineEdit = new QLineEdit;
    mobileTeleLabel = new QLabel(tr("移动电话:"));
    mobileTeleLineEdit = new QLineEdit;
    mobileTeleCheckBox = new QCheckBox(tr("接收短信"));
    officePhoneLabel = new QLabel(tr("办公电话:"));
    officePhoneEdit = new QLineEdit;

    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(zipCodeLabel,2,0);
    mainLayout->addWidget(zipCodeLineEdit,2,1);
    mainLayout->addWidget(mobileTeleLabel,3,0);
    mainLayout->addWidget(mobileTeleLineEdit,3,1);
    mainLayout->addWidget(mobileTeleCheckBox,3,2);
    mainLayout->addWidget(officePhoneLabel,4,0);
    mainLayout->addWidget(officePhoneEdit,4,1);
    // 保存布局的调整大小模式
    mainLayout->setSizeConstraint(QLayout::SetFixedSize);
}

详细信息页面的实现

请添加图片描述

头文件

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

signals:

private:
    QLabel *nationalLabel;
    QComboBox *nationalComboBox;
    QLabel *provinceLabel;
    QComboBox *provinceComboBox;
    QLabel *cityLabel;
    QLineEdit *cityLineEdit;
    QLabel *introductLabel;
    QTextEdit *introductLineEdit;

    QGridLayout *mainLayout;
};

Cpp文件

Detail::Detail(QWidget *parent) : QWidget(parent)
{
    nationalLabel = new QLabel(tr("国家/地址:"));
    nationalComboBox = new QComboBox;
    nationalComboBox->insertItem(0,tr("国家1"));
    nationalComboBox->insertItem(1,tr("国家2"));
    nationalComboBox->insertItem(2,tr("国家3"));

    provinceLabel = new QLabel(tr("省份:"));
    provinceComboBox = new QComboBox;
    provinceComboBox->insertItem(0,tr("省份1"));
    provinceComboBox->insertItem(1,tr("省份2"));
    provinceComboBox->insertItem(2,tr("省份3"));

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

    introductLabel = new QLabel(tr("个人说明:"));
    introductLineEdit = new QTextEdit;

    mainLayout = new QGridLayout(this);
    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(introductLineEdit,3,1);
}

Main函数

Cpp文件

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    // 设置字体
    QFont font("微软雅黑",12);
    a.setFont(font);
    // 分割窗体
    QSplitter *splitter = new QSplitter(Qt::Horizontal);
    splitter->setOpaqueResize(true); // 拖拉分割线的时候，窗口是否实时显示
    QListWidget *list = new QListWidget;
    splitter->addWidget(list);
    list->insertItem(0,QObject::tr("基本信息"));
    list->insertItem(1,QObject::tr("联系方式"));
    list->insertItem(2,QObject::tr("详细资料"));
    Content *content= new Content;
    splitter->addWidget(content);
    QObject::connect(list,SIGNAL(currentRowChanged(int)),content->stack,
                     SLOT(setCurrentIndex(int)));

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

//    Content w;
//    w.show();
    return a.exec();
}

注按钮消息未处理，数据存储未处理，可自行添加

希望我的文章对于大家有帮助，由于个人能力的局限性，文中可能存在一些问题，欢迎指正、补充！

墨1024
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Qt项目开发实例 （含源码）
啊渊的专栏
11-29 4万+
qt教程、qt项目、qt下载、qt项目实战、qt多线程。本文通过分析demo源码，QT实战的方式进行学习，学习路线是以实战为目录，全面的使用自己的学习知识，文章中编写一系列的学习游戏demo，与大家一起分享。
Qt开发总结（16）——布局Layout
学习雷锋好榜样
12-12 3101
总结了部分常用了基本控件之后，本篇笔记对Qt的布局管理进行总结。Qt自带一系列简单而强大的布局管理工具，以自动在窗体中排布控件。这极大的方便了开发人员管理GUI控件，达到几乎强迫症级别的优美排布，尤其是在适应不同分辨率界面的时候。 所有的QWidget子类都可以用layout管理他们的控件，用QWidget::setLayout()函数既可以为这个widget设置layout。如果一个Layou...
Qt自学之路（四）-layout
qq_30574227的博客
09-26 2908
对Qt布局系统的理解与总结
Qt 基础组件速学 布局篇QLayout
最新发布
weixin_50873490的博客
06-20 241
本次学习布局控件，网格，水平，垂直，堆栈窗口布局。14-QLayout · jbjnb/Qt demo - 码云 - 开源中国 (gitee.com)
40个Qt学习小案例
热门推荐
weixin_45046639的博客
01-30 3万+
40个Qt学习小案例 一．资源介绍 这是一份关于Qt开发小案例的资料，是对我在学习Qt框架时做的一些小练习进行了简单的整理，小例子大都比较简单，代码配有详细注释，对Qt初学者十分友好，当然最好是要有C++基础。以下是关于资料内容的一个简介。对Qt感兴趣的朋友可以下载来做参考。 二．下载链接 三．使用说明 1. 点开文件夹删除.user文件，双击打开工程文件 2. 打开后，配置项目 四．内容概要 案例简介如下： (罗列格式：文件名 内容概要) QpushButton Qt的初步认识 &
Qt 布局(QLayout 类&QStackedWidget 类) 总结
wei_Embedded_z的博客
10-15 1087
Qt 布局(QLayout 类&QStackedWidget 类)
QT常用布局layout快速入门
wjysg8408982的博客
10-05 4329
layout继承图 用layout布局实现下面的窗口效果
QT编程实例--打地鼠+直流电机+点阵数码管
12-17
- QT库提供了丰富的类和函数，用于构建GUI，如QWidget、QLayout、QPushButton等，它们构成了QT界面的基础。 - QT事件驱动模型，使得用户交互可以被有效地处理和响应。 - QThread用于多线程编程，确保UI的流畅性和...
Qt连连看源码，qt5.0以上版本可用
02-07
总的来说，Qt连连看源码是一个综合运用了Qt框架多个组件和特性的实例，对于学习Qt GUI编程和游戏开发具有很好的参考价值。通过阅读和分析源码，开发者不仅可以了解Qt的基本用法，还能深入理解游戏逻辑的实现。
QT4编程第二版
11-25
12. **综合实例**：通过实际项目案例，展示如何将上述知识点整合到一个完整的应用程序中。 13. **性能优化**：提供一些性能调优的建议，如内存管理和异步编程。 14. **单元测试**：介绍Qt的测试框架，如Qt Test，...
QT经典教程_详细一步一步例子
04-12
为了使更多的Qt初学者能尽快入门Qt，也为了Qt及Qt Creator的快速普及，我们花费大量精力写出了这一系列教程。虽然教程的知识可能很浅显，虽然教程的语言可能不规范，但是它却被数十万网友所认可。我们会将这一系列教程一直写下去，它将涉及Qt的方方面面 一、Qt Creator的安装和hello world程序的编写 二、Qt Creator编写多窗口程序 三、Qt Creator登录对话框 四、Qt Creator添加菜单图标 五、Qt Creator布局管理器的使用 六、Qt Creator实现文本编辑 七、Qt Creator实现文本查找 八、Qt Creator实现状态栏显示 九、Qt Creator中鼠标键盘事件的处理实现自定义鼠标指针 十、Qt Creator中实现定时器和产生随机数 十一、Qt 2D绘图（一）绘制简单图形 十二、Qt 2D绘图（二）渐变填充 十三、Qt 2D绘图（三）绘制文字 十四、Qt 2D绘图（四）绘制路径 十五、Qt 2D绘图（五）显示图片 十六、Qt 2D绘图（六）坐标系统 十七、Qt 2D绘图（七）Qt坐标系统深入 十八、Qt 2D绘图（八）涂鸦板 十九、Qt 2D绘图（九）双缓冲绘图简介 二十、Qt 2D绘图（十）图形视图框架简介 二十一、Qt数据库（一）简介 二十二、Qt数据库（二）添加MySQL数据库驱动插件 二十三、Qt数据库（三）利用QSqlQuery类执行SQL语句（一） 二十四、Qt数据库（四）利用QSqlQuery类执行SQL语句（二） 二十五、Qt数据库（五）QSqlQueryModel 二十六、Qt数据库（六）QSqlTableModel 二十七、Qt数据库（七）QSqlRelationalTableModel 二十八、Qt数据库（八）XML（一） 二十九、Qt数据库（九）XML（二） 三十、Qt数据库（十）XML（三） 三十一、Qt 4.7.0及Qt Creator 2.0 beta版安装全程图解 三十二、第一个Qt Quick程序（QML程序） 三十三、体验QML演示程序 三十四、Qt Quick Designer介绍 三十五、QML组件 三十六、QML项目之Image和BorderImage 三十七、Flipable、Flickable和状态与动画 三十八、QML视图 三十九、QtDeclarative模块 四十、使用Nokia Qt SDK开发Symbian和Maemo终端软件 四十一、Qt网络（一）简介 四十二、Qt网络（二）HTTP编程 四十三、Qt网络（三）FTP（一） 四十四、Qt网络（四）FTP（二） 四十五、Qt网络（五）获取本机网络信息 四十六、Qt网络（六）UDP 四十七、Qt网络（七）TCP(一） 四十八、Qt网络（八）TCP(二）
QT5 卡片布局（QLayout）
11-26
QT5实现的卡片布局，基于QLayout的CardStackLayout，实现动画效果。
QT项目-多文档编辑器
06-03
总之，QT项目-多文档编辑器是一个综合运用了QT库、C++编程和GUI设计原理的实例，展示了如何在Windows平台上开发功能齐全、界面友好的文本编辑工具。通过深入理解并实践这些技术，开发者可以进一步提升其在桌面应用...
QT学习之 布局管理
xialianggang1314的博客
04-29 5203
布局管理 以下是Qt手册中的《布局管理》的译文 在一个Widget中，Qt布局管理系统提供了一个简单而有效的方式来自动组织子widget，以保证他们能够很好地利用可用空间。 介绍 Qt包含一个布局管理类的集合，它们被用来描述widgets如何在应用程序的用户界面中呈现的。当可用空间发生变化时，这些布局将自动调整widgets的位置和大小，以确保它们布局的一致性和用户界面主体可用
QLayout布局间消除间隙和QLayout边缘空白调整
kupePoem的专栏
10-22 4014
Qt中界面开发的一个优势就是QLayout（布局）和QSpacer（弹簧）的结合。通过在Qt Designer中将需要的控件拖到窗口中，在窗口中添加QLayout和QSpacer以确定控件的位置，将所有可视化的控件全部在窗口中布局好，这样一来，代码只需实现功能就可以了，界面布局的代码就会少很多，而且很方便，可以加快页面的开发速度。
二、PyQt5实现Python界面设计_QLayout（界面分布器）
m0_59160272的博客
08-03 1902
在窗体设计中，位置的摆放是一个最基本且关键的步骤，它直接影响到整个窗体的美观，在PyQt5中有两种方式可以进行控件的位置摆放，一种是绝对定位，一种十分布管理器。绝对定位的好处在于，可以根据坐标准放置在需要的位置上，一般使用Move()函数，其缺点就是无法随着窗体大小的变化而变化而布局管理器的优点则体现在控件可以跟随窗口大小的变化做自动的适应，自动的更新界面控件的大小。.........
qt中QHBoxLayout或QVBoxLayout布局内控件的动态生成与显示
qq130106486的博客
10-09 3510
qt中QHBoxLayout或QVBoxLayout布局内控件的动态生成与显示 打个比方，我现在写个小例子，这个小例子是这样的，整个界面分为俩个部分，分为上半部分和下半部分，上半部分为5个按钮，点击5个按钮，下半部分分别会动态的出现不同的label显示内容。(显示内容为：2017到2018欧冠十六强队伍)效果如下图所示：效果如下图所示：  这个其实是一个很简单的例子，我写这个例子的最重要...
Qt图形视图框架：QGraphicsLayout
友善啊，朋友的博客
06-05 1821
一、描述 QGraphicsLayout 是一个抽象类，用于为QGraphicsLayoutItem及其子项（如QGraphicsWidget）提供布局。QGraphicsWidget 通过 QGraphicsWidget::setLayout() 设置布局。当小部件调整大小时，布局将自动排列小部件的子项。 1.1、编写自定义布局 可以使用 QGraphicsLayout 作为基础来编写自己的自定义布局。创建自定义布局时，必须至少重新实现以下功能： setGeometry()：布局的几何形状。 .
qt如何获取QLayout中的layout控件
05-26
在 Qt 中，可以使用 `QLayout::itemAt()` 方法获取布局中的子控件。 首先，需要获取到对应的 QLayout 指针，比如 `QVBoxLayout* layout`。然后可以使用以下代码获取子控件： ```cpp QLayoutItem* item = layout->...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

墨1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值