Qt 之 模仿 QQ登陆界面——样式篇

最新推荐文章于 2024-06-13 22:24:10 发布
最新推荐文章于 2024-06-13 22:24:10 发布
阅读量2.1k 收藏 17
点赞数 4
分类专栏： Qt

一、简述

今天晚上花了半天时间从QQ登录界面抠了些图，顺便加了点样式基本上实现了QQ的登陆界面全部效果。虽不说100%相似，那也有99.99%相似了哈O(∩_∩)O。

QQ好像从去年开始，登录界面有了一个3D动态效果，要实现这个也不难，直接使用GIF制作工具，录制动态效果生成GIF图，然后用QMovie加载Gif图，QLabel显示即可。

效果图：

这里写图片描述

这里写图片描述

这里写图片描述

可以从上面的效果图看出，整个登录界面的效果都已实现（或者说点击状态按钮没有弹出菜单选择登录状态，这个我觉得是功能部分，此篇只谈界面效果，在下篇中将实现界面上的一些功能。）

好了看完效果上代码。

二、代码之路

代码中用到了 Qt 之 自定义窗口标题栏 中叙述的自定义标题栏，直接继承了BaseWindow类，略去了一定的代码。有需要的小伙伴可以看一下。

LoginWindow.h

#include "basewindow.h"

namespace Ui {
    class LoginWindow;
}

// 登录状态;
typedef enum
{
    ONLINE = 1,     //在线;
    ACTIVE,         //活跃;
    AWAY,           //离开;
    BUSY,           //忙碌;
    NOT_DISTURB,    //请勿打扰; 
    HIDE,           //隐身;
    OFFLINE         //离线;
}LoginState;

class LoginWindow : public BaseWindow
{
    Q_OBJECT

public:
    LoginWindow(QWidget *parent = 0);
    ~LoginWindow();

private:
    void initMyTitle() ;
    void initWindow();

private:
    Ui::LoginWindow *ui;
    // 密码框小键盘按钮;
    QPushButton* m_keyboardButton;

};

LoginWindow.cpp

#include "LoginWindow.h"
#include "ui_LoginWindow.h"
#include "accountitem.h"
#include <QPainter>
#include <QMovie>
#include <QHBoxLayout>
#include <QCursor>

LoginWindow::LoginWindow(QWidget *parent)
    : BaseWindow(parent)
    , ui(new Ui::LoginWindow)
{
    ui->setupUi(this);
    initWindow();
    initMyTitle();
    this->loadStyleSheet(":/Resources/LoginWindow/LoginWindow.css");
}

LoginWindow::~LoginWindow()
{
    delete ui;
}

void LoginWindow::initMyTitle()
{
    // 因为这里有控件层叠了，所以要注意控件raise()方法的调用顺序;
    m_titleBar->move(0, 0);
    m_titleBar->raise();
    m_titleBar->setBackgroundColor(0, 0, 0 , true);
    m_titleBar->setButtonType(MIN_BUTTON);
    m_titleBar->setTitleWidth(this->width());

    ui->pButtonArrow->raise();
}

void LoginWindow::initWindow()
{
    //背景GIG图;
    QLabel* pBack = new QLabel(this);
    QMovie *movie = new QMovie();
    movie->setFileName(":/Resources/LoginWindow/back.gif");
    pBack->setMovie(movie);
    movie->start();
    pBack->move(0, 0);

    //暗注释;
    ui->accountComboBox->setEditable(true);
    QLineEdit* lineEdit = ui->accountComboBox->lineEdit();
    lineEdit->setPlaceholderText(QStringLiteral("QQ号码/手机/邮箱"));

    ui->passwordEdit->setPlaceholderText(QStringLiteral("密码"));

    // 密码框中的小键盘按钮;
    m_keyboardButton = new QPushButton();
    m_keyboardButton->setObjectName("pButtonKeyboard");
    m_keyboardButton->setFixedSize(QSize(16, 16));
    m_keyboardButton->setCursor(QCursor(Qt::PointingHandCursor));

    QHBoxLayout* passwordEditLayout = new QHBoxLayout();
    passwordEditLayout->addStretch();
    passwordEditLayout->addWidget(m_keyboardButton);
    passwordEditLayout->setSpacing(0);
    passwordEditLayout->setContentsMargins(0, 0, 8, 0);

    ui->passwordEdit->setLayout(passwordEditLayout);
    ui->passwordEdit->setTextMargins(0, 0, m_keyboardButton->width() + 12, 0);

    ui->userHead->setPixmap(QPixmap(":/Resources/LoginWindow/HeadImage.png"));
    ui->loginState->setIcon(QIcon(":/Resources/LoginWindow/LoginState/state_online.png"));
    ui->loginState->setIconSize(QSize(13, 13));
}

