QQ登陆界面

登录用户下拉列表

用户登录状态

accountitem.h

#ifndef ACCOUNTITEM_H
#define ACCOUNTITEM_H

#include <QWidget>
#include <QLabel>
#include <QToolButton>
#include <QMouseEvent>

class AccountItem : public QWidget
{
Q_OBJECT

public:
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
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
4000
*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
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_OBJECT

public:
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
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
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; /*不加此句下拉箭头背景色为灰色与整体样式不一致，也可设置 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;
}