Qt小程序之QQ登录窗口输入框控件
一、简述
在前面的文章里为大家展示了用Qt实现的QQ登录界面以及QQ窗口的右键菜单控件,(Qt 实现 QQ 9.0版 自定义菜单控件、以及Qt 实现 QQ 9.0 新版登录窗口),有兴趣的小伙伴可以看下相关的文章,今天就把QQ登录界面的输入框单独拿出来分享一下。
单独看QQ的输入框其实也就是一个LineEdit,但是其实不是那么简单,用Qt要实现一样的效果需要加一些样式,贴图,布局等,还有一点就是重写QLineEdit基类。
为什么要重写QLineEdit呢,因为QLineEdit设置占位字符,当鼠标点击,焦点进入LineEdit时(如下图),占位符还是显示的。而QQ的登录窗口中LineEdit有焦点时,占位字符是不显示的。
Qt文档中也给了详细的介绍,请看红色矩形框中文字叙述。
正常情况下,即使QLineEdit有焦点时也会显示占位字符,但是输入框中文字设置为居中显示,那么输入框有焦点时,占位字符不会显示。
将输入框中文字设置为居中显示之后(见下方代码),当焦点进入输入框时,占位字符就不显示了,但是这不是我们想要的效果。实际上我们是要文字居左显示,所以这里要重写QLineEdit,自己控制占位字符的显示。
效果图
二、代码之路
整体思路即根据focusInEvent和focusOutEvent事件判断焦点是否在输入框中,同时重写setPlaceholderText方法,把最开始设置的占位字符保存下来,然后焦点进入的时候如果输入框中没有字符 就把占位字符清空,如果本身就有内容字符,占位字符是不显示的。
然后在焦点离开输入框时,判断当前输入框是否有内容字符,如果没有则恢复之前保存的占位字符。
// 鼠标是否点击进行编辑;
void signalIsMouseIn(bool isFocusIn);
MyLineEdit
class MyLineEdit : public QLineEdit
{Q_OBJECTpublic: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_OBJECTpublic: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);
}
Qt小程序之QQ登录窗口输入框控件相关推荐
- java程序获取外部java程序的控件,将 Java 小程序迁移到 Microsoft J# 浏览器控件-JSP教程,Java技巧及代码...
visual j# .net 小组 microsoft corporation 摘要:通过 microsoft j# 浏览器控件,开发人员可以将所编写的在 java 虚拟机上运行的 java 小程序迁 ...
- 微信小程序-如何获取用户表单控件中的值
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如 ...
- 微信小程序控制盒子显示隐藏_微信小程序动态的显示或隐藏控件的方法(两种方法)...
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: 我是 ...
- 微信小程序动态的显示或隐藏控件
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: &l ...
- android 仿qq修改头像,Qt:小项目仿QQ修改头像界面,技术点记录
最近写了一个修改头像功能的UI,布局参考了QQ目前的修改头像界面.如下图 这里主要说明一下两个地方的技术:1.头像图片上层的遮罩层,圆形外部为灰色,内部为全透明:2.上传图片宽高比例可以通过鼠标拖拽移 ...
- 微信小程序之授权登录(附完整源码)
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
- 易语言新手入门教程第四课 - 简单模仿QQ登录窗口
简单模仿QQ登录窗口 1.编辑框 2.如果() 3.载入() 4.销毁() 作业: 看完教程,然后自己用易语言写一个一样的程序 易语言如果命令的说明: 调用格式: 〈无返回值〉 如果 (逻辑型 条件) ...
- 黯然微信小程序杂记(二):小程序最新版登录并进行缓存模块的实现 附源码
黯然微信小程序杂记(二):小程序最新版登录进行缓存模块的实现 附源码 一.功能描述 二.mine.wxml界面图片 三.mine.wxml代码 四.mine.wxss代码 五.mine.js代码 六. ...
- 小程序登录本地服务器,微信小程序实现用户登录模块服务器搭建
我选用的是node.js来搭建服务器,没有安装的小伙伴可以参考我的node.js其他博客. 服务器安装与配置 初始化项目,将会自动创建package.json配置文件. npm init -y 安装E ...
最新文章
- gitlab的安装和使用
- 6个整改!2018年国家重点实验室评估结果公布
- 58同城沈剑:好的架构源于不停地衍变,而非设计
- springmvc+mybatis,在mybatis逆向工程的基础上使用模板自动生成controller层代码
- socket未读消息 如何设计_如何设计IM系统的消息架构?
- 算法每日学打卡:java语言基础题目打卡(19-21)
- 1040 有几个PAT(PAT乙级 C++)
- 关于精英版stm32从模板工程移植RTT Spi驱动打开后编译不过的处理办法
- es6之Generator
- python 函数中参数的传递方式(三分钟读懂)
- 我国计算机网络发展水平,计算机网络发展
- 阶段2 JavaWeb+黑马旅游网_15-Maven基础_第5节 使用骨架创建maven的java工程_16maven工程servlet实例之jar包冲突...
- 在线光纤网速测试软件,光纤网速测试,宽带测试
- ActiveX控件进行注册
- 惠普打印机扫描软件安装
- c#语言输出字符串长度,C#获取字符串长度(string.Length)
- RxJava Observer与Subscriber的关系
- PPT | 5G时代的视频云服务关键技术与实践
- 关于我从有转行的想法到下定决心转行的经历
- linux列表去重复数据,Linux常用去除重复数据口令
热门文章
- Golang-Web(HTMl模板和静态资源)
- 进制转换(用Python实现进制转换器)
- 电脑win10显示依赖服务器,Win10系统弹出错误1068依赖服务或组无法启动如何解决...
- 无线知识:dBm、dBw、dB、dBi、dBd、asu、RSSI(接收信号强度)、天线增益、灵敏度等无线参数快速了解
- 机器学习中的方差偏差分析(Bias-variance analysis)
- Python破解WIFI升级版保姆级教程,多线程破解+界面(附赠密码本)
- 【Scratch工具介绍】运算积木(part 1)
- 4、openFeign契约配置
- beats 耳机 android,售价下调近三分之二后,它终于成为了最值得入手的无线耳机之一:Beats Flex...
- Ansoft安装报错reg_ansys.exe ERROR:Error3221227010