【十一】【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失败

微信小程序 引入MiniProgram Design失败

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

EPUB和MOBI两种电子书格式简介

EPUB和MOBI是两种流行的电子书格式，它们各自有不同的来历、优势和特点。 EPUB的来历、优势和特点24578: 来历: EPUB于2007年9月成为国际数字出版论坛（IDPF）的正式标准，目的是取代旧的Open eBook电子书标准。优势: 可移植性: 可以…
阅读更多...
WP_Object_Cache如何使用？

WP_Object_Cache如何使用？

WP_Object_Cache是WordPress用于缓存数据的类。每次页面载入时，都能够重新生成这些缓存数据。在wp-includes/cache.php文件中定义WP_Object_Cache。 编写插件时不要在代码中直接使用WP_Object_Cache，应使用下面列出的wp_cache函数。 默认情况下&#x…
阅读更多...
如何优雅地处理IllegalAccessException异常？

如何优雅地处理IllegalAccessException异常？

如何优雅地处理IllegalAccessException异常？ 大家好，我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编，也是冬天不穿秋裤，天冷也要风度的程序猿！ 在Java编程中，IllegalAccessException异常…
阅读更多...
Android 界面库 (一) 之 View binding 简单使用

Android 界面库 (一) 之 View binding 简单使用

1. 简介 在过去Android开发中，一般会使用 findViewById() 方法来获取 XML 布局文件中的 View 对象，然后对该对象进行设置文本、设置是否可见、设置点击事件回调等的视图操作。但是这种对 View 的对象获取和操作的方式会可能存在一些问题，例如…
阅读更多...
大数据面试题之Zookeeper面试题

大数据面试题之Zookeeper面试题

目录 1、介绍下Zookeeper是什么? 2、Zookeeper有什么作用?优缺点?有什么应用场景? 3、Zookeeper的选举策略，leader和follower的区别? 4、介绍下Zookeeper选举算法 5、Zookeeper的节点类型有哪些?分别作用是什么? 6、Zookeeper的节点数怎么设置比较好? …
阅读更多...
CSS阴影优化气泡框样式

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编程之循环语句与函数

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

自学C语言-10

第10章 指针 指针是C语言的一个重要组成部分&#xff0c;是C语言的核心、精髓所在。用好指针&#xff0c;可以在C语言开发中起到事半功倍的效果。一方面&#xff0c;可以提高程序的编译效率、执行速度&#xff0c;以及动态存储分配&#xff1b;另一方面&#xff0c;可使程序更加…
阅读更多...
代码随想录算法训练营第四十八天 | 188.买卖股票的最佳时机IV、309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费、股票总结

代码随想录算法训练营第四十八天 | 188.买卖股票的最佳时机IV、309.最佳买卖股票时机含冷冻期、714.买卖股票的最佳时机含手续费、股票总结

188.买卖股票的最佳时机IV 题目链接&#xff1a;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iv/ 文档讲解&#xff1a;https://programmercarl.com/0188.%E4%B9%B0%E5%8D%96%E8%82%A1%E7%A5%A8%E7%9A%84%E6%9C%80%E4… 视频讲解&#xff1a;https://www.bi…
阅读更多...
playwright录制脚本原理

playwright录制脚本原理

Paywright录制工具UI 在上一篇博客中介绍了如何从0构建一款具备录制UI测试的小工具。此篇博客将从源码层面上梳理playwright录制原理。当打开playwright vscode插件时&#xff0c;点击录制按钮&#xff0c;会开启一个新浏览器&#xff0c;如下图所示&#xff0c;在新开浏览器页…
阅读更多...
python监听麦克风并调用阿里云的实时语音转文字

python监听麦克风并调用阿里云的实时语音转文字

import time import threading import queue import sounddevice as sd import numpy as np import nls import sys# 阿里云配置信息 URL "wss://nls-gateway-cn-shanghai.aliyuncs.com/ws/v1" TOKEN "016ca1620aff421da8fac81b9fb52dc5" # 参考https:/…
阅读更多...
Hive基础知识（十八）：Hive 函数的使用

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枚举数据类型“

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

目录 # 开篇 1. 创建包含枚举类型的表 2. 插入枚举类型的数据 3. 查询包含枚举类型的表 4. 更新枚举类型的数据 5. 使用枚举类型的好处 注意事项 示例总结 附加 # 开篇 在数据库中&#xff0c;枚举&#xff08;ENUM&#xff09;是一种数据类型&#xff0c;用于存储一组…
阅读更多...
即插即用篇 | 手把手教你 YOLOv10 添加注意力机制 | 20+ 种全打通！

即插即用篇 | 手把手教你 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系统

构建开源多模态RAG系统

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

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

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

Python函数魔术：深入理解18个高级函数特性

今天&#xff0c;我们将一起探索那些让代码瞬间变得优雅而强大的高级函数。准备好&#xff0c;让我们一起揭开它们的神秘面纱吧&#xff01; 1. map()&#xff1a;一招制胜&#xff0c;批量操作 想象一下&#xff0c;你需要给一个数字列表的每个元素加上5。普通的循环是不是让…
阅读更多...
【PyTorch单点知识】神经元网络模型剪枝prune模块介绍（下，结构化剪枝）

【PyTorch单点知识】神经元网络模型剪枝prune模块介绍（下，结构化剪枝）

文章目录 0. 前言1. torch.nn.utils.prune中的结构化剪枝方法2. PyTorch实例2.1 random_structured2.2 prune.ln_structured 3. 总结 0. 前言 按照国际惯例&#xff0c;首先声明&#xff1a;本文只是我自己学习的理解&#xff0c;虽然参考了他人的宝贵见解及成果&#xff0c;但…
阅读更多...
最新文章

Copyright @ 2022~2023