QT custom beautiful skinning interface

I have developed many projects with QT one after another , and I have also used QT to write many private projects and N tools. I have always dreamed of having a custom interface that is as convenient as VC . The power of QSS makes me see When I got to a good hope, I went to Baidu and Google countless times, and I have been searching for QT -related skinning articles. Most of them are simple button text styles. It is almost impossible to achieve the overall skinning level . The struggling children in the QTCN forum I wrote a series of imitation 360 security guards, which made me both pleasantly surprised and regretful. I was pleasantly surprised to be able to use QT to implement such a complete 360 ​​security guard interface. The VC version, for me who has been obsessed with using Qt Creator  to develop, I don't like it very much. There are so many complex project files, and it is even more awkward for me who pursues simplicity and beauty. Of course, the reference value of source code learning is still very high. , but I don't really like it. I have seen slientman 's QT overall skinning scheme one after another, link address: http://blog.csdn.net/slientman/article/details/5618950 also from CSDNI downloaded the executable file, and I don't know if the author was careless or intentional, but there is no QT runtime library, which caused me to try several versions of the runtime library on my computer. I plan to open source, this is another glimpse in my heart for me who likes to share, but I still added the author QQ with sincerity, and I am willing to buy a set at my own expense. Later, in the blog garden, I saw 24K pure open source ( http://www.cnblogs.com/csuftzzk/ ), literary IT man ( http://www.cnblogs.com/appsucc/ ),  liulun ( http://www.cnblogs.com/appsucc/ ) www.cnblogs.com/liulun/ ) and other similar tools written by several heroes, especially this article ( http://www.cnblogs.com/liulun/p/3775294.html ) made me realize that there are Fontawesome is a good thing, I really thank the author!

After reading so many custom articles, I started my own QUI writing process. At the beginning, I imagined that I would refer to this article http://www.cnblogs.com/appsucc/p/3257661.html to develop and package it into a DLL , which provides an external interface to call the form that needs to be skinned. After the development is completed, it is found that there will still be a series of problems. For example, when the main form needs to be closed, it is necessary to call a similar method of this.parent().close(). The form can only be closed, and it must be a QWidget to be added to the subform. When there is a related QDialog form that needs to give a return value, it is not convenient to provide a method such as done ( 1 ) to return, and this method is simply abandoned later. This method is still called by the QSS style. The relevant styles have been written in the style sheet. There are only five colors, using two gradient colors up and down, two kinds of normal , two kinds of hover (select, focus , etc. ) , and One is the text color. Just replace these five colors with the corresponding style sheet. Of course, most of the time, four colors are replaced. The default text color is white, and most of the gradient colors are used. 

Core processing part:

1 : Borderless form processing

Install the eventFilter event listener on the title bar to monitor the mouse double-click event, and overload the three events of mouseMoveEvent , mousePressEvent and mouseReleaseEvent to realize mouse dragging. When the form changes size, you must use QRect location; to remember the current form position, which is convenient for pressing Sets the form to its pre-maximized position when restoring the button in the upper right corner.

Part of the code is as follows:

bool frmMain::eventFilter(QObject *obj, QEvent *event)
{
    if (event->type() == QEvent::MouseButtonDblClick) {
        this->on_btnMenu_Max_clicked();
        return true;
    }
    return QObject::eventFilter(obj, event);
}
 
void frmMain::mouseMoveEvent(QMouseEvent *e)
{
    if (mousePressed && (e->buttons() && Qt::LeftButton) && !max) {
        this->move(e->globalPos() - mousePoint);
        e->accept();
    }
}
 
void frmMain::mousePressEvent(QMouseEvent *e)
{
    if (e->button() == Qt::LeftButton) {
        mousePressed = true;
        mousePoint = e->globalPos() - this->pos();
        e->accept();
    }
}
 
void frmMain::mouseReleaseEvent(QMouseEvent *)
{
    mousePressed = false;
}

2 : Use of graphic fonts

The IconHelper class on the Internet is directly used here , and I don't know who the original author is. Anyway, the code is only a few lines, it is not difficult.

Post CPP implementation file code

#include "iconhelper.h"
 
IconHelper* IconHelper::_instance = 0;
IconHelper::IconHelper(QObject*):
    QObject(qApp)
{
    int fontId = QFontDatabase::addApplicationFont(":/image/fontawesome-webfont.ttf");
    QString fontName = QFontDatabase::applicationFontFamilies(fontId).at(0);
    iconFont = QFont(fontName);
}
 
void IconHelper::SetIcon(QLabel* lab, QChar c, int size)
{
    iconFont.setPointSize(size);
    lab->setFont(iconFont);
    lab->setText(c);
}
 
void IconHelper::SetIcon(QPushButton* btn, QChar c, int size)
{
    iconFont.setPointSize(size);
    btn->setFont(iconFont);
    btn->setText(c);
}

This can be called in the constructor of the main form.

IconHelper::Instance()->SetIcon(ui->btnMenu_Close, QChar(0xf00d), 10);

The maximize button in the upper right corner will have two icons, one when maximized and one when restored, so this is handled in the event here.

void frmMain::on_btnMenu_Max_clicked()
{
    if (max) {
        this->setGeometry(location);
        IconHelper::Instance()->SetIcon(ui->btnMenu_Max, QChar(0xf096), 10);
        ui->btnMenu_Max->setToolTip("Maximize");
    } else {
        location = this->geometry();
        this->setGeometry(qApp->desktop()->availableGeometry());
        IconHelper::Instance()->SetIcon(ui->btnMenu_Max, QChar(0xf079), 10);
        ui->btnMenu_Max->setToolTip("Restore");
    }
    max = !max;
}

3 : Customize pop-up information box, query box, error box

我比较偷懒,直接用新建的UI窗体来实现,对信息框、询问框、错误框的判断直接在setmessage函数中处理。

void frmMessageBox::SetMessage(const QString &msg, int type)
{
    if (type == 0) {
        ui->labIcoMain->setStyleSheet("border-image: url(:/image/info.png);");
        ui->btnCancel->setVisible(false);
        ui->lab_Title->setText("提示");
    } else if (type == 1) {
        ui->labIcoMain->setStyleSheet("border-image: url(:/image/question.png);");
        ui->lab_Title->setText("询问");
    } else if (type == 2) {
        ui->labIcoMain->setStyleSheet("border-image: url(:/image/error.png);");
        ui->btnCancel->setVisible(false);
        ui->lab_Title->setText("错误");
    }
 
    ui->labInfo->setText(msg);
}

4:设置全局皮肤样式

//设置皮肤样式
    static void SetStyle(const QString &styleName)
    {
        QFile file(QString(":/image/%1.css").arg(styleName));
        file.open(QFile::ReadOnly);
        QString qss = QLatin1String(file.readAll());
        qApp->setStyleSheet(qss);
        qApp->setPalette(QPalette(QColor("#F0F0F0")));
    }

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325687145&siteId=291194637