Qt小程序之QQ登录窗口输入框控件
2023-09-14 09:07:01 时间
效果图
二、代码之路
整体思路即根据focusInEvent和focusOutEvent事件判断焦点是否在输入框中,同时重写setPlaceholderText方法,把最开始设置的占位字符保存下来,然后焦点进入的时候如果输入框中没有字符 就把占位字符清空,如果本身就有内容字符,占位字符是不显示的。
然后在焦点离开输入框时,判断当前输入框是否有内容字符,如果没有则恢复之前保存的占位字符。
// 鼠标是否点击进行编辑;
void signalIsMouseIn(bool isFocusIn);
MyLineEdit
class MyLineEdit : public QLineEdit
{
Q_OBJECT
public:
MyLineEdit(QWidget* parent = NULL)
: QLineEdit(parent)
{
}
void setPlaceholderText(const QString &text)
{
m_placeHolderText = text;
__super::setPlaceholderText(text);
}
private:
void focusInEvent(QFocusEvent *event)
{
if (this->text().isEmpty())
{
__super::setPlaceholderText("");
}
emit signalIsMouseIn(true);
return __super::focusInEvent(event);
}
void focusOutEvent(QFocusEvent *event)
{
if (this->text().isEmpty())
{
this->setPlaceholderText(m_placeHolderText);
}
emit signalIsMouseIn(false);
return __super::focusOutEvent(event);
}
signals:
// 鼠标是否点击进行编辑;
void signalIsMouseIn(bool isFocusIn);
private:
QString m_placeHolderText;
};
注:
因为QLineEdit不提供焦点进出的信号,所有这里添加了一个信号,在focusInEvent和focusOutEvent事件中进行触发,
这里为什么要添加这个信号呢?因为QQ的输入框前面的图标在有焦点的时候会变成蓝色,没有焦点的时候会变成灰色,所以这里需要这个信号来通知进行变换图标。可以见下方代码中此信号的用处。
QQLineEditWidget.h
class QQLineEditWidget : public QWidget
{
Q_OBJECT
public:
QQLineEditWidget(QWidget *parent = Q_NULLPTR);
private:
void initWidget();
private:
void paintEvent(QPaintEvent *event);
};
QQLineEditWidget.cpp
#include "QQLineEdit.h"
#include <QHBoxLayout>
#include <QPainter>
#include <QGraphicsDropShadowEffect>
#pragma execution_character_set("utf-8")
QQLineEditWidget::QQLineEditWidget(QWidget *parent)
: QWidget(parent)
{
initWidget();
this->setFixedSize(QSize(430, 330));
this->setAttribute(Qt::WA_TranslucentBackground);
this->setWindowFlag(Qt::FramelessWindowHint);
// 设置阴影边框;
auto shadowEffect = new QGraphicsDropShadowEffect(this);
shadowEffect->setOffset(0, 0);
shadowEffect->setColor(Qt::black);
shadowEffect->setBlurRadius(10);
this->setGraphicsEffect(shadowEffect);
}
void QQLineEditWidget::initWidget()
{
// 设置两个输入框前后的图标及按钮;
QLabel* m_labelQQ = new QLabel;
m_labelQQ->setFixedSize(QSize(14, 20));
m_labelQQ->setPixmap(QIcon(":/Resources/LoginWindow/QQ_Focus.png").pixmap(m_labelQQ->size()));
QLabel* m_labelLocker = new QLabel;
m_labelLocker->setFixedSize(QSize(12, 14));
m_labelLocker->setPixmap(QIcon(":/Resources/LoginWindow/Locker_Normal.png").pixmap(m_labelLocker->size()));
QPushButton* m_pButtonPullDown = new QPushButton;
m_pButtonPullDown->setCursor(Qt::ArrowCursor);
m_pButtonPullDown->setFixedSize(QSize(16, 16));
m_pButtonPullDown->setStyleSheet("QPushButton{border-image:url(:/Resources/LoginWindow/PullDownButton_Normal.png);}\
QPushButton:hover{border-image:url(:/Resources/LoginWindow/PullDownButton_Hover.png);}");
QPushButton* m_pButtonKeyborad = new QPushButton;
m_pButtonKeyborad->setCursor(Qt::PointingHandCursor);
m_pButtonKeyborad->setFixedSize(QSize(16, 16));
m_pButtonKeyborad->setStyleSheet("QPushButton{border-image:url(:/Resources/LoginWindow/keyboard.png) 0 80 0 0;}\
QPushButton:hover{border-image:url(:/Resources/LoginWindow/keyboard.png) 0 40 0 40;}\
QPushButton:pressed{border-image:url(:/Resources/LoginWindow/keyboard.png) 0 0 0 80;}");
MyLineEdit* lineEditAccount = new MyLineEdit;
lineEditAccount->setPlaceholderText("QQ号码/手机/邮箱");
lineEditAccount->setTextMargins(20, 0, 20, 0);
lineEditAccount->setFixedSize(QSize(235, 28));
// 这里通过signalIsMouseIn信号进行图标切换;
connect(lineEditAccount, &MyLineEdit::signalIsMouseIn, this, [=](bool isMouseIn) {
if (isMouseIn)
{
m_labelQQ->setPixmap(QIcon(":/Resources/LoginWindow/QQ_Focus.png").pixmap(m_labelQQ->size()));
}
else
{
m_labelQQ->setPixmap(QIcon(":/Resources/LoginWindow/QQ_Normal.png").pixmap(m_labelQQ->size()));
}
});
QHBoxLayout* hAccountLayout = new QHBoxLayout(lineEditAccount);
hAccountLayout->addWidget(m_labelQQ);
hAccountLayout->addStretch();
hAccountLayout->addWidget(m_pButtonPullDown);
hAccountLayout->setMargin(0);
MyLineEdit* lineEditPassed = new MyLineEdit;
// 测试setPlaceholderText在是否有焦点的时候显示占位字符;
// lineEditPassed->setAlignment(Qt::AlignCenter);
lineEditPassed->setPlaceholderText("密码");
lineEditPassed->setTextMargins(20, 0, 20, 0);
lineEditPassed->setFixedSize(QSize(235, 28));
connect(lineEditPassed, &MyLineEdit::signalIsMouseIn, this, [=](bool isMouseIn) {
if (isMouseIn)
{
m_labelLocker->setPixmap(QIcon(":/Resources/LoginWindow/Locker_Focus.png").pixmap(m_labelLocker->size()));
}
else
{
m_labelLocker->setPixmap(QIcon(":/Resources/LoginWindow/Locker_Normal.png").pixmap(m_labelLocker->size()));
}
});
this->setStyleSheet("*{font-family:Microsoft YaHei;font-size:12px;}\
QLineEdit{font-size:13px;background:transparent;border:none;border-bottom:1px solid rgb(229, 229, 229);}\
QLineEdit:hover{border-bottom:1px solid rgb(193,193, 193);}\
QLineEdit:focus{border-bottom:1px solid rgb(18, 183, 245);}");
QHBoxLayout* hPswLayout = new QHBoxLayout(lineEditPassed);
hPswLayout->addWidget(m_labelLocker);
hPswLayout->addStretch();
hPswLayout->addWidget(m_pButtonKeyborad);
hPswLayout->setMargin(0);
QVBoxLayout* vBoxLayout = new QVBoxLayout();
vBoxLayout->addStretch();
vBoxLayout->addWidget(lineEditAccount);
vBoxLayout->addWidget(lineEditPassed);
vBoxLayout->addStretch();
vBoxLayout->setSpacing(10);
vBoxLayout->setMargin(0);
QHBoxLayout* hMainLayout = new QHBoxLayout(this);
hMainLayout->addStretch();
hMainLayout->addLayout(vBoxLayout);
hMainLayout->addStretch();
hMainLayout->setMargin(10);
}
void QQLineEditWidget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(Qt::NoPen);
painter.setBrush(Qt::white);
painter.drawRoundedRect(this->rect().adjusted(10, 10, -10, -10), 3, 3);
}
相关文章
- MFC 列表控件CListCtrl加载类似QQ界面的头像与文字
- QQ音乐高可用架构体系
- Discuz常见小问题-如何使用QQ登陆
- 通过网页或者移动设备链接跳转qq(tim)添加好友(群)
- 安装完QQ必须要删除掉的几个恐怖文件
- Android特效专辑(六)——仿QQ聊天撒花特效,无形装逼,最为致命
- QQ空间开放平台开发教程-SDK和API的使用
- docker安装运行qq
- 怎么让有些QQ好友的动态不在自己空间里显示
- Atitit 破解qq空间(2)-------探测权限
- AutoJs学习-QQ自动点赞及打卡
- 楼主,可否发一份代码给我!QQ....
- 基于Qt的类QQ气泡聊天的界面开发
- 訪问的网页自己主动打开QQ对话
- QQ翻车微信出bug,程序员该如何应对?