【十一】【QT开发应用】模拟腾讯会议登录界面设计UI

在这里插入图片描述

ui

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

加入会议的样式表

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;  
}

在这里插入图片描述

demo3_Tencent_Meeting_Login.cpp

#include "demo3_Tencent_Meeting_Login.h"demo3_Tencent_Meeting_Login::demo3_Tencent_Meeting_Login(QWidget* parent): QWidget(parent) {ui.setupUi(this);this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);//btnSet//qt setStyleSheetui.btnSet->setText("");ui.btnSet->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/set.png);border:none;} \QPushButton::hover{background-color:rgb(199, 199, 199)}");  ui.btnMin->setText("");ui.btnMin->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/min.png);border:none;} \QPushButton::hover{background-color:rgb(199, 199, 199)}");ui.btnClose->setText("");ui.btnClose->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/close.png);border:none;} \QPushButton::hover{background-color:rgb(199, 199, 199)}");ui.label_logo->setText("");QPixmap* pix = new QPixmap(":/demo3_Tencent_Meeting_Login/resources/logo.jpg");pix->scaled(ui.label_logo->size(),Qt::KeepAspectRatio);ui.label_logo->setScaledContents(true);ui.label_logo->setPixmap(*pix);ui.btnWeichatlogin->setText("");ui.btnWeichatlogin->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/weichatlogin.png);border:none;}\QPushButton::hover{background-color:rgb(99, 99, 99)}"); ui.toolBtnPhone->setIcon(QIcon(":/demo3_Tencent_Meeting_Login/resources/phonelogin.png"));ui.toolBtnPhone->setIconSize(QSize(60, 60));ui.toolBtnPhone->setText(u8"phone");ui.toolBtnPhone->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolBtnPhone->setStyleSheet("background-color:white;boder:none");ui.toolBtnEnpriseWeichat->setIcon(QIcon(":/demo3_Tencent_Meeting_Login/resources/enpriseweichat.png"));ui.toolBtnEnpriseWeichat->setIconSize(QSize(60, 60));ui.toolBtnEnpriseWeichat->setText(u8"enpriseweichat");ui.toolBtnEnpriseWeichat->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolBtnEnpriseWeichat->setStyleSheet("background-color:white;boder:none");ui.toolBtnSSO->setIcon(QIcon(":/demo3_Tencent_Meeting_Login/resources/sso.png"));ui.toolBtnSSO->setIconSize(QSize(60, 60));ui.toolBtnSSO->setText(u8"SSO");ui.toolBtnSSO->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);ui.toolBtnSSO->setStyleSheet("background-color:white;boder:none");connect(ui.btnClose, &QPushButton::clicked, [=] {close();});
}demo3_Tencent_Meeting_Login::~demo3_Tencent_Meeting_Login()
{}

在这里插入图片描述

复盘