样式

*{font-family:Microsoft YaHei;}


/*最小化按钮*/
QPushButton#pButtonArrow
{
    border-image:url(:/Resources/LoginWindow/arrowback.png) 0 60 0 0 ;
}

QPushButton#pButtonArrow:hover
{
    border-image:url(:/Resources/LoginWindow/arrowback.png) 0 30 0 30 ;
}

QPushButton#pButtonArrow:pressed
{
    border-image:url(:/Resources/LoginWindow/arrowback.png) 0 0 0 60 ;
}

/*注册账号*/
QPushButton#pButtonRegistAccount
{
    color:rgb(38 , 133 , 227);
    background-color:transparent;
}

QPushButton#pButtonRegistAccount:hover
{
    color:rgb(97 , 179 , 246);
}

QPushButton#pButtonRegistAccount:pressed
{
    color:rgb(0 , 109 , 176);
}

/*忘记密码*/
QPushButton#pButtonForgetPassword
{
    color:rgb(38 , 133 , 227);
    background-color:transparent;
}

QPushButton#pButtonForgetPassword:hover
{
    color:rgb(97 , 179 , 246);
}

QPushButton#pButtonForgetPassword:pressed
{
    color:rgb(0 , 109 , 176);
}


/*下拉列表框*/
QComboBox
{
    background:white;
    padding-left:5px ;
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border: 1px solid rgb(209 , 209 , 209);
}
QComboBox:hover
{
    border: 1px solid rgb(21 , 131 , 221);
}
QComboBox QAbstractItemView::item
{
    height:40px;
}
QComboBox::down-arrow
{
    border-image:url(:/Resources/LoginWindow/drop_down_Button.png) 0 34 0 0 ;
}
QComboBox::down-arrow:hover
{
    border-image:url(:/Resources/LoginWindow/drop_down_Button.png) 0 17 0 17 ;
}
QComboBox::down-arrow:on
{
    border-image:url(:/Resources/LoginWindow/drop_down_Button.png) 0 0 0 34 ;
}
QComboBox::drop-down
{
    width:20px;
    background:transparent; /*不加此句下拉箭头背景色为灰色与整体样式不一致，也可设置 border:0px; border-radius:0px; background:white; border-left:0px ; 即设置为无边框*/
    padding-right:5px;
}

/*密码框*/
QLineEdit#passwordEdit
{
    background:white;
    padding-left:5px ;
    padding-top:1px ;
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
    border: 1px solid rgb(209 , 209 , 209);
    border-top:transparent;
}
QLineEdit#passwordEdit:hover
{
    padding-top:0px ;
    border: 1px solid rgb(21 , 131 , 221);
}

/*密码框中的小键盘按钮*/
QPushButton#pButtonKeyboard
{
    border-image:url(:/Resources/LoginWindow/keyboard.png) 0 30 0 0 ;
}

QPushButton#pButtonKeyboard:hover
{
    border-image:url(:/Resources/LoginWindow/keyboard.png) 0 15 0 15 ;
}

QPushButton#pButtonKeyboard:pressed
{
    border-image:url(:/Resources/LoginWindow/keyboard.png) 0 0 0 30 ;
}

/*记住密码and自动登录*/
QCheckBox
{
    color:rgb(101 , 101 , 101);
}

QCheckBox::indicator:unchecked
{
    border-image:url(:/Resources/LoginWindow/checkbox.png) 0 39 0 0;
}
QCheckBox::indicator:hover
{
    border-image:url(:/Resources/LoginWindow/checkbox.png) 0 26 0 13;
}
QCheckBox::indicator:pressed
{
    border-image:url(:/Resources/LoginWindow/checkbox.png) 0 13 0 26;
}
QCheckBox::indicator:checked
{
    border-image:url(:/Resources/LoginWindow/checkbox.png) 0 0 0 39;
}

