【QT入门】 Qt代码创建布局综合运用：仿写腾讯会议登陆界面

2024-04-06 19:44
文章标签 代码 综合 会议 入门 布局 qt 界面 创建 腾讯 登陆 运用 仿写

本文主要是介绍【QT入门】 Qt代码创建布局综合运用：仿写腾讯会议登陆界面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

往期回顾：

【QT入门】 Qt代码创建布局之水平布局、竖直布局详解-CSDN博客

【QT入门】 Qt代码创建布局之栅格布局详解-CSDN博客

【QT入门】 Qt代码创建布局之分裂器布局详解-CSDN博客

【QT入门】 Qt代码创建布局综合运用：仿写腾讯会议登陆界面

一、界面分析

 

主要用到水平布局和垂直布局，大部分的用法都还算清楚：

Label标签用来放文字和图片
如果要让某个控件居中实现，在其两边加横向弹簧Horizontal Spacer
Horizontal Line实现横线的效果
toolButton按钮可以实现上面图片下面文字的效果
Lable标签的alignment属性实现靠左靠右居中的效果

这个弹簧用处挺多的，不仅可以用在居中，比如我们想实现各个控件之间有一定距离，都可以用弹簧，直接设定其长度。

布局上，基本都是横向的先水平布局，最后再整个整体垂直布局即可。

二、qss样式美化

前面已经把大体框架搭起来了，现在就只需要导入资源图片，设置qss样式基本就好了。

1、实现无边框和窗口大小化

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

FramelessWindowHint 让窗口边框消失

WindowMinMaxButtonsHint实现点击最下面图标就最小化，再次点击就最大化

2、纯代码设置样式

先setText把控件内容置为空，再进行样式设置

ui.btnSet->setText("");ui.btnSet->setStyleSheet("QPushButton{background-image:url(:/TencentMeetingLogin/res/set.png); border:none}  \QPushButton::hover{ background-color:rgb(99,99,99) } ");

在qss样式里，如果代码写不下要跨行写，加了一个“\”；

几个需要掌握的方法：

background-imageurl()设置背景图片
border:none去掉按钮的边框
QPushButton::hover{ background-color:rgb(99,99,99) }：定义了鼠标悬停时按钮的样式
setStyleSheet是Qt中用于设置控件样式表的函数。通过setStyleSheet函数，可以使用类似CSS的语法为Qt控件设置样式，包括背景颜色、背景图片、边框样式、字体样式等。

3、label控件导入照片 

   ui.label_login->setText("");QPixmap* pix = new QPixmap(":/TencentMeetingLogin/res/logo.jpg");pix->scaled(ui.label_login->size(), Qt::KeepAspectRatio);ui.label_login->setScaledContents(true);ui.label_login->setPixmap(*pix);

这个可以说是很熟悉了，new一个QPixmap的指针，放图片路径，注意用scaled对图片大小和label控件大小进行自动缩放。不熟悉可以回顾一下：

【QT入门】实现一个简单的图片查看软件-CSDN博客 

【QT入门】图片查看软件(优化)-CSDN博客

4、按钮样式设计

按钮样式这一部分直接打开样式表来写，这部分慢慢熟悉

QPushButton
{
/*前景色*/
color:#0054E6;/*背景色*/
background-color:rgb(255,255,255);/*边框风格*/
border-style:outset;/*边框宽度*/
border-width:0.5px/*边框颜色*/
border-color:gray;/*边框倒角*/
border-radius:2px;}
/*鼠标悬浮时的效果*/
QPushButton:hover
{
/*边框颜色*/
border-color:blue;}

5、QToolButton 

这是一个才接触的按钮，相比QPushButton，它可以实现按钮+图片的模式，图片放在下面，这里正好需要。

ui.toolbtnEmpriseWeChat->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

设置按钮的样式为ToolButtonTextUnderIcon，即图标在文本下方的样式。

三、最终效果

 

可以看到经过qss样式优化之后，基本上是差不多了的。

四、完整示例代码

