【十四】【QT开发应用】栅格布局,VS代码控制UI之栅格布局,图片资源qrc添加资源后保存,栅格布局添加控件

最新推荐文章于 2024-07-09 09:59:12 发布
最新推荐文章于 2024-07-09 09:59:12 发布
阅读量981 收藏 29
点赞数 32
分类专栏： QT开发应用 文章标签： qt ui 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74163972/article/details/139966543
版权 
#include "demo6_GridLayout.h"
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QCheckBox>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QGridLayout>
#include <QDebug>

demo6_GridLayout::demo6_GridLayout(QWidget *parent)
    : QWidget(parent)
{
    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);

    //头像
    QLabel* pImageLable1 = new QLabel(this);
    QPixmap pixmap(":/demo6_GridLayout/resource/微信图片_20221014111549.jpg");
    pImageLable1->setObjectName("pImageLable1");
    //pImageLable1->setMaximumWidth(800);
    //pImageLable1->setMaximumHeight(600);
    pImageLable1->setFixedSize(150, 150);
    pImageLable1->setPixmap(pixmap);
    pImageLable1->setScaledContents(true);

    //用户名
    QLineEdit* pUserNameLineEdit = new QLineEdit(this);
    pUserNameLineEdit->setFixedSize(300, 50);
    pUserNameLineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱"));

    //密码

    QLineEdit* pPassWordLineEdit = new QLineEdit(this);
    pPassWordLineEdit->setFixedSize(300, 50);
    pPassWordLineEdit->setPlaceholderText(QStringLiteral("密码"));
    pPassWordLineEdit->setEchoMode(QLineEdit::Password);

    //找回密码
    QPushButton* pForgotBotton = new QPushButton(this);
    pForgotBotton->setText(QStringLiteral("找回密码"));
    pForgotBotton->setFixedWidth(80);

    //记住密码
    QCheckBox* pRemeberCheckBox = new QCheckBox(this);
    pRemeberCheckBox->setText(QStringLiteral("记住密码"));

    //自动登录
    QCheckBox* pAutoLoginCheckBox = new QCheckBox(this);
    pAutoLoginCheckBox->setText(QStringLiteral("自动登录"));

    //登录
    QPushButton* pLoginButton = new QPushButton(this);
    pLoginButton->setFixedHeight(48);
    pLoginButton->setText(QStringLiteral("登录"));

    //注册账号
    QPushButton* pRegisterButton = new QPushButton(this);
    pRegisterButton->setFixedHeight(48);
    pRegisterButton->setText(QStringLiteral("注册账号"));


    QGridLayout* pGridLay = new QGridLayout(this);
    pGridLay->addWidget(pImageLable1, 0, 0, 3, 1);
    pGridLay->addWidget(pUserNameLineEdit, 0, 1, 1, 2);
    pGridLay->addWidget(pPassWordLineEdit, 1, 1, 1, 2);
    pGridLay->addWidget(pForgotBotton, 2, 1, 1, 1);
    pGridLay->addWidget(pRemeberCheckBox, 2, 2, 1, 1,Qt::AlignLeft|Qt::AlignVCenter);
    pGridLay->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1,Qt::AlignRight|Qt::AlignVCenter);
    pGridLay->addWidget(pLoginButton, 3, 1, 1, 2);
    pGridLay->addWidget(pRegisterButton, 4, 1, 1, 2);


}

demo6_GridLayout::~demo6_GridLayout()
{}

在这里插入图片描述

复盘

代码解释

#include "demo6_GridLayout.h"
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QCheckBox>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QGridLayout>
#include <QDebug>

