一、简述
今天是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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
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; }}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
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
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
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()));}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
样式
*{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; 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 ;}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; 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;}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
尾
以上代码只是介绍了登录界面的登录用户下拉列表和用户登录状态的切换效果,后续将完善更多功能,敬请期待 O(∩_∩)O!
代码下载
模仿QQ登录窗口(Qt实例)
更新于2017年7月20日