/*多账号登录*/
QPushButton#moreAccountLogin
{
    border-image:url(:/Resources/LoginWindow/more_accountlogin.png) 1 47 1 1;    /*1是由于图片保存问题图片大了两个像素*/
}

QPushButton#moreAccountLogin:hover
{
    border-image:url(:/Resources/LoginWindow/more_accountlogin.png) 1 24 1 24;
}

QPushButton#moreAccountLogin:pressed
{
    border-image:url(:/Resources/LoginWindow/more_accountlogin.png) 1 1 1 47;
}

/*二维码*/
QPushButton#pButtongFlicker
{
    border-image:url(:/Resources/LoginWindow/flicker.png) 0 44 0 0;
}

QPushButton#pButtongFlicker:hover
{
    border-image:url(:/Resources/LoginWindow/flicker.png) 0 22 0 22;
}

QPushButton#pButtongFlicker:pressed
{
    border-image:url(:/Resources/LoginWindow/flicker.png) 0 0 0 44;
}

/*登陆按钮*/
QPushButton#loginButton
{
    color:white;
    background-color:rgb(14 , 150 , 254);
    border-radius:5px;
}

QPushButton#loginButton:hover
{
    color:white;
    background-color:rgb(44 , 137 , 255);
}

QPushButton#loginButton:pressed
{
    color:white;
    background-color:rgb(14 , 135 , 228);
    padding-left:3px;
    padding-top:3px;
}

/*登录状态*/
QPushButton#loginState
{
    border-radius:3px;
    background:transparent;
}

QPushButton#loginState:hover
{
    border: 1px solid rgb(150 , 150 , 150);
}

QPushButton#loginState:pressed
{
    padding-left:2px;
    padding-top:2px;
    border: 1px solid rgb(150 , 150 , 150);
}

 

界面布局

这里写图片描述

整个界面布局与QQ登录界面上的各个控件位置、大小保持一致。

资源图片

这里写图片描述

实现整个界面的样式其实不难，主要是图片资源都是一个一个从QQ登录界面中扣取出来，然后再经过PS修图，花了不少时间。不过整体与QQ的登录界面达到了一致效果（唯一遗憾的是没有边框的阴影效果，后续将会添加）。

尾

代码很简单，主要靠样式和图片资源，不得不说PS&抠图是门技巧。上述只实现了界面样式，功能将在下篇补上，敬请期待哈！

Good Night ！！！

资源图片下载

QQ 登录界面 各个控件图片资源

代码下载

Qt 之 模仿 QQ登陆界面

传送门： Qt 之 模仿 QQ登陆界面——样式篇