// 构造函数，初始化父类 QWidget
demo6_GridLayout::demo6_GridLayout(QWidget *parent)
    : QWidget(parent)
{
    // 设置窗口标志，无边框和最小化、最大化按钮
    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);

    // 创建头像标签
    QLabel* pImageLable1 = new QLabel(this);
    // 加载头像图片
    QPixmap pixmap(":/demo6_GridLayout/resource/微信图片_20221014111549.jpg");
    pImageLable1->setObjectName("pImageLable1"); // 设置对象名称
    //pImageLable1->setMaximumWidth(800); // 设置最大宽度为 800（此行被注释掉）
    //pImageLable1->setMaximumHeight(600); // 设置最大高度为 600（此行被注释掉）
    pImageLable1->setFixedSize(150, 150); // 设置固定大小为 150x150
    pImageLable1->setPixmap(pixmap); // 设置标签的图片
    pImageLable1->setScaledContents(true); // 设置图片缩放以适应标签

    // 创建用户名输入框
    QLineEdit* pUserNameLineEdit = new QLineEdit(this);
    pUserNameLineEdit->setFixedSize(300, 50); // 设置固定大小为 300x50
    pUserNameLineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱")); // 设置占位符文本

    // 创建密码输入框
    QLineEdit* pPassWordLineEdit = new QLineEdit(this);
    pPassWordLineEdit->setFixedSize(300, 50); // 设置固定大小为 300x50
    pPassWordLineEdit->setPlaceholderText(QStringLiteral("密码")); // 设置占位符文本
    pPassWordLineEdit->setEchoMode(QLineEdit::Password); // 设置回显模式为密码模式

    // 创建找回密码按钮
    QPushButton* pForgotBotton = new QPushButton(this);
    pForgotBotton->setText(QStringLiteral("找回密码")); // 设置按钮文本
    pForgotBotton->setFixedWidth(80); // 设置固定宽度为 80

    // 创建记住密码复选框
    QCheckBox* pRemeberCheckBox = new QCheckBox(this);
    pRemeberCheckBox->setText(QStringLiteral("记住密码")); // 设置复选框文本

    // 创建自动登录复选框
    QCheckBox* pAutoLoginCheckBox = new QCheckBox(this);
    pAutoLoginCheckBox->setText(QStringLiteral("自动登录")); // 设置复选框文本

    // 创建登录按钮
    QPushButton* pLoginButton = new QPushButton(this);
    pLoginButton->setFixedHeight(48); // 设置固定高度为 48
    pLoginButton->setText(QStringLiteral("登录")); // 设置按钮文本

    // 创建注册账号按钮
    QPushButton* pRegisterButton = new QPushButton(this);
    pRegisterButton->setFixedHeight(48); // 设置固定高度为 48
    pRegisterButton->setText(QStringLiteral("注册账号")); // 设置按钮文本

    // 创建网格布局管理器
    QGridLayout* pGridLay = new QGridLayout(this);
    // 将头像标签添加到网格布局的第0行，第0列，占3行1列
    pGridLay->addWidget(pImageLable1, 0, 0, 3, 1);
    // 将用户名输入框添加到网格布局的第0行，第1列，占1行2列
    pGridLay->addWidget(pUserNameLineEdit, 0, 1, 1, 2);
    // 将密码输入框添加到网格布局的第1行，第1列，占1行2列
    pGridLay->addWidget(pPassWordLineEdit, 1, 1, 1, 2);
    // 将找回密码按钮添加到网格布局的第2行，第1列，占1行1列
    pGridLay->addWidget(pForgotBotton, 2, 1, 1, 1);
    // 将记住密码复选框添加到网格布局的第2行，第2列，占1行1列，左对齐，垂直居中
    pGridLay->addWidget(pRemeberCheckBox, 2, 2, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
    // 将自动登录复选框添加到网格布局的第2行，第2列，占1行1列，右对齐，垂直居中
    pGridLay->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
    // 将登录按钮添加到网格布局的第3行，第1列，占1行2列
    pGridLay->addWidget(pLoginButton, 3, 1, 1, 2);
    // 将注册账号按钮添加到网格布局的第4行，第1列，占1行2列
    pGridLay->addWidget(pRegisterButton, 4, 1, 1, 2);
}

// 析构函数
demo6_GridLayout::~demo6_GridLayout()
{}


