【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
    //实现点击最下面图标就最小化,再次点击就最大化WindowMinMaxButtonsHint
    this->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()
{}

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

加油吧,预祝大家变得更强!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

YOLO V8-Detection 【单张图片】 推理详解及部署实现

前言 在实际处理过程中,我们使用YOLO V8进行推理时,通常会针对一张图片进行推理。如果需要对多张图片进行推理,则可以通过一个循环来实现对图片逐张进行推理。 单张图片推理时,需要注意图片的尺寸必须是32的倍数,否则…

【氮化镓】缓冲层结构对GaN HEMT射频性能的影响

【Effect of different layer structures on the RF performance of GaN HEMT devices】 研究总结: 本研究探讨了不同缓冲层结构对氮化镓高电子迁移率晶体管(GaN HEMT)射频性能的影响。通过对比三种不同缓冲层结构的GaN HEMT设备&#xff0…

海外问卷调查项目拆解(操作全流程演示)保姆级攻略具体操作

海外问卷调查是怎么做的?好做吗? 关于这个问题,不管我说好做、或者不好做,都并不能解决问题; 所以,这篇文章直接把做题的全过程展现给你看,你自己去真实地感受一下,这个玩意儿到底…

【电商API数据采集接口接入】如何搭建电商数据指标体系?

01 什么是好的数据指标? 电商商品数据采集API接口接入 01 前言 做数据分析的工作已经将近6年了,形形色色的业务方也合作了不少。大部分业务方都给我一个感觉就是我什么数据指标都要看,越多越多好,即使看了这些指标之后什么事…

智慧开发平台免!费!申请试用

原创 F学社 F学社 2024-04-01 17:13 江苏 扫描二维码即可申请试用 01 智慧开发平台简介 F1 WIFI智慧教育平台是可支持线上线下联动的基于FPGA的口袋式数字系统学习平台。其采用了AMD、Altera、安路、高云等国外国内主流公司的FPGA进行数字系统方向的教学实验设计&#xff0c…

【力扣刷题日记】1421.净现值查询

前言 练习sql语句,所有题目来自于力扣(https://leetcode.cn/problemset/database/)的免费数据库练习题。 今日题目: 1421.净现值查询 表:NPV 列名类型idintyearintnpvint (id, year) 是该表主键(具有唯一值的列的…

策略模式图

策略模式 小小的图解 主要的三个角色 Strategy—抽象策略角色ConcreateStrategy—具体策略角色Context—上下文角色 封装了对具体策略的调用可以使用set的依赖注入也可以使用构造方法 核心是上下文角色 只要调用上下文角色就行,实现解耦 策略 工厂 将上下文角…

【滑动窗口】Leetcode 最小覆盖子串

题目解析 76. 最小覆盖子串 本题将意思转换一下:寻找最小可重复字符的字串 算法讲解 使用滑动窗口哈希表,进行入窗口->判断哈希表中的元素是否符合最小可重复子串的条件->出窗口 class Solution { public://检查两个hash表中的字符bool check…

【快捷部署】011_PostgreSQL(16)

📣【快捷部署系列】011期信息 编号选型版本操作系统部署形式部署模式复检时间011PostgreSQL16Ubuntu 20.04Docker单机2024-03-28 一、快捷部署 #!/bin/bash ################################################################################# # 作者&#xff1…

leetcode代码记录(买卖股票的最佳时机

目录 1. 题目:2. 我的代码:小结: 1. 题目: 给定一个数组 prices ,它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一天 买入这只股票,并选择在 未来的某一个不同的日子 卖出该股…

动物造句子

动物造句子 附小看重家校互动,有时候会邀请各行各业的家长到班里讲课。德德上小学二年级时,有一次,班主任提出邀请我去讲课。 我那时候只给研究生讲一门课《信息论》,这是一门对于研究生来说都比较抽象的课。我怎么把信息论的内…

让ECC升级S/4HANA一步到位的“全面升级方案包”

SAP最新一代商务套件S/4HANA比ECC系统拥有更高性能的存储数据库HANA、更个性化的Fiori用户界面设计系统,能够大大提升系统效率,带来便捷、高效、良好的用户体验。但企业原先使用的ECC系统里面保存了积累多年的关键流程和数据,让企业面对系统升…

力扣爆刷第111天之CodeTop100五连刷41-45

力扣爆刷第111天之CodeTop100五连刷41-45 文章目录 力扣爆刷第111天之CodeTop100五连刷41-45一、232. 用栈实现队列二、4. 寻找两个正序数组的中位数三、31. 下一个排列四、69. x 的平方根五、8. 字符串转换整数 (atoi) 一、232. 用栈实现队列 题目链接:https://le…

Android 代码自定义drawble文件实现View圆角背景

简介 相信大多数Android开发都会遇到一个场景,给TextView或Button添加背景颜色,修改圆角,描边等需求。一看到这样的实现效果,自然就是创建drawble文件,设置相关属性shap,color,radius等。然后将…

观察者模式 C++

👂 Honey Honey - 孙燕姿 - 单曲 - 网易云音乐 目录 🌼前言 🌼描述 🎂问题 💪解决方案 🈲现实场景 代码 场景1 -- 报纸发行 场景 解释 代码 场景2 -- 气象资料发布 场景3 -- 过红绿灯 &#x…

渗透测试:数据库UDF提权(linux)

目录 开头: 1.UDF提权简介: 1.1共享库文件(UDF文件)指定目录: 版本特征: 操作系统版本: 2.靶场UDF提权复现 提权前提 1.要有一个高权限的MySQL的账号 ​编辑 2.MySQL的权限配置secure_file_priv为空 3.必须有存放UDF文件的…

nginx详细配置,高可用

Nginx是一款高性能的Web服务器和反向代理服务器,通常用来进行负载均衡,提供高可用的服务。而Keepalived是一款开源的高可用性解决方案,可以提高系统的可靠性和稳定性。使用Nginx和Keepalived来配置高可用服务的具体步骤如下:1. 安…

题库管理系统-基于Springboot实现JAVA+SQL离散数学题库管理系统(完整源码+LW+翻译)

基于Springboot实现JAVASQL离散数学题库管理系统(完整源码LW翻译) 概述: 本系统具体完成的功能如下: 1题库的管理与维护:新题的录入,修改,删除等功能。 2生成试卷:包括自动生成与手工改动,要…

vue创建项目下载动态路由v-for mounted websocket :style :class store使用说明

在Vue中创建一个项目,并整合动态路由、v-for、mounted生命周期钩子、WebSocket、:style、:class以及Vuex的store,涉及到多个Vue核心特性的使用。下面我将简要说明如何逐步整合这些特性。 1. 创建Vue项目 使用Vue CLI创建项目: 2. 配置动态路…

react状态管理库---zustand

一个简单的,快速的状态管理解决方案,api设计基于函数式和hooks 安装: npm install zustand 基础使用 让我们实现一个非常简单的计数器案例完成我们的第一个store 1- 创建一个counterStore create( ) 有三个参数:函数、布尔值…