Qt 之模仿 QQ登陆界面—

#一、简述
今天晚上花了半天时间从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_OBJECTpublic: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登陆界面——样式篇相关推荐

Qt 之模仿 QQ登陆界面——功能篇（一）
一.简述今天是2017年第一篇技术文章,12月末事情太多,一直没来得及更新博客.今天继 Qt 之模仿 QQ登陆界面--样式篇这一篇来简单地看一下对登录界面做的一些功能,主要是登录用户下拉列表和 ...
Qt 之模仿 QQ登陆界面——旋转窗口篇
#一.简述今天是新的一年第一篇博客,有大半个月没有更新博客了.我想是时候,打开电脑.拿起键盘.开始在我的代码之路上披荆斩棘,斩杀恶龙. 今天就继续来分享QQ登录界面的那些事.QQ登录界面的标题栏有一 ...
ios swift模仿qq登陆界面，xml布局
给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...
Qt模仿QQ聊天窗口界面（二）
Qt模仿QQ聊天窗口界面(二) Qt模仿QQ聊天窗口界面(二) 简述修改效果图后期规划代码结尾简述在上篇我们已经搭好了QQ聊天窗口的框架,这里在原来的基础上叠加功能,以及优化一些控件. ...
Qt模仿QQ聊天窗口界面（一）
Qt模仿QQ聊天窗口界面(一) Qt模仿QQ聊天窗口界面(一) 简述效果图 QQ的聊天窗口我做的效果图代码篇结尾简述最近利用业余时间,模仿QQ做了一个聊天窗口界面,功能还不全,准备分几个部 ...
Qt模仿QQ聊天窗口界面（三）
Qt模仿QQ聊天窗口界面(三)- 截图 Qt模仿QQ聊天窗口界面(三)- 截图简述效果图代码篇后期规划结尾简述此篇在原来的基础上增加了QQ截图功能.在一个大佬的基础上进行了二次开发. 参 ...
Qt（三）--- 实现QQ登陆界面头像状态栏的功能
对于QQ登陆界面,可以通过下拉菜单,实现状态的选择,在QQ的头像状态栏需要显示的信息包括:用户的头像以及登陆的状态.这里主要涉及和利用的只是是QMenu以及QAction,同时继承QLabel的类: ...
Qt之模仿QQ主面板界面
Qt之模仿QQ主面板界面 Qt之模仿QQ主面板界面效果图结尾效果图这里大家值得注意的是,QQ等级设置,已经列表展开搜索时的三角符的旋转效果 //QQMainWindow.cpp #includ ...
android模仿qq登录界面,初识Android二之小试牛刀模仿实现qq登陆界面
初识Android二之小试牛刀模仿实现qq登陆界面.俗话说得好,老师踢开门,修行在自己.勉勉强强学完生命周期,然后悠悠闲闲听了两节课后,老师就布置了一个登陆界面的实现,于是,磕磕绊绊的修行之路开始了. ...
pyqt5登录界面设计——模仿qq登录界面，可登录注册（数据库）
pyqt5登录界面设计--模仿qq登录界面一.简单易用的可直接登录的界面--账号密码程序写死 1.1.效果图: 1.2.视频效果图 3.代码说明 4.使用示例 5.全部源码见: 二.带数据库的可登录 ...

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

Qt 之模仿 QQ登陆界面——样式篇相关推荐

最新文章

热门文章

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

Qt 之 模仿 QQ登陆界面——样式篇相关推荐

最新文章

热门文章

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

Qt 之模仿 QQ登陆界面——样式篇相关推荐