#include "demo6_GridLayout.h"
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>
#include <QCheckBox>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QGridLayout>
#include <QDebug>

这些头文件包含了创建 UI 组件和布局管理器所需的类。

    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);

this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint)：设置窗口标志，使窗口无边框并包含最小化和最大化按钮。

QLabel* pImageLable1 = new QLabel(this);
QPixmap pixmap(":/demo6_GridLayout/resource/微信图片_20221014111549.jpg");
pImageLable1->setObjectName("pImageLable1");
pImageLable1->setFixedSize(150, 150);
pImageLable1->setPixmap(pixmap);
pImageLable1->setScaledContents(true);

QLabel* pImageLable1 = new QLabel(this)：创建一个标签，父组件为 this。

QPixmap pixmap(“:/demo6_GridLayout/resource/微信图片_20221014111549.jpg”)：加载图片资源。

pImageLable1->setObjectName(“pImageLable1”)：设置标签的对象名称。

pImageLable1->setFixedSize(150, 150)：设置标签的固定大小。

pImageLable1->setPixmap(pixmap)：将图片设置为标签的内容。

pImageLable1->setScaledContents(true)：使图片缩放以适应标签。

QLineEdit* pUserNameLineEdit = new QLineEdit(this);
pUserNameLineEdit->setFixedSize(300, 50);
pUserNameLineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱"));

QLineEdit* pUserNameLineEdit = new QLineEdit(this)：创建一个文本输入框，父组件为 this。

pUserNameLineEdit->setFixedSize(300, 50)：设置输入框的固定大小。

pUserNameLineEdit->setPlaceholderText(QStringLiteral(“QQ号码/手机/邮箱”))：设置占位符文本。

QLineEdit* pPassWordLineEdit = new QLineEdit(this);
pPassWordLineEdit->setFixedSize(300, 50);
pPassWordLineEdit->setPlaceholderText(QStringLiteral("密码"));
pPassWordLineEdit->setEchoMode(QLineEdit::Password);

pPassWordLineEdit->setEchoMode(QLineEdit::Password)：设置回显模式为密码模式，使输入的文本显示为掩码字符。

QPushButton* pForgotBotton = new QPushButton(this);
pForgotBotton->setText(QStringLiteral("找回密码"));
pForgotBotton->setFixedWidth(80);

pForgotBotton->setFixedWidth(80)：设置按钮的固定宽度。

QCheckBox* pRemeberCheckBox = new QCheckBox(this);
pRemeberCheckBox->setText(QStringLiteral("记住密码"));

QCheckBox* pAutoLoginCheckBox = new QCheckBox(this);
pAutoLoginCheckBox->setText(QStringLiteral("自动登录"));

QPushButton* pLoginButton = new QPushButton(this);
pLoginButton->setFixedHeight(48);
pLoginButton->setText(QStringLiteral("登录"));

QPushButton* pRegisterButton = new QPushButton(this);
pRegisterButton->setFixedHeight(48);
pRegisterButton->setText(QStringLiteral("注册账号"));

pLoginButton->setFixedHeight(48) 和 pRegisterButton->setFixedHeight(48)：设置按钮的固定高度。

栅格布局添加控件

QGridLayout* pGridLay = new QGridLayout(this);
pGridLay->addWidget(pImageLable1, 0, 0, 3, 1);
pGridLay->addWidget(pUserNameLineEdit, 0, 1, 1, 2);
pGridLay->addWidget(pPassWordLineEdit, 1, 1, 1, 2);
pGridLay->addWidget(pForgotBotton, 2, 1, 1, 1);
pGridLay->addWidget(pRemeberCheckBox, 2, 2, 1, 1, Qt::AlignLeft | Qt::AlignVCenter);
pGridLay->addWidget(pAutoLoginCheckBox, 2, 2, 1, 1, Qt::AlignRight | Qt::AlignVCenter);
pGridLay->addWidget(pLoginButton, 3, 1, 1, 2);
pGridLay->addWidget(pRegisterButton, 4, 1, 1, 2);

