一、简述

今天是2017年第一篇技术文章，12月末事情太多，一直没来得及更新博客。今天继 Qt 之 模仿 QQ登陆界面——样式篇 这一篇 来简单地看一下对登录界面做的一些功能，主要是登录用户下拉列表和用户登录状态的切换。

效果图：

登录用户下拉列表

用户登录状态

二、代码之路

accountitem.h

#ifndef ACCOUNTITEM_H
#define ACCOUNTITEM_H#include <QWidget>
#include <QLabel>
#include <QToolButton>
#include <QMouseEvent>class AccountItem : public QWidget
{Q_OBJECTpublic:AccountItem(QWidget *parent = NULL);public:void setAccountInfo(int index, QString accountName, QString headFilePath);QString getAccountName();
public slots:void onRemoveAccount() ;private:void mousePressEvent(QMouseEvent *event) ;void mouseReleaseEvent(QMouseEvent *event) ;QString getHeadImageDirPath();Q_SIGNALS:void signalShowAccountInfo(int index , QString accountName);void signalRemoveAccount(int index) ;private:bool m_mousePress;QLabel *m_accountNumber;QToolButton *m_deleteButton;QLabel *m_Icon;int m_index;
};#endif // ACCOUNTITEM_H

accountitem.cpp

#include "accountitem.h"
#include <QHBoxLayout>
#include <QDebug>AccountItem::AccountItem(QWidget *parent):QWidget(parent)
{m_mousePress = false ;m_Icon = new QLabel() ;m_accountNumber = new QLabel() ;m_deleteButton = new QToolButton();m_deleteButton->setIcon(QIcon(":/Resources/LoginWindow/deleteAccount.png"));m_deleteButton->setStyleSheet("background-color:transparent;");connect(m_deleteButton , SIGNAL(clicked(bool)) , this , SLOT(onRemoveAccount())) ;// 布局;QHBoxLayout *mainLayout = new QHBoxLayout(this) ;mainLayout->addWidget(m_Icon);mainLayout->addWidget(m_accountNumber) ;mainLayout->addStretch();mainLayout->addWidget(m_deleteButton);mainLayout->setContentsMargins(5 , 5 , 5 , 5);mainLayout->setSpacing(5);
}void AccountItem::setAccountInfo(int index , QString accountName, QString headFilePath)
{m_index = index;m_accountNumber->setText(accountName);QString filePath = headFilePath;m_Icon->setPixmap(QPixmap(filePath).scaled(30, 30));
}QString AccountItem::getAccountName()
{return m_accountNumber->text() ;
}void AccountItem::onRemoveAccount()
{emit signalRemoveAccount(m_index);
}void AccountItem::mousePressEvent(QMouseEvent *event)
{if(event->button() == Qt::LeftButton){m_mousePress = true;}
}void AccountItem::mouseReleaseEvent(QMouseEvent *event)
{if(m_mousePress){emit signalShowAccountInfo(m_index , m_accountNumber->text());m_mousePress = false;}
}

loginwindow.h

#ifndef LoginWindow_H
#define LoginWindow_H#include "basewindow.h"
#include <QListWidget>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();void initAccountList();private slots:void onLoginStateClicked();void onMenuClicked(QAction * action);void onShowAccountInfo(int index, QString accountName);
private:Ui::LoginWindow *ui;// 密码框小键盘按钮;QPushButton* m_keyboardButton;// 登录状态点击菜单;QMenu* m_loginStateMemu;// 登录状态值;LoginState m_loginState;// 下拉列表;QListWidget* m_Accountlist;
};#endif // LoginWindow_H

loginwindow.cpp

