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

news2024/11/17 13:43:56

在这里插入图片描述

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 setStyleSheet

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


    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.coloradmin.cn/o/1859001.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

python自动化测试之DDT数据驱动的实现代码

python自动化测试之DDT数据驱动的实现代码

时隔已久，再次冒烟，自动化测试工作仍在继续，自动化测试中的数据驱动技术尤为重要，不然咋去实现数据分离呢，对吧，这里就简单介绍下与传统unittest自动化测试框架匹配的DDT数据驱动技术。 话不多说&#xff…
阅读更多...
神经网络的编程基础

神经网络的编程基础

神经网络的编程基础 二分类 二分类是机器学习中的一种基本分类问题，其中每个样本被划分为两个类别中的一个，即正类或负类。这种分类问题在现实生活中有广泛的应用，例如判定邮件是否为垃圾邮件、判别某个人是否患病等。二分类模型根据样本的特…
阅读更多...
Python高压电容导电体和水文椭圆微分

Python高压电容导电体和水文椭圆微分

🎯要点 🎯二维热传导二阶偏微分方程 | 🎯调和函数和几何图曲率 | 🎯解潮汐波动方程 | 🎯解静止基态旋转球体流体运动函数 | 🎯水文空间插值 | 🎯流体流动模拟求解器 | 🎯随机算法解…
阅读更多...
光伏半导体的种类

光伏半导体的种类

光照射半导体材料时，其电导率发生变化的实质是光生载流子的产生。在半导体中，价带中的电子受到一定能量的光子激发后，可以跃迁到导带，形成自由电子和空穴对，即光生载流子。这些光生载流子会增加半导体的导电能力&#…
阅读更多...
NepnepxCATCTF Pwn-Chao

NepnepxCATCTF Pwn-Chao

文章目录 参考类型混淆异常处理的栈回退机制虚表和类的恢复假想的程序结构逆向工程场景步骤解析 idabug检查找虚表strupsc_str()alloca异常逆向maindisplayupdatecreate 新东西exp和思路 参考 https://www.cnblogs.com/winmt/articles/17018284.html 类型混淆 关于C中由虚函…
阅读更多...
【乐吾乐2D可视化组态编辑器】图表动态显示

【乐吾乐2D可视化组态编辑器】图表动态显示

1. 添加数据 乐吾乐2D可视化组态编辑器地址：https://2d.le5le.com/ 图表动态展示是指一个图表图元的数据属性（一般是dataY）绑定多个变量，建立通信后数据动态变化展示。 官网默认Echarts图表拖拽到画布中是已经添加了图元的da…
阅读更多...
【SpringCloud-Seata源码分析3】

【SpringCloud-Seata源码分析3】

文章目录 事务的提交客户端提交流程服务端提交流程客户端删除undo_log 事务回滚客户端事务回滚服务端回滚事务 事务的提交 前面两篇我们分析了seata的TC初始化和TM,RM初始化，并且事务准备阶段源码及业务Sql执行，下面我们分析事务的提交源码。 客户端提…
阅读更多...
【面试题】等保（等级保护）的工作流程

【面试题】等保（等级保护）的工作流程

等保（等级保护）的工作流程主要包括以下几个步骤，以下将详细分点介绍： 系统定级： 确定定级对象：根据《信息系统等级保护管理办法》和《信息系统等级保护定级指南》的要求，确定需要进行等级保护的…
阅读更多...
Charles抓包工具系列文章（二）-- Repeat 回放http请求

Charles抓包工具系列文章（二）-- Repeat 回放http请求

一、什么是http请求回放 当我们对客户端进行抓包，经常会想要重试http请求，或者改写原有部分进行重新请求，都需要用到回放http请求。 还有一种场景是压力测试，对一个请求进行重复请求多少次，并加上适当的并发度。 这里…
阅读更多...
2024年6月22日，雨中骑行谷仓坝游后记。 （校长骑行撰稿）

2024年6月22日，雨中骑行谷仓坝游后记。 （校长骑行撰稿）

在这个快节奏的时代，生活中总是充满了无尽的压力和喧嚣。然而，骑行就像一股清流，给人们带来片刻的宁静和思考，是一种独特的释放方式。它不仅是一种锻炼，更是一种探索世界、理解生活的方式。这次，我们校长骑…
阅读更多...
[职场] 线上面试的准备工作 #知识分享#经验分享#媒体