#include "demo3_Tencent_Meeting_Login.h"// 构造函数,初始化父类 QWidget
demo3_Tencent_Meeting_Login::demo3_Tencent_Meeting_Login(QWidget* parent): QWidget(parent) {ui.setupUi(this); // 设置 UI 界面// 设置窗口标志:无边框窗口,带最小化和最大化按钮this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint);// 设置按钮样式// 设置 btnSet 按钮的文本为空,并应用样式表ui.btnSet->setText(""); ui.btnSet->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/set.png);border:none;} \QPushButton::hover{background-color:rgb(199, 199, 199)}");  // 设置 btnMin 按钮的文本为空,并应用样式表ui.btnMin->setText("");ui.btnMin->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/min.png);border:none;} \QPushButton::hover{background-color:rgb(199, 199, 199)}");// 设置 btnClose 按钮的文本为空,并应用样式表ui.btnClose->setText("");ui.btnClose->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/close.png);border:none;} \QPushButton::hover{background-color:rgb(199, 199, 199)}");// 设置 logo 标签的文本为空,并加载图片ui.label_logo->setText("");QPixmap* pix = new QPixmap(":/demo3_Tencent_Meeting_Login/resources/logo.jpg");pix->scaled(ui.label_logo->size(),Qt::KeepAspectRatio); // 保持比例缩放图片ui.label_logo->setScaledContents(true); // 设置标签内容缩放ui.label_logo->setPixmap(*pix); // 设置标签的图片// 设置 btnWeichatlogin 按钮的文本为空,并应用样式表ui.btnWeichatlogin->setText("");ui.btnWeichatlogin->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/weichatlogin.png);border:none;}\QPushButton::hover{background-color:rgb(99, 99, 99)}"); // 设置 toolBtnPhone 工具按钮的图标及样式ui.toolBtnPhone->setIcon(QIcon(":/demo3_Tencent_Meeting_Login/resources/phonelogin.png"));ui.toolBtnPhone->setIconSize(QSize(60, 60)); // 设置图标大小ui.toolBtnPhone->setText(u8"phone"); // 设置按钮文本ui.toolBtnPhone->setToolButtonStyle(Qt::ToolButtonTextUnderIcon); // 设置图标在上,文本在下ui.toolBtnPhone->setStyleSheet("background-color:white;boder:none"); // 设置按钮样式// 设置 toolBtnEnpriseWeichat 工具按钮的图标及样式ui.toolBtnEnpriseWeichat->setIcon(QIcon(":/demo3_Tencent_Meeting_Login/resources/enpriseweichat.png"));ui.toolBtnEnpriseWeichat->setIconSize(QSize(60, 60)); // 设置图标大小ui.toolBtnEnpriseWeichat->setText(u8"enpriseweichat"); // 设置按钮文本ui.toolBtnEnpriseWeichat->setToolButtonStyle(Qt::ToolButtonTextUnderIcon); // 设置图标在上,文本在下ui.toolBtnEnpriseWeichat->setStyleSheet("background-color:white;boder:none"); // 设置按钮样式// 设置 toolBtnSSO 工具按钮的图标及样式ui.toolBtnSSO->setIcon(QIcon(":/demo3_Tencent_Meeting_Login/resources/sso.png"));ui.toolBtnSSO->setIconSize(QSize(60, 60)); // 设置图标大小ui.toolBtnSSO->setText(u8"SSO"); // 设置按钮文本ui.toolBtnSSO->setToolButtonStyle(Qt::ToolButtonTextUnderIcon); // 设置图标在上,文本在下ui.toolBtnSSO->setStyleSheet("background-color:white;boder:none"); // 设置按钮样式// 连接 btnClose 按钮的点击信号到关闭窗口的槽函数connect(ui.btnClose, &QPushButton::clicked, [=] {close(); // 关闭窗口});
}// 析构函数
demo3_Tencent_Meeting_Login::~demo3_Tencent_Meeting_Login()
{}

窗口标志

this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint); 是在 Qt 中用于设置窗口标志 (Window Flags) 的方法。

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

setWindowFlags 方法

setWindowFlags 是 QWidget 类的一个方法,用于设置窗口的标志 (window flags)。
这些标志可以用来改变窗口的外观和行为。

Qt::FramelessWindowHint 和 Qt::WindowMinMaxButtonsHint 是 Qt 中的两个枚举值,分别用于设置无边框窗口和带最小化和最大化按钮的窗口。

枚举值

Qt::FramelessWindowHint
此标志表示窗口没有边框和标题栏。窗口将不会有默认的装饰(如关闭、最小化、最大化按钮以及标题栏)。
适用于自定义窗口外观,例如有特殊设计要求的登录界面或全屏应用。
Qt::WindowMinMaxButtonsHint
此标志表示窗口带有最小化和最大化按钮。
尽管窗口是无边框的,这个标志仍允许窗口有最小化和最大化功能。
这在某些自定义窗口设计中很有用,允许用户最小化和最大化窗口,而不需要传统的标题栏。

组合使用

Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint
通过按位或操作符 | 将两个标志组合在一起,使窗口既没有边框又有最小化和最大化按钮。
这种组合通常用于需要自定义窗口外观,但仍希望保留一些标准窗口功能的情况。

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

上面的代码行在 demo3_Tencent_Meeting_Login 类的构造函数中,用于设置窗口标志,使窗口无边框并带有最小化和最大化按钮。

样式表

ui.btnSet->setStyleSheet(...) 是在 Qt 中用于设置控件的样式表的方法。

ui.btnSet->setStyleSheet("QPushButton{background-image:url(:/demo3_Tencent_Meeting_Login/resources/set.png);border:none;} \QPushButton::hover{background-color:rgb(199, 199, 199)}");

setStyleSheet 方法

setStyleSheet 是 QWidget 类的一个方法,用于设置控件的样式表。
样式表是一种使用类 CSS 语法定义控件外观的方法,可以方便地改变控件的外观。

样式表字符串中包含两个部分,分别设置按钮的默认样式和悬停(hover)样式。

QPushButton {background-image: url(:/demo3_Tencent_Meeting_Login/resources/set.png);border: none;
}

QPushButton 选择器用于定义按钮的默认样式。

background-image: url(:/demo3_Tencent_Meeting_Login/resources/set.png);
设置按钮的背景图片,图片路径使用资源文件路径。

:/ 表示资源文件路径,demo3_Tencent_Meeting_Login/resources/set.png 是图片的相对路径。

border: none;去除按钮的边框,使按钮看起来更简洁。

悬停样式

QPushButton::hover {background-color: rgb(199, 199, 199);
}

QPushButton::hover 伪状态选择器用于定义按钮在鼠标悬停时的样式。
background-color: rgb(199, 199, 199);
设置按钮在鼠标悬停时的背景颜色为灰色 (RGB 值为 199, 199, 199)。

btnSet 按钮在默认状态下显示 set.png 图片,并且没有边框。
当鼠标悬停在按钮上时,按钮背景颜色变为灰色 (RGB 值为 199, 199, 199)。

lable

设置 label_logo 标签的文本为空,并加载图片

清空标签文本

ui.label_logo->setText("");

这行代码将 label_logo 标签的文本设置为空字符串。
这通常用于确保标签不显示任何文本,仅用于显示图片。

创建并加载图片

QPixmap* pix = new QPixmap(":/demo3_Tencent_Meeting_Login/resources/logo.jpg");

QPixmap 是 Qt 中用于处理图像的类。
通过构造函数,QPixmap 加载了位于资源文件路径 :/demo3_Tencent_Meeting_Login/resources/logo.jpg 的图片。
:/ 表示资源文件路径,demo3_Tencent_Meeting_Login/resources/logo.jpg 是图片在资源文件中的相对路径。

保持比例缩放图片

pix->scaled(ui.label_logo->size(), Qt::KeepAspectRatio);

scaled 方法用于调整图片的大小。
ui.label_logo->size() 获取标签的当前大小,用于将图片缩放到合适的尺寸。
Qt::KeepAspectRatio 保持图片的宽高比,这样在缩放过程中不会变形。

设置标签内容缩放

ui.label_logo->setScaledContents(true);

setScaledContents(true) 方法允许标签内容(即图片)根据标签的大小进行缩放。
这确保了图片可以适应标签的尺寸变化,避免显示不完整或变形。

设置标签的图片

ui.label_logo->setPixmap(*pix);

setPixmap 方法将 QPixmap 对象 pix 中的图片设置为 label_logo 标签的内容。
*pix 是对 QPixmap 对象的解引用,传递实际的图片数据。

toolButton

设置 toolBtnSSO 工具按钮的图标及样式

设置工具按钮的图标

ui.toolBtnSSO->setIcon(QIcon(":/demo3_Tencent_Meeting_Login/resources/sso.png"));

setIcon 方法用于设置工具按钮的图标。
QIcon 对象通过资源路径 :/demo3_Tencent_Meeting_Login/resources/sso.png 加载图标。
通过这种方式,可以为按钮设置一个图片作为图标。

设置图标大小

ui.toolBtnSSO->setIconSize(QSize(60, 60));

setIconSize 方法用于设置图标的大小。
QSize(60, 60) 创建了一个宽高均为 60 像素的大小对象。
这确保图标显示为指定的尺寸,无论按钮的大小如何。

设置按钮文本

ui.toolBtnSSO->setText(u8"SSO");

setText 方法用于设置按钮的文本。
u8"SSO" 设置按钮的文本为 “SSO”。u8 前缀确保字符串是 UTF-8 编码,适用于多语言支持。

设置图标和文本的布局

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

setToolButtonStyle 方法用于设置按钮的样式布局。
Qt::ToolButtonTextUnderIcon 将按钮的文本放置在图标下方。
这种布局方式适用于工具按钮,使图标和文本清晰分开,易于识别。

设置按钮的样式

ui.toolBtnSSO->setStyleSheet("background-color:white;boder:none");

setStyleSheet 方法用于设置按钮的样式表。
background-color:white; 将按钮的背景颜色设置为白色。
border:none; 移除按钮的边框(注意这里有个拼写错误,应该是 border:none; 而不是 boder:none)。

结尾

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/859941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

日常-----最爱的人

今日话题 大家好嗷,今天聊的技术可比之前的重要的多啊,哼哼,也不是今天,大家像我看齐嗷,我宣布个事情!!! 于2024年6月21日晚上,本人遇到了这一生最爱的人 嘿嘿 这种事…

微信小程序 引入MiniProgram Design失败

这tm MiniProgramDesign 是我用过最垃圾的框架没有之一 我按照官网的指示安装居然能安装不成功,牛! 这里说明我是用js开发的 到以上步骤没有报错什么都没有,然后在引入组件的时候报错 Component is not found in path “./miniprogram _npm/vant/weapp/button/index” (using…

CSS阴影优化气泡框样式

<body> <div class"pop">气泡框</div> </body>body{display: flex;justify-content: center;align-items: center;height: 100% } .pop{display: flex;justify-content: center;align-items: center;background: #409eff;width: 150px;heigh…

03-Shell编程之循环语句与函数

目录 3.1 for循环语句 3.1.1for语句的结构 3.1.2 for语句应用实例 3.2 使用whlie循环语句 1.打印数字1到5 3.3 使用until循环语句 3.3.1until的实例 1.打印数字1到5&#xff08;使用until的逆向逻辑&#xff09; 2.等待用户输入特定内容 3.4 函数 3.4.1Shell函数的基…

自学C语言-10

第10章 指针 指针是C语言的一个重要组成部分&#xff0c;是C语言的核心、精髓所在。用好指针&#xff0c;可以在C语言开发中起到事半功倍的效果。一方面&#xff0c;可以提高程序的编译效率、执行速度&#xff0c;以及动态存储分配&#xff1b;另一方面&#xff0c;可使程序更加…

playwright录制脚本原理

Paywright录制工具UI 在上一篇博客中介绍了如何从0构建一款具备录制UI测试的小工具。此篇博客将从源码层面上梳理playwright录制原理。当打开playwright vscode插件时&#xff0c;点击录制按钮&#xff0c;会开启一个新浏览器&#xff0c;如下图所示&#xff0c;在新开浏览器页…

Hive基础知识(十八):Hive 函数的使用

1. 系统内置函数 1&#xff09;查看系统自带的函数 hive (hive3)> show functions; Time taken: 0.085 seconds, Fetched: 289 row(s) 2&#xff09;显示自带的函数的用法 hive (hive3)> desc function upper; OK tab_name upper(str)- Returns str with all characters…

“了解MySQL中的enum枚举数据类型“

目录 # 开篇 1. 创建包含枚举类型的表 2. 插入枚举类型的数据 3. 查询包含枚举类型的表 4. 更新枚举类型的数据 5. 使用枚举类型的好处 注意事项 示例总结 附加 # 开篇 在数据库中&#xff0c;枚举&#xff08;ENUM&#xff09;是一种数据类型&#xff0c;用于存储一组…

即插即用篇 | 手把手教你 YOLOv10 添加注意力机制 | 20+ 种全打通!

YOLOv10 添加注意力机制 ! 视频教程地址-哔哩哔哩 文章目录 YOLOv10 添加注意力机制 !注意力机制介绍注意力机制的分类1. SE 注意力模块1.1 原理1.2 代码2. CBAM 注意力模块2.1 原理2.2 代码3. ECA 注意力模块3.1 原理3.2 代码4. CA 注意力模块4.1 原理4.2 代码5. 添加方式�…

构建开源多模态RAG系统

在这个新的冒险中&#xff0c;我们将深入研究使用开源大型语言多模态&#xff08;LLMM&#xff09;构建检索增强型生成&#xff08;RAG&#xff09;系统的过程。值得注意的是&#xff0c;我们的重点是在不依赖LangChain或Llama索引的情况下实现这一点&#xff1b;相反&#xff…

LabVIEW在机器人研究所中的应用

机器人研究所致力于机器人技术的研究与开发&#xff0c;涵盖工业机器人、服务机器人、医疗机器人等多个领域。研究所需要一个高效、灵活的实验控制和数据采集系统&#xff0c;以进行复杂的机器人实验&#xff0c;并对实验数据进行实时处理和分析。 项目需求 实时控制与监控&am…

NC--介绍-未加密加密后-流量抓包对比

免责声明:本节仅做技术交流与学习... 目录 介绍: 用法: 未加密--流量抓包 加密: 攻击端 靶机 抓包分析: 介绍: nc 是一个Linux环境下常用的工具命令&#xff0c;可以用来帮助开发者查询和解决网路问题&#xff0c;通常被认为是 NetCat 工具的缩写&#xff0c;在网络工具…

Hi3861 OpenHarmony嵌入式应用入门--轮询按键

本篇介绍使用轮询方式读取gpio状态来判断按键状态。 原理图如下 GPIO API API名称 说明 hi_u32 hi_gpio_init(hi_void); GPIO模块初始化 hi_u32 hi_io_set_pull(hi_io_name id, hi_io_pull val); 设置某个IO上下拉功能。 hi_u32 hi_gpio_set_dir(hi_gpio_idx id, hi_gpi…

MySQL理解-下载-安装

MySQL理解: mysql:是一种关系型数据库管理系统。 下载&#xff1a; 进入官网MySQLhttps://www.mysql.com/ 找到download 滑动到最下方&#xff1a;有一个开源社区版的链接地址&#xff1a; 然后就下载完成了 安装&#xff1a; 双击&#xff1a; 一直next 一直next这一步&…

仓颉编程语言入门

华为在 2024 年 6 月 21 日的华为开发者大会上&#xff0c;华为终端 BG 软件部总裁龚体正式官宣了华为自研仓颉编程语言&#xff0c;并发布了 HarmonyOS NEXT 仓颉语言开发者预览版。 仓颉编程语言文件后缀名为 .cj, 以下是第一个入门代码输出&#xff1a;你好&#xff0c;仓颉…

ESP32-S3方案应用设备无线交互技术,产品远程控制与语音交互

在物联网和人工智能(AI)技术融合的浪潮中&#xff0c;ESP32-S3芯片以其卓越的性能和多功能性&#xff0c;成为智能家居和工业自动化领域的明星产品。 ESP32-S3是一款基于Xtensa LX6处理器的嵌入式系统级芯片&#xff0c;具有高效、低功耗的特点。集成的Wi-Fi和蓝牙功能&#x…

三大交易所全面恢复 IPO 申请

6月21日晚间&#xff0c;北交所受理了3家企业的IPO申请&#xff0c;这是北交所时隔3个月之后恢复IPO受理。6月20日晚间&#xff0c;沪深交易所各受理了1家IPO申请&#xff0c;这是沪深交易所时隔半年后再次受理IPO。这也意味着&#xff0c;三大交易所IPO受理全部恢复。 6月21日…

致敬企业家精神:比亚迪仰望发布“旷野宣言”

近年来&#xff0c;随着汽车在中国的普及&#xff0c;钟爱越野和探险的车主群体也在飞速发展壮大。 那么问题就来了&#xff1a;为什么会有这么多的人们钟爱越野和探险&#xff1f;越野精神究竟是什么&#xff1f; 作为备受关注的硬派越野车&#xff0c;比亚迪旗下的高端品牌仰…

编程精粹—— Microsoft 编写优质无错 C 程序秘诀 08:剩下的就是态度问题

这是一本老书&#xff0c;作者 Steve Maguire 在微软工作期间写了这本书&#xff0c;英文版于 1993 年发布。2013 年推出了 20 周年纪念第二版。我们看到的标题是中译版名字&#xff0c;英文版的名字是《Writing Clean Code ─── Microsoft’s Techniques for Developing》&a…

C++基础编程100题-013 OpenJudge-1.3-11 计算浮点数相除的余数

更多资源请关注纽扣编程微信公众号 http://noi.openjudge.cn/ch0103/11/ 描述 计算两个双精度浮点数a和b的相除的余数&#xff0c;a和b都是正数的。这里余数&#xff08;r&#xff09;的定义是&#xff1a;a k * b r&#xff0c;其中 k是整数&#xff0c; 0 < r < b。…