#include "LoginWindow.h"
#include "ui_LoginWindow.h"
#include <QPainter>
#include <QMovie>
#include <QHBoxLayout>
#include <QCursor>
#include <QMenu>
#include <QDebug>
#include "accountitem.h"LoginWindow::LoginWindow(QWidget *parent): BaseWindow(parent), ui(new Ui::LoginWindow), m_loginState(ONLINE)
{ui->setupUi(this);initWindow();initMyTitle();initAccountList();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));connect(ui->loginState, SIGNAL(clicked()), this, SLOT(onLoginStateClicked()));
}void LoginWindow::initAccountList()
{// 设置代理;m_Accountlist = new QListWidget(this);ui->accountComboBox->setModel(m_Accountlist->model());ui->accountComboBox->setView(m_Accountlist);for (int i = 0; i < 3; i ++){AccountItem *account_item = new AccountItem();account_item->setAccountInfo(i, QStringLiteral("前行中的小猪_%1号").arg(i), QString(":/Resources/LoginWindow/headImage/head_%1.png").arg(i));connect(account_item, SIGNAL(signalShowAccountInfo(int, QString)), this, SLOT(onShowAccountInfo(int , QString)));connect(account_item, SIGNAL(signalRemoveAccount(QString)), this, SLOT(onRemoveAccount(QString)));QListWidgetItem *list_item = new QListWidgetItem(m_Accountlist);m_Accountlist->setItemWidget(list_item, account_item);}
}void LoginWindow::onLoginStateClicked()
{m_loginStateMemu = new QMenu(this);QAction *pActionOnline = m_loginStateMemu->addAction(QIcon(":/Resources/LoginWindow/LoginState/state_online.png"), QStringLiteral("我在线上"));QAction *pActionActive = m_loginStateMemu->addAction(QIcon(":/Resources/LoginWindow/LoginState/state_Qme.png"), QStringLiteral("Q我吧"));m_loginStateMemu->addSeparator();QAction *pActionAway = m_loginStateMemu->addAction(QIcon(":/Resources/LoginWindow/LoginState/state_away.png"), QStringLiteral("离开"));QAction *pActionBusy = m_loginStateMemu->addAction(QIcon(":/Resources/LoginWindow/LoginState/state_busy.png"), QStringLiteral("忙碌"));QAction *pActionNoDisturb = m_loginStateMemu->addAction(QIcon(":/Resources/LoginWindow/LoginState/state_notdisturb.png"), QStringLiteral("请勿打扰"));m_loginStateMemu->addSeparator();QAction *pActionHide = m_loginStateMemu->addAction(QIcon(":/Resources/LoginWindow/LoginState/state_hide.png"), QStringLiteral("隐身"));// 设置状态值;pActionOnline->setData(ONLINE);pActionActive->setData(ACTIVE);pActionAway->setData(AWAY);pActionBusy->setData(BUSY);pActionNoDisturb->setData(NOT_DISTURB);pActionHide->setData(HIDE);connect(m_loginStateMemu, SIGNAL(triggered(QAction *)), this, SLOT(onMenuClicked(QAction*)));QPoint pos = ui->loginState->mapToGlobal(QPoint(0 , 0)) + QPoint(0, 20);m_loginStateMemu->exec(pos);
}void LoginWindow::onMenuClicked(QAction * action)
{ui->loginState->setIcon(action->icon());// 获取状态值;m_loginState = (LoginState)action->data().toInt();qDebug() << "onMenuClicked" << m_loginState;
}//将选项文本显示在QComboBox当中
void LoginWindow::onShowAccountInfo(int index, QString accountName)
{ui->accountComboBox->setEditText(accountName);ui->accountComboBox->hidePopup();// 更换用户头像;QString fileName = QString(":/Resources/LoginWindow/headImage/head_%1.png").arg(index);ui->userHead->setPixmap(QPixmap(fileName).scaled(ui->userHead->width(), ui->userHead->height()));
}

样式

*{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;    /*由于图片保存问题图片大了两个像素*/
}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);
}/*用户状态菜单*/
QMenu
{border-width:2px;padding:0px;border-image:url( :/Resources/LoginWindow/menu_border.png);
}QMenu::item
{padding:5 20 5 30;
}QMenu::item:selected
{background:rgb(39 , 134 , 228);
}QMenu:icon
{padding:0 0 0 10 ;
}QMenu::separator
{height:1px;margin-left:25;margin-top:2px;margin-right:0;margin-bottom:2px;background-color:rgb(183 , 195 , 204);
}QListWidget
{outline:0px;    /*去除item虚线框*/border: 1px solid rgb(21 , 131 , 221);
}QListView::item
{margin:3px;
}QListView::item:selected
{border-radius:3px;background-color:rgba(106 , 171 , 219 , 80);
}QListView::item:hover
{border-radius:3px;background-color:rgba(97 , 179 , 246 , 0.5);
}QLabel#userHead
{border-radius:4px;
}

尾

以上代码只是介绍了登录界面的登录用户下拉列表和用户登录状态的切换效果，后续将完善更多功能，敬请期待 O(∩_∩)O！

代码下载

模仿QQ登录窗口（Qt实例）

更新于2017年7月20日