[职场] 线上面试的准备工作 #知识分享#经验分享#媒体

线上面试的准备工作 面对求职中的面试，应届毕业生该做些什么准备呢？在这里，向各位分享面试前做好预案不慌张几点准备。现在许多面试是通过线上形式进行的。对于求职者来说，要做好两手准备。在这里，重点与大家分享线上面…
阅读更多...
pyhon模块以及常用的第三方模块

pyhon模块以及常用的第三方模块

import my_info as info print(info.name) info.show()from my_info import * print(name) show() pyhon中包的导入 import admin.my_admin as ad # 包名.模块名 admin是包名，my_admin是模块名print(ad.name) print(ad.info())from admin import my_admin as ad # …
阅读更多...
【可控图像生成系列论文（三）】北大 Context-Aware Unsupervised Text Stylization论文解读1

【可控图像生成系列论文（三）】北大 Context-Aware Unsupervised Text Stylization论文解读1

【可控图像生成系列论文（一）】 简要介绍了论文的整体流程和方法；【可控图像生成系列论文（二）】则将就整体方法、模型结构、训练数据和纹理迁移进行了更详细的介绍。 本篇将介绍来自 ACM MM 2018 的一篇字体风格化的可控…
阅读更多...
【43 Pandas+Pyecharts | 京东某商品销量数据分析可视化】

【43 Pandas+Pyecharts | 京东某商品销量数据分析可视化】

文章目录 🏳️‍🌈 1. 导入模块🏳️‍🌈 2. Pandas数据处理2.1 读取数据2.2 查看数据信息2.3 查看数据描述信息 🏳️‍🌈 3. Pyecharts数据可视化3.1 销量(瓶)地图分布3.2 每月销量(瓶)3.3 男性女性购买数量…
阅读更多...
《看不影子的少年》一部探讨偏见与接纳的电视剧❗

《看不影子的少年》一部探讨偏见与接纳的电视剧❗

《看不见影子的少年》这部电视剧以其独特的视角和深刻的主题 给我留下了深刻的印象。该剧讲述了一位与众不同的少年 他无法在阳光下留下影子，象征着他在社会中的孤独与不被理解 观看过程中，可以感受到少年内心的挣扎与渴望 他渴望被接纳，渴…
阅读更多...
【linux kernel】一文总结linux输入子系统

【linux kernel】一文总结linux输入子系统

文章目录 一、导读二、重要数据数据结构（2-1）struct input_dev（2-2）input_dev_list和input_handler_list（2-3）struct input_handler 三、input核心的初始化四、常用API五、输入设备驱动开发总结(1)查看输入…
阅读更多...
20240507-招商证券 基于鳄鱼线的指数择时及轮动策略

20240507-招商证券 基于鳄鱼线的指数择时及轮动策略

动量震荡指标构造 动量震荡指标为交易者提供了获利的钥匙。动量震荡指标测算了5根价格柱相对于34根价格柱的动量变化。首先计算最近5根价格柱的最高价和最低价间的中点的简单移动平均值，即(最高价最低价)12的简单移动平均，将得出的值减去最近34根价格柱的最高价和最低价中点的…
阅读更多...
Spring Cloud：构建分布式系统的利器

Spring Cloud：构建分布式系统的利器

引言 在当今的云计算和微服务架构时代，构建高效、可靠的分布式系统成为软件开发的重要任务。Spring Cloud 提供了一套完整的解决方案，帮助开发者快速构建分布式系统中的一些常见模式（例如配置管理、服务发现、断路器等）。本文将探…
阅读更多...
Listary——最好用的电脑搜索文件软件

Listary——最好用的电脑搜索文件软件

简易版： https://www.listary.com/download-completion?versionstable 完整功能版： Microsoft PowerToys | Microsoft Learn
阅读更多...
【PA交易】BackTrader(一): 如何使用实时tick数据和蜡烛图

【PA交易】BackTrader(一): 如何使用实时tick数据和蜡烛图

背景和需求 整合Tick数据是PA交易的回测与实盘基本需求。多数交易回测框架往往缺乏对大规模Tick数据直接而全面的支持。Tick数据因其体量庞大（例如，某棕榈油主力合约四年间的数据达8GB）为结合价格趋势与PA分析带来挑战，凸显了实时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023