往期回顾:
【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()
{}
都看到这里了,点个赞再走呗朋友~
加油吧,预祝大家变得更强!