worthsen
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt 之 模仿 QQ登陆界面——功能篇（一）
前行之路还需前行
01-04 1万+
一、简述今天是2017年第一篇技术文章，12月末事情太多，一直没来得及更新博客。今天继 Qt 之 模仿 QQ登陆界面——样式篇 这一篇 来简单地看一下对登录界面做的一些功能，主要是登录用户下拉列表和用户登录状态的切换。效果图：登录用户下拉列表用户登录状态二、代码之路accountitem.h#ifndef ACCOUNTITEM_H #define ACCOUNTITEM_H#include <QW
QT 实现类似于qq的登录注册界面
kay3123的博客
05-06 3910
QT 实现类似于qq的登录界面运用sql进行简单注册登录 功能快捷键 撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + Shift + H 无序列表：Ctrl/Command + Shift + U 有序列表：Ctrl/Command + Shift + O 检查列表：Ctrl/Command + Shift + C 插入代码：Ctrl/Command + Shi
使用QT制作QQ登录界面
最新发布
DJQ2020391635的博客
06-13 2758
【代码】使用QT制作QQ登录界面。
基于QT的仿QQ登录界面
05-07
基于QT的仿QQ登录界面，设计到的知识点包括QT国际化，QT样式表的使用
Qt模仿QQ登录界面（一）
水枂的博客
03-05 3792
这两天研究qt，练习时做了个仿QQ登录界面，我这次实现的比较简单，先在这里记录一下，以后有空了会继续完善的。 （一）效果图 这里使用我的qq号测试的如图： （二）工程文件 （三）代码实现 mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> QT_BEGIN_NAMESPA...
QT 登录界面 仿QQ
04-09
采用QT开发 登录界面 仿QQ，相似度接近百分99，搜集网上资源整合开发。
qt学习：模仿qq界面+添加资源+无边框界面+修改样式
weixin_59669309的博客
01-21 1439
头文件私有成员private:公有函数接口public:~MWindow();//显示头像到第一个按钮上//当按钮点击时，更新按钮图标//当前选中的按钮 图标 高亮修改为继承于无边框界面登录界面登录后界面。
Qt 之 模仿 QQ登陆界面——旋转窗口篇
有志者事竟成
09-29 487
一、简述 今天是新的一年第一篇博客，有大半个月没有更新博客了。我想是时候，打开电脑、拿起键盘、开始在我的代码之路上披荆斩棘，斩杀恶龙。 今天就继续来分享QQ登录界面的那些事。QQ登录界面的标题栏有一个小三角的按钮，一般情况下，大家可能并不会点击这个按钮，因为正常情况下大家登录QQ都不需要进行网络设置，只有在网络有限制的情况下，我们需要设置一些代理来登录QQ。 当我们点击这个小三角
QT模拟实现网页登录界面
u010090316的博客
05-17 7964
QT模拟实现网页登录界面常见的网络登录界面一般包括用户名 Lable 和编辑框，密码 Label 和编辑框，是否保存密码的 Check 按钮，以及确定登录和退出按钮组成，界面设计如下： 一般的登录流程如下：用户输入用户名和密码，有的可能会勾选保存密码选项；然后点击确定按钮向服务器发出登录请求；服务器收到请求后与数据库中存储的记录比较，存在则允许用户登入系统；客户端在收到确认后先将本次登录计入存
模仿QQ登录窗口（Qt实例）
07-20
利用Qt 实现了QQ的登录界面，基本上实现了QQ的登陆界面全部效果，外加了QQ登录界面的旋转效果。虽不说100%相似，那也有99.99%相似了哈O(∩_∩)O。 详情见博客：http://blog.csdn.net/goforwardtostep/article/details/55224578
Qt仿QQ登录界面
05-03
此源码在CSDN　ＩＴ１９９５有对应的博文。本程序开源！！！！
Qt 之 模仿 QQ登陆界面下载
12-22
利用Qt 实现了QQ的登录界面，从QQ登录界面抠了些图，加了点样式基本上实现了QQ的登陆界面全部效果。虽不说100%相似，那也有99.99%相似了哈O(∩_∩)O。 详情见博客：http://blog.csdn.net/goforwardtostep/article/details/53792702
高仿QQ登陆界面
07-04
用Qt5做的高仿登陆界面，可以直接运行，由于版本原因，Qt4运行可能需要修改一下。
仿QQ登录背景动画效果
09-28
QQ登录时我们会看到登录界面，背景效果有动画效果，实现方式还是挺简单的。
Fdog系列（四）：使用Qt框架模仿QQ实现登录界面，界面篇。
花狗Fdog的博客
04-25 1万+
文章目录一. 前言二. 正文1. 创建窗口，添加基本组件2. 自定义标题，隐藏任务栏标题，实现系统托盘显示3. 美化主界面，文本框的奇思妙想4. 实现背景阴影 一. 前言 Fdog系列已写目录： Fdog系列（一）：思来想去，不如写一个聊天软件，那就从仿QQ注册页面开始吧。 Fdog系列（二）：html写完注册页面之后怎么办，用java写后台响应呀。 Fdog系列（三）：使用腾讯云短信接口发送短信，数据库写入，部署到服务器，web收尾篇。 哈喽，我的小伙伴们，在之前的三篇中，我们实现了网页端注册一个Fd
Qt项目：利用Qt制作QQ的登录及主界面
欧特GO
10-30 987
利用Qt制作QQ的登录及主界面
Fdog系列（五）：使用Qt模仿QQ实现登录界面到主界面，功能篇。
热门推荐
花狗Fdog的博客
05-01 1万+
一. 前言 Fdog系列已写目录： Fdog系列（一）：思来想去，不如写一个聊天软件，那就从仿QQ注册页面开始吧。 Fdog系列（二）：html写完注册页面之后怎么办，用java写后台响应呀。 Fdog系列（三）：使用腾讯云短信接口发送短信，数据库写入，部署到服务器，web收尾篇。 Fdog系列（四）：使用Qt框架模仿QQ实现登录界面，界面篇..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值