QSS实现登录页面 封装

QSS（Qt Style Sheets）是Qt中用于设置控件样式的一种语言，它可以通过一系列的属性和值来控制控件的外观。在实现登录页面时，可以使用QSS来设置控件的样式，从而实现页面的美化和定制。

以下是一个简单的登录页面的QSS样式封装示例：

// login.qss

/* 设置窗口背景 */
QWidget#loginWindow {
    background-color: #F5F5F5;
}

/* 设置标题栏 */
QLabel#titleLabel {
    font-size: 24px;
    font-weight: bold;
}

/* 设置用户名输入框 */
QLineEdit#usernameEdit {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    height: 30px;
    padding: 5px;
}

/* 设置密码输入框 */
QLineEdit#passwordEdit {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    height: 30px;
    padding: 5px;
}

/* 设置登录按钮 */
QPushButton#loginButton {
    background-color: #007ACC;
    border: none;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: bold;
    height: 40px;
    margin-top: 20px;
}

/* 设置提示文本 */
QLabel#tipLabel {
    color: #FF0000;
    font-size: 12px;
}

/* 设置链接文本 */
QLabel#linkLabel {
    color: #007ACC;
    font-size: 12px;
    text-decoration: underline;
}

在应用这个QSS样式时，只需要将其加载到应用程序中并应用于对应的控件即可：

// main.cpp

#include <QApplication>
#include <QFile>

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

    // 加载QSS样式
    QFile qssFile(":/qss/login.qss");
    qssFile.open(QFile::ReadOnly);
    QString qss = QString(qssFile.readAll());
    qssFile.close();

    // 应用QSS样式
    app.setStyleSheet(qss);

    // 创建登录页面窗口
    LoginWindow loginWindow;

    // 显示窗口
    loginWindow.show();

    return app.exec();
}

// loginwindow.h

#include <QWidget>
#include <QLabel>
#include <QLineEdit>
#include <QPushButton>

class LoginWindow : public QWidget
{
    Q_OBJECT

public:
    LoginWindow(QWidget *parent = nullptr);
    ~LoginWindow();

private:
    QLabel *m_titleLabel;
    QLineEdit *m_usernameEdit;
    QLineEdit *m_passwordEdit;
    QPushButton *m_loginButton;
    QLabel *m_tipLabel;
    QLabel *m_linkLabel;
};

// loginwindow.cpp

#include "loginwindow.h"

LoginWindow::LoginWindow(QWidget *parent)
    : QWidget(parent)
{
    // 设置窗口属性
    setObjectName("loginWindow");
    setWindowTitle("登录");
    setFixedSize(400, 300);

    // 创建控件
    m_titleLabel = new QLabel("登录", this);
    m_titleLabel->setObjectName("titleLabel");
    m_titleLabel->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);
    m_titleLabel->setGeometry(0, 50, 400, 50);

    m_usernameEdit = new QLineEdit(this);
    m_usernameEdit->setObjectName("usernameEdit");
    m_usernameEdit->setPlaceholderText("请输入用户名");
    m_usernameEdit->setGeometry(50, 120, 300, 30);

    m_passwordEdit = new QLineEdit(this);
    m_passwordEdit->setObjectName("passwordEdit");
    m_passwordEdit->setPlaceholderText("请输入密码");
    m_passwordEdit->setEchoMode(QLineEdit::Password);
    m_passwordEdit->setGeometry(50, 170, 300, 30);

    m_loginButton = new QPushButton("登录", this);
    m_loginButton->setObjectName("loginButton");
    m_loginButton->setGeometry(50, 220, 300, 40);

    m_tipLabel = new QLabel("用户名或密码错误", this);
    m_tipLabel->setObjectName("tipLabel");
    m_tipLabel->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);
    m_tipLabel->setGeometry(50, 270, 300, 20);
    m_tipLabel->hide();

    m_linkLabel = new QLabel("<a href='#'>忘记密码？</a>", this);
    m_linkLabel->setObjectName("linkLabel");
    m_linkLabel->setOpenExternalLinks(false);
    m_linkLabel->setAlignment(Qt::AlignHCenter | Qt::AlignVCenter);
    m_linkLabel->setGeometry(50, 300, 300, 20);

    // 连接信号槽
    connect(m_loginButton, &QPushButton::clicked, [=]() {
        QString username = m_usernameEdit->text();
        QString password = m_passwordEdit->text();

        if (username == "admin" && password == "admin") {
            m_tipLabel->hide();
            // 登录成功，跳转到主页面
            // ...
        } else {
            m_tipLabel->show();
        }
    });
}

LoginWindow::~LoginWindow()
{
}

以上是QSS实现登录页面的简单示例。在实际开发中，可以根据需要定制更多的控件样式，并将其封装在QSS文件中，以实现页面的美化和定制。