Qt浅谈之三十四仿登录界面

一、简介

        因需设计登录界面的需要，在博友中发现非常不错的登录界面风格，故写些Qt4的测试代码记录下，下图是博友中的参考图片。

二、详解

1、主要代码

（1）homeserver.h

#ifndef HOMESERVER_H
#define HOMESERVER_H

#include <QtGui>
#include "epushbutton.h"
#include "elineedit.h"

class HomeServer : public QWidget
{
    Q_OBJECT

public:
    HomeServer(QWidget *parent = 0);
    ~HomeServer();
    void addServer();

protected:
     void paintEvent(QPaintEvent *event);
     void mousePressEvent(QMouseEvent *event);
     void mouseReleaseEvent(QMouseEvent *event);
     void mouseMoveEvent(QMouseEvent *event);
     void resizeEvent(QResizeEvent *event);
private:
     QPoint movePoint;
     bool mousePress;
     ELineEdit *pwdLineEdit;
     EPushButton *pwdButton;
     EPushButton *minButton;
     EPushButton *closeButton;

     QCheckBox *rememberCheckBox;
     QCheckBox *autoLoginCheckBox;
     QPixmap titlePixmap;
     QLabel *familyLabel;
     QLabel *remoteLabel;
     QScrollArea *scrollArea;
     QWidget *widgetScrollArea;
     QList<QLabel *>listLabel;
};

#endif // HOMESERVER_H

（2）homeserver.cpp

#include "homeserver.h"

HomeServer::HomeServer(QWidget *parent)
    : QWidget(parent, Qt::FramelessWindowHint)
    , mousePress(false)
{
//    setAutoFillBackground(false);
//    QPalette pal = palette();
//    pal.setColor(QPalette::Background, QColor(0xFF,0xFF,0xFF,0x00));
//    setPalette(pal);
    setStyleSheet("QCheckBox{font-family:arial;font-size:13px;border-radius:2px;color:#FFFFFF;}"
                  //"QCheckBox::indicator:unchecked{}"
                  "QCheckBox::indicator:checked{color:#FF0000}"
                  );
    titlePixmap.load(":/title.png");
    resize(500, 400);
    pwdLineEdit = new ELineEdit(this);
    pwdLineEdit->setHint(tr("please input password"));
    pwdLineEdit->setError(false);

    pwdButton = new EPushButton(this);
    pwdButton->setPixName(":/button");
    pwdButton->setToolTip(tr("login"));
    connect(pwdButton, SIGNAL(clicked()), this, SLOT(showMinimized()));

    rememberCheckBox = new QCheckBox(this);
    rememberCheckBox->setFocusPolicy(Qt::NoFocus);
    //rememberCheckBox->setFont(QFont("arial", 10, QFont::Bold));
    rememberCheckBox->setText(tr("remember"));

    autoLoginCheckBox = new QCheckBox(this);
    autoLoginCheckBox->setFocusPolicy(Qt::NoFocus);
    //autoLoginCheckBox->setFont(QFont("arial", 10, QFont::Bold));
    autoLoginCheckBox->setText(tr("autologin"));

    QPixmap familyPix(":/family.png");
    familyLabel = new QLabel(this);
    familyLabel->resize(familyPix.width(), familyPix.height());
    familyLabel->setPixmap(familyPix);
    remoteLabel = new QLabel(this);
    QPixmap remotePix(":/remote.png");
    remoteLabel->resize(remotePix.width(), remotePix.height());
    remoteLabel->setPixmap(remotePix);

    scrollArea = new QScrollArea(this);
    scrollArea->setStyleSheet("QScrollArea{background:transparent;}" //transparent
                              "QScrollBar::vertical{background:#D3D3D3;border:-5px solid grey;margin:6px 0px 5px 0px;width:8px;}"
                              "QScrollBar::horizontal{background:#D3D3D3;border:0px solid #126691;height:10px;}"
                              "QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {background:#35A739;}"
                             );
    scrollArea->setFrameShape(QFrame::NoFrame);
    scrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
    scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAsNeeded);
    scrollArea->setFocusPolicy(Qt::NoFocus);

    widgetScrollArea = new QWidget(this);
    widgetScrollArea->setStyleSheet("background:transparent;");
    widgetScrollArea->resize(0, 0);
    scrollArea->setWidget(widgetScrollArea);

    minButton = new EPushButton(this);
    minButton->setPixName(":/min");
    minButton->setToolTip(tr("minimize"));
    connect(minButton, SIGNAL(clicked()), this, SLOT(showMinimized()));

    closeButton = new EPushButton(this);
    closeButton->setPixName(":/close");
    closeButton->setToolTip(tr("close"));
    connect(closeButton, SIGNAL(clicked()), this, SLOT(close()));

    for (int index = 0; index < 6; index++) {
        addServer();
    }
}