QGridLayout* pGridLay = new QGridLayout(this)：创建一个网格布局管理器，父组件为 this。

addWidget 方法用于将控件添加到布局中，参数分别为控件、行、列、占用的行数和列数。
在这里插入图片描述

对齐方式

在 Qt 框架中，控件的对齐方式可以通过 Qt::Alignment 标志进行控制。这些标志允许开发者精确地控制控件在布局中的位置和对齐方式。下面详细介绍 Qt::AlignLeft | Qt::AlignVCenter 和 Qt::AlignRight | Qt::AlignVCenter 的含义和用法。
Qt::AlignLeft | Qt::AlignVCenter

Qt::AlignLeft：这个标志用于将控件水平对齐到布局单元格的左侧。
Qt::AlignVCenter：这个标志用于将控件垂直居中对齐在布局单元格中。

组合使用 Qt::AlignLeft | Qt::AlignVCenter，可以使控件在布局单元格中左对齐并垂直居中。这种对齐方式非常适用于需要在容器左侧显示内容的场景，同时保持控件在垂直方向上居中。

添加资源

在这里插入图片描述

在这里插入图片描述

结尾

最后，感谢您阅读我的文章，希望这些内容能够对您有所启发和帮助。如果您有任何问题或想要分享您的观点，请随时在评论区留言。
同时，不要忘记订阅我的博客以获取更多有趣的内容。在未来的文章中，我将继续探讨这个话题的不同方面，为您呈现更多深度和见解。
谢谢您的支持，期待与您在下一篇文章中再次相遇！