#include "TencentMeetingLogin.h"TencentMeetingLogin::TencentMeetingLogin(QWidget *parent): QDialog(parent)
{ui.setupUi(this);//让窗口边框消失FramelessWindowHint//实现点击最下面图标就最小化，再次点击就最大化WindowMinMaxButtonsHintthis->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);//如果显示不出来就右键单击项目，重新扫描解决方案ui.btnSet->setText("");//ui.btnSet->setStyleSheet("QPushButton{background-image:url(:/TencentMeetingLogin/res/set.png);border:none}  \//    QPushButton::hover{background-color:rgb(99,99,99)}");ui.btnSet->setText("");ui.btnSet->setStyleSheet("QPushButton{background-image:url(:/TencentMeetingLogin/res/set.png); border:none}  \QPushButton::hover{ background-color:rgb(99,99,99) } ");ui.btnMin->setText("");ui.btnMin->setStyleSheet("QPushButton{background-image:url(:/TencentMeetingLogin/res/min.png); border:none}  \QPushButton::hover{ background-color:rgb(99,99,99) } ");ui.btnClose->setText("");ui.btnClose->setStyleSheet("QPushButton{background-image:url(:/TencentMeetingLogin/res/close.png); border:none}  \QPushButton::hover{ background-color:rgb(99,99,99) } ");ui.label_login->setText("");QPixmap* pix = new QPixmap(":/TencentMeetingLogin/res/logo.jpg");pix->scaled(ui.label_login->size(), Qt::KeepAspectRatio);ui.label_login->setScaledContents(true);ui.label_login->setPixmap(*pix);ui.btnWeChatLogin->setText("");ui.btnWeChatLogin->setStyleSheet("QPushButton{background-image:url(:/TencentMeetingLogin/res/weichatlogin.png); border:none}  \QPushButton::hover{ background-color:rgb(99,99,99) } ");ui.toolbtnPhone->setIcon(QIcon(":/TencentMeetingLogin/res/phonelogin.png"));ui.toolbtnPhone->setIconSize(QSize(60, 60));ui.toolbtnPhone->setText(u8"手机号");//QToolButton* toolButton = new QToolButton;//toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolbtnPhone->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolbtnPhone->setStyleSheet("border:none");ui.toolbtnEmpriseWeChat->setIcon(QIcon(":/TencentMeetingLogin/res/enpriseweichat.png"));ui.toolbtnEmpriseWeChat->setIconSize(QSize(60, 60));ui.toolbtnEmpriseWeChat->setText(u8"企业微信");ui.toolbtnEmpriseWeChat->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolbtnEmpriseWeChat->setStyleSheet("border:none");ui.toolbtnSSO->setIcon(QIcon(":/TencentMeetingLogin/res/sso.png"));ui.toolbtnSSO->setIconSize(QSize(60, 60));ui.toolbtnSSO->setText(u8"SSO");//QToolButton* toolButton = new QToolButton;//toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolbtnSSO->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolbtnSSO->setStyleSheet("border:none");connect(ui.btnClose, &QPushButton::clicked, [=] {close();});}TencentMeetingLogin::~TencentMeetingLogin()
{}

都看到这里了，点个赞再走呗朋友~

加油吧，预祝大家变得更强！

这篇关于【QT入门】 Qt代码创建布局综合运用：仿写腾讯会议登陆界面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/880670。

相关文章

Python实现文件下载、Cookie以及重定向的方法代码

Python实现文件下载、Cookie以及重定向的方法代码

《Python实现文件下载、Cookie以及重定向的方法代码》本文主要介绍了如何使用Python的requests模块进行网络请求操作,涵盖了从文件下载、Cookie处理到重定向与历史请求等多个方面,... 目录前言一、下载网络文件（一）基本步骤（二）分段下载大文件（三）常见问题二、requests模块处理
阅读更多...
解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类，编译时
阅读更多...
vscode保存代码时自动eslint格式化图文教程

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》：本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件，将以下内
阅读更多...
MySQL分表自动化创建的实现方案

MySQL分表自动化创建的实现方案

《MySQL分表自动化创建的实现方案》在数据库应用场景中,随着数据量的不断增长,单表存储数据可能会面临性能瓶颈,例如查询、插入、更新等操作的效率会逐渐降低,分表是一种有效的优化策略,它将数据分散存储在... 目录一、项目目的二、实现过程（一）mysql 事件调度器结合存储过程方式1. 开启事件调度器2. 创
阅读更多...
SQL Server使用SELECT INTO实现表备份的代码示例

SQL Server使用SELECT INTO实现表备份的代码示例

《SQLServer使用SELECTINTO实现表备份的代码示例》在数据库管理过程中,有时我们需要对表进行备份,以防数据丢失或修改错误,在SQLServer中,可以使用SELECTINT... 在数据库管理过程中，有时我们需要对表进行备份，以防数据丢失或修改错误。在 SQL Server 中，可以使用 SE
阅读更多...
mysql外键创建不成功/失效如何处理

mysql外键创建不成功/失效如何处理

《mysql外键创建不成功/失效如何处理》文章介绍了在MySQL5.5.40版本中,创建带有外键约束的`stu`和`grade`表时遇到的问题,发现`grade`表的`id`字段没有随着`studen... 当前mysql版本：SELECT VERSION();结果为：5.5.40。在复习mysql外键约
阅读更多...
Window Server创建2台服务器的故障转移群集的图文教程

Window Server创建2台服务器的故障转移群集的图文教程

《WindowServer创建2台服务器的故障转移群集的图文教程》本文主要介绍了在WindowsServer系统上创建一个包含两台成员服务器的故障转移群集,文中通过图文示例介绍的非常详细,对大家的... 目录一、 准备条件二、在ServerB安装故障转移群集三、在ServerC安装故障转移群集，操作与Ser
阅读更多...
Window Server2016 AD域的创建的方法步骤

Window Server2016 AD域的创建的方法步骤

《WindowServer2016AD域的创建的方法步骤》本文主要介绍了WindowServer2016AD域的创建的方法步骤,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、准备条件二、在ServerA服务器中常见AD域管理器：三、创建AD域，域地址为“test.ly”
阅读更多...
python实现pdf转word和excel的示例代码

python实现pdf转word和excel的示例代码

《python实现pdf转word和excel的示例代码》本文主要介绍了python实现pdf转word和excel的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录一、引言二、python编程1，PDF转Word2，PDF转Excel三、前端页面效果展示总结一
阅读更多...
在MyBatis的XML映射文件中＜trim＞元素所有场景下的完整使用示例代码

在MyBatis的XML映射文件中＜trim＞元素所有场景下的完整使用示例代码

《在MyBatis的XML映射文件中＜trim＞元素所有场景下的完整使用示例代码》在MyBatis的XML映射文件中,trim元素用于动态添加SQL语句的一部分,处理前缀、后缀及多余的逗号或连接符,示... 在MyBATis的XML映射文件中，<trim>元素用于动态地添加SQL语句的一部分，例如SET或W
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2