【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。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动，这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升：减少抖动，提高图像的清晰度和细节表现力，使得监控画面更加真实可信。 - 细节增强：在低光条件下，抖
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...
活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...
poj 1258 Agri-Net（最小生成树模板代码）

poj 1258 Agri-Net（最小生成树模板代码）

感觉用这题来当模板更适合。 题意就是给你邻接矩阵求最小生成树啦。~ prim代码：效率很高。172k...0ms。 #include<stdio.h>#include<algorithm>using namespace std;const int MaxN = 101;const int INF = 0x3f3f3f3f;int g[MaxN][MaxN];int n
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...
数论入门整理（updating）

数论入门整理（updating）

一、gcd lcm 基础中的基础，一般用来处理计算第一步什么的，分数化简之类。 LL gcd(LL a, LL b) { return b ? gcd(b, a % b) : a; } <pre name="code" class="cpp">LL lcm(LL a, LL b){LL c = gcd(a, b);return a / c * b;} 例题：
阅读更多...
Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

Java 创建图形用户界面（GUI）入门指南（Swing库 JFrame 类）概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包，是 JAVA 基础类的一部分，基于 Java AWT 构建，提供了一系列轻量级、可定制的图形用户界面（GUI）组件。 与 AWT 相比，Swing 提供了许多比 AWT 更好的屏幕显示元素，更加灵活和可定制，具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2