妖精七七_
关注
  • 32
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Qt之格栅布局（QGridLayout）
weixin_34419321的博客
05-30 6827
简述 QGridLayout：格栅布局，也被称作网格布局（多行多列）。 栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。 栅格布局是这样工作的： 它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（colu...
Qt中的布局浅析与弹簧的使用，以及Qt居中的两种方法
qq_43341440的博客
06-14 7642
1. 布局 为什么要布局: 布局之后窗口的排列是有序的 布局之后窗口的大小发生变化, 控件的大小也会对应变化 如果不对控件布局, 窗口显示出来之后有些控件的看不到的 布局是可以嵌套使用 常用的布局方式: 水平布局 -> 所有的控件水平排列 -> 一行多列 垂直布局 -> 所有控件垂直排列 -> 多行一列 网格(栅格)布局 -> 多行多列 在Qt中设置布局的两种方式 使用Qt提供的布局 使用QWidget进行布局 -> 推荐 首先需要从工具栏中
【QT入门】 Qt代码创建布局之栅格布局详解
LF__plus的博客
03-26 2120
【QT入门】 Qt代码创建布局之栅格布局详解
Qt栅格布局的示例
weixin_51883798的博客
04-11 231
【代码】Qt栅格布局的示例。
【Qt】Qt之网格布局
C/C++软件工程师、嵌入式软件工程师、物联网研发工程师、C/C++讲师、物联网讲师、嵌入式讲师---欢迎大家一起交流(私信添加博主微信)
03-30 9777
00. 目录 文章目录00. 目录01. 概述02. 开发环境03. 常用函数详解04. Qt设计师使用网格布局05. 使用代码实现网格布局06. 附录 01. 概述 QGridLayout：格栅布局，也被称作网格布局（多行多列）。 栅格布局将位于其中的窗口部件放入一个网状的栅格之中。QGridLayout需要将提供给它的空间划分成的行和列，并把每个窗口部件插入并管理到正确的单元格。 栅格布局是这样工作的： 它计算了位于其中的空间，然后将它们合理的划分成若干个行（row）和列（column），并把每个由它管
vs中编写qt程序如何像qt create一样添加资源文件
08-23
在Visual Studio（VS）环境中编写Qt程序时，与Qt Creator相比，添加资源文件的过程略有不同。Qt Creator提供了直观的图形用户界面，使得添加资源文件变得简单。而在VS中，我们需要手动配置一些步骤来实现相同的功能...
Qt翻金币小游戏详细教程（内涵所有源码、图片资源）
05-29
在项目中，我们需要创建.qrc文件，将所有图片资源添加进去，然后通过QRcc类加载并使用这些资源。 8. **源码结构**：一个完整的Qt项目通常包含.pro文件（项目配置）、main.cpp（入口点）、头文件（类定义）和源代码...
Qt之一些界面ui自定义资源
12-08
在Qt框架中，UI（用户界面）的自定义资源是开发者常常需要掌握的重要技能，它能让应用程序具有独特的视觉效果和交互体验。Qt UI允许我们利用丰富的图形元素、颜色方案、字体以及图标等来定制界面，使得应用更加吸引...
Qt with VS2010_vsqt联合开发_QT_
09-29
7. **资源系统**：Qt的资源系统允许将图片、字体等资源文件打包到可执行文件中，便于分发和管理。了解如何使用qrc文件和资源编译器将资源集成到项目中。 8. **国际化与本地化**：Qt支持i18n（国际化）和l10n（本地...
【QT】08qt资源文件文章代码
03-23
在QT中，资源文件（QRC文件）扮演着重要角色，为应用程序提供了一种组织和管理静态资源如图片、字体、音频文件、XML文档等的方式。资源文件的使用可以避免硬编码文件路径，使得应用程序在不同操作系统和环境下更易...
QT 栅格布局(Grid Layout)，设置控件所占行数（rowSpan）和所占列数（columnSpan）
热门推荐
savagelin的专栏
04-21 1万+
QT的栅格布局(Grid Layout)划分了行和列，能够将控件放入一个网状的栅格之中显示，每个控件能够占一格或多行多列，例如： 但是如果先拖入一个Grid Layout，再添加控件是没办法设置控件所占行列的，要用其他的办法才可以。 控件占任意行列的布局方法： 方法一： 1.先将控件的位置摆好如图： 2.全选控件，点上方的栅格布局，控件的位置就自动设置好了。 3.要追加控件，先选中gridlayout，点击打破布局 再添加控件并摆放好位置，全选重新点栅格布局就行了 方法二： 代码的方式添加，有
Qt5之栅格布局
知其所以然
07-07 5138
1、创建栅格布局对象// 2018年6月24日 23:22:02 改为栅格布局 gridLayout = new QGridLayout;2、设置控件位置 // 菜单栏， 0行0列 占 1行 11列 gridLayout-&gt;addWidget(topMenuBar, 0, 0, 1, 10); // 工具栏按钮部分 for (int i = 0 ;...
Qt 之水平/垂直/网格布局（QHBoxLayout、QVBoxLayout、QGridLayout）
hml111666的博客
12-12 4281
一、水平/垂直/网格布局简介 水平布局：在水平方向上排列控件 垂直布局：在垂直方向上排列控件 网格布局：多行多列 二、水平/垂直/网格布局实现 1）水平布局【QHBoxLayout *layout = new QHBoxLayout;】 QWidget *window = new QWidget; QPushButton *button1=new QPushButton("OK"); QPushButton *button2=new QPushButton("cancel
QT:控件在垂直布局中居中
u013115811的博客
01-27 7971
qt 按钮链接一个槽函数
xie__jin__cheng的博客
07-08 189
按钮链接一个槽函数
qt creator中右边的的类和对象如何显示出来
最新发布
qq_41570500的博客
07-09 158
qt creator中右边的的类和对象如何显示出来
vs+Qt进行开发时添加资源文件出现无效的文件位置
03-27
如果在使用Qt进行开发时添加资源文件出现无效的文件位置，可以尝试以下几个步骤： 1. 确保添加的资源文件路径正确。可以尝试使用绝对路径来确保路径正确，或者使用Qt Creator自带的资源编辑器添加资源文件。 2. 在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

妖精七七_

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

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

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

打赏作者

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

抵扣说明：

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

余额充值