Qt 之 模仿 QQ登陆界面——功能篇（一）相关推荐

  1. Qt 之 模仿 QQ登陆界面——旋转窗口篇

    #一.简述 今天是新的一年第一篇博客,有大半个月没有更新博客了.我想是时候,打开电脑.拿起键盘.开始在我的代码之路上披荆斩棘,斩杀恶龙. 今天就继续来分享QQ登录界面的那些事.QQ登录界面的标题栏有一 ...

  2. ios swift模仿qq登陆界面，xml布局

    给大家推荐两个学习的地址: 极客学院的视频:http://www.jikexueyuan.com/path/ios/ 一个博客:http://blog.csdn.net/lizhongfu2013/a ...

  3. Qt（三）--- 实现QQ登陆界面头像状态栏的功能

    对于QQ登陆界面,可以通过下拉菜单,实现状态的选择,在QQ的头像状态栏需要显示的信息包括:用户的头像以及登陆的状态.这里主要涉及和利用的只是是QMenu以及QAction,同时继承QLabel的类: ...

  4. Qt模仿QQ聊天窗口界面（一）

    Qt模仿QQ聊天窗口界面(一) Qt模仿QQ聊天窗口界面(一) 简述 效果图 QQ的聊天窗口 我做的效果图 代码篇 结尾 简述 最近利用业余时间,模仿QQ做了一个聊天窗口界面,功能还不全,准备分几个部 ...

  5. Qt模仿QQ聊天窗口界面（二）

    Qt模仿QQ聊天窗口界面(二) Qt模仿QQ聊天窗口界面(二) 简述 修改 效果图 后期规划 代码 结尾 简述 在上篇我们已经搭好了QQ聊天窗口的框架,这里在原来的基础上叠加功能,以及优化一些控件. ...

  6. Qt模仿QQ聊天窗口界面（三）

    Qt模仿QQ聊天窗口界面(三)- 截图 Qt模仿QQ聊天窗口界面(三)- 截图 简述 效果图 代码篇 后期规划 结尾 简述 此篇在原来的基础上增加了QQ截图功能.在一个大佬的基础上进行了二次开发. 参 ...

  7. Qt之模仿QQ主面板界面

    Qt之模仿QQ主面板界面 Qt之模仿QQ主面板界面 效果图 结尾 效果图 这里大家值得注意的是,QQ等级设置,已经列表展开搜索时的三角符的旋转效果 //QQMainWindow.cpp #includ ...

  8. android模仿qq登录界面,初识Android二之小试牛刀模仿实现qq登陆界面

    初识Android二之小试牛刀模仿实现qq登陆界面.俗话说得好,老师踢开门,修行在自己.勉勉强强学完生命周期,然后悠悠闲闲听了两节课后,老师就布置了一个登陆界面的实现,于是,磕磕绊绊的修行之路开始了. ...

  9. pyqt5登录界面设计——模仿qq登录界面，可登录注册（数据库）

    pyqt5登录界面设计--模仿qq登录界面 一.简单易用的可直接登录的界面--账号密码程序写死 1.1.效果图: 1.2.视频效果图 3.代码说明 4.使用示例 5.全部源码见: 二.带数据库的可登录 ...

最新文章

  1. PocketPC 全屏的实现
  2. 使用podspec创建iOS插件
  3. 运动目标检测、阴影检测及目标跟踪中用得到的标准测试视频下载（大量IBM提供视频）...
  4. 微软项目管理[EPM]数据库应用举例2: 取得一个项目的某大纲代码的值
  5. 如何查看某个employee被assign到了哪个sales organization上
  6. NutchServer的安全层
  7. nginx源码分析—模块及其初始化
  8. Qt文档阅读笔记-QSslConfiguration官方解析与实例
  9. Exploration（POJ-3618）
  10. T-SQL的进阶:超越基本级别3:构建相关子查询——701小组
  11. stm32的HAL库uart的注意点
  12. python实现判断给定列表是否存在重复元素，且索引差小于k
  13. 计算机启动时默认输入法设置,每次开机都需要重设，教你电脑输入法怎么设置默认模式...
  14. TCP的SYN报文可以携带payload吗？
  15. 图形学初步--裁剪算法之Liang－Barsky算法
  16. 手机之家签名工具_魔力签 v1.3已更新内置资源amp;越狱工具
  17. 求最大公约数的4种算法（C++）
  18. 系统主题修改桌面嵌入html,更换主题桌面主题 Win7桌面动态主题怎么更换
  19. JVM之运行时数据区（方法区）
  20. JL-03-Q9 自动气象站 常见气象9参数 空气温湿度 风速风向 雨量光照 大气压力 土壤温湿度

热门文章

  1. opencms初级课程-郗旭光-专题视频课程
  2. 树莓派4B 声音传感器AO模块
  3. sqlite3和tkinter结合使用案例编程
  4. 会声会影x4素材_会声会影素材包
  5. Python | 怎么在基金定投上实现收益最大化
  6. datawhale课程《transformers入门》笔记6：文本分类、超参搜索
  7. 千里马若有人赏识--不论对错，不为输赢，我就是认真。
  8. LC并联谐振电路设计
  9. streaing-kafka
  10. 如何涉足游戏业 樊一鹏