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

一、简述

今天是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！