HomeServer::~HomeServer()
{

}

void HomeServer::addServer()
{
    int count = listLabel.count();
    QPixmap serverPix(":/server.png");
    QLabel *label = new QLabel(widgetScrollArea);
    label->setPixmap(serverPix);
    label->setGeometry(60 + (count % 2) *120, 20 + (count/2) *100 , serverPix.width(), serverPix.height());
    label->show();
    widgetScrollArea->resize(280, 100 * (1 + count/2));
    listLabel.append(label);
}

void HomeServer::resizeEvent(QResizeEvent *event)
{
    pwdLineEdit->setGeometry(120, 320, 205, 25);
    pwdButton->setGeometry(325, 313, 37 ,37);
    rememberCheckBox->move(127, 355);
    autoLoginCheckBox->move(220, 355);
    familyLabel->move(20, 170);
    remoteLabel->move(415, 150);
    scrollArea->setGeometry(100, 100, 295, 200);
    minButton->move(width() - 27 - closeButton->width(), 0);
    closeButton->move(width() - 27, 0);
    move((QApplication::desktop()->width() - width())/2,  (QApplication::desktop()->height() - height())/2);
    QWidget::resizeEvent(event);
}

void HomeServer::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.save();
//    painter.setRenderHint(QPainter::Antialiasing);
//    painter.setRenderHint(QPainter::SmoothPixmapTransform);
//    QLinearGradient linearGradient(0, 0, width(), height());
//    linearGradient.setColorAt(0.0, QColor("#0F8E29"));
//    linearGradient.setColorAt(0.5, QColor("#239C33"));
//    linearGradient.setColorAt(1.0, QColor("#3FAB3D"));
//    painter.setBrush(QBrush(linearGradient));
    QRadialGradient radialGradient(0 , 0, width(), 0, 0);
    radialGradient.setColorAt(0.0, QColor("#108F2A"));
    radialGradient.setColorAt(0.5, QColor("#249C34"));
    radialGradient.setColorAt(1.0, QColor("#3DAB3D"));
    painter.setBrush(QBrush(radialGradient));
    painter.drawRect(0, 0, width(), height());
    painter.restore();
    painter.setPen(QPen(QColor(255, 255, 255, 200)));
    painter.drawLine(QPointF(0, 100), QPointF(width(), 100));
    painter.drawLine(QPointF(0, 300), QPointF(width(), 300));

    painter.setPen(QPen(QColor(255, 255, 255, 255)));
    painter.drawLine(QPointF(100, 100), QPointF(100, 300));
    painter.drawLine(QPointF(400, 100), QPointF(400, 300));

    painter.drawPixmap(40, 50, 206, 31, titlePixmap);
    QWidget::paintEvent(event);
}

void HomeServer::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton) {
        mousePress = true;
    }
    movePoint = event->globalPos() - pos();
    QWidget::mousePressEvent(event);
}

void HomeServer::mouseReleaseEvent(QMouseEvent *event)
{
    mousePress = false;
    QWidget::mouseReleaseEvent(event);
}

void HomeServer::mouseMoveEvent(QMouseEvent *event)
{
    if(mousePress) {
        QPoint movePos = event->globalPos();
        move(movePos - movePoint);
    }
    QWidget::mouseMoveEvent(event);
}

（3）main.cpp

#include "homeserver.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QTranslator translator;
    translator.load("homeserver.qm",":/");
    app.installTranslator(&translator);
    HomeServer w;
    w.show();

    return app.exec();
}

（4）运行（分别由3和6个server组成的界面）

（5）QScrollBar的样式

#垂直滚动条
QScrollBar::vertical {
    border:0px solid grey;
    width: 35px;
}

#滑块
QScrollBar::handle:vertical {
    background: #8080FF;
    border: 3px solid grey;
    border-radius:5px;
    min-height: 20px;
}

QScrollBar::add-line:vertical {
    height: 26px;
    subcontrol-position: bottom;
}

QScrollBar::sub-line:vertical {
    height: 26px;
    subcontrol-position: top;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

QScrollArea {
    border:0;
    background:rgb(64,64,71);
}

#水平滚动条
QScrollBar:horizontal {
    height:12px;
    border:1px solid black;
    border-color:black;
    margin:0px,0px,0px,0px;
    padding-left:10px;
    padding-right:10px;
}

QScrollBar::handle:horizontal {
    height:16px;
    min-width:20;
    background:#232329;
    border:1px solid #525252;
}
QScrollBar::handle:horizontal::disabled {
    background:#232329;
}
QScrollBar::handle:horizontal:hover {
    background:#232329;
    border:1px solid #E0E0E0;
}
QScrollBar::add-line:horizontal {
    width:10px;
    background:#121215;
    subcontrol-position:right;
}
QScrollBar::sub-line:horizontal {
    width:10px;
    background:#121215;
    subcontrol-position:left;
}
QScrollBar::add-page:horizontal {
    background:#454551;
}
QScrollBar::sub-page:horizontal {
    background:#454551;
}
QScrollBar::up-arrow:horizontal {
    border-width:1px;
    max-height:16px;
    min-width:17px;
}
QScrollBar::down-arrow:horizontal {
    border-style:outset;
    border-width:1px;
}

QScrollBar使用图片：

/*垂直滚动条*/
QScrollBar:vertical {
    background: url(images/scrollbar-vertical-bg.png);
    width: 9px;
    margin: 0px 0 0px 0;
}
QScrollBar::handle:vertical {
    background: rgb(195, 195, 195);
    min-height: 20px;
    margin: 0 1px 0 2px;
    border-radius: 3px;
    border: none;
    /*background: qlineargradient(spread:reflect, 
        x1:0, y1:0, x2:1, y2:0, 
        stop:0 rgba(164, 164, 164, 255), 
        stop:0.5 rgba(120, 120, 120, 255),
        stop:1 rgba(164, 164, 164, 255));*/
    /*border-image: url(images/scrollbar-vertical-thumb.png) 8px 0 8px 0 fixed;*/
}

QScrollBar::add-line:vertical {
    background: url(images/scrollbar-vertical-bg.png);
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical {
    background: url(images/scrollbar-vertical-bg.png);
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 1px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}

QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

/*
 水平滚动条
*/
QScrollBar:horizontal {
    background: url(images/scrollbar-horizontal-bg.png);
    height: 9px;
    margin: 0px 0 0px 0;
}
QScrollBar::handle:horizontal {
    background: rgb(195, 195, 195);
    min-width: 20px;
    margin: 2px 0px 1px 0px;
    border-radius: 3px;
    border: none;
}
QScrollBar::add-line:horizontal {
    border: 0px solid grey;
    background: #32CC99;
    width: 0px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 0px solid grey;
    background: #32CC99;
    width: 0px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

三、总结

（1）源码已上传到csdn：http://download.csdn.net/detail/taiyang1987912/9323215。
（2）该界面与原博友的界面差距还有比较大，仅用于测试使用。
（3）若有建议，请留言，在此先感谢！