Hoja de estilo Qt: cambiar tema

En primer lugar, recomiendo el software "qss designer" de este hermano mayor: QT- Smart QSS designer

Esta herramienta puede cambiar entre diferentes temas. Este software no es de código abierto, pero puede implementar la misma función de cambio de tema de acuerdo con algunos métodos.

Por ejemplo, para un botón, los siguientes tres colores se establecen en el estado habitual: el color normal, el color presionado y el mouse sobre el color pueden tener efectos interactivos dinámicos:

El estilo de este botón se establece de la siguiente manera:

QPushButton
{
	border-style: none;
	border: 0px;
	color: #FFFFFF;
	padding: 5px;	
	border-radius:5px;
	background: #00bcd4;
}

QPushButton:hover
{ 
	background: #24d4e0
}

QPushButton:pressed
{ 
	background: #0296ad;
}

Se puede encontrar que si desea cambiar su color, solo necesita cambiar la propiedad "background", no es necesario cambiar otras propiedades, ajustes adicionales:

QString style_main_color = "00bcd4";
QString style_hover_color = "24d4e0";
QString style_press_color = "0296ad";

QString btnStyle = QString("QPushButton{border-style: none;border: 0px;color: #FFFFFF;padding: 5px;border-radius:5px;background: #%1;}"
                           "QPushButton:hover{background: #%2;}"
                           "QPushButton:pressed{background: #%3;}").arg(style_hover_color).arg(style_hover_color).arg(style_press_color);

De esta manera, siempre que modifique los valores de los 3 colores y configure la hoja de estilo cada vez, puede lograr el efecto de cambiar de tema.

El principio es así, la operación específica es la siguiente:

Según el software "qss Designer" como punto de referencia, define un tema que requiere que se establezcan cinco colores:

Esto se define como:

QString style_main_color;//主颜色
QString style_hover_color;//鼠标滑过颜色(主要是按钮)
QString style_press_color;//鼠标按下颜色(主要是按钮)
QString style_item_select_color;//项目选中颜色(如QTreeView、QTableWidget等选中项目的颜色)
QString style_item_hover_color;//鼠标滑过(QTreeView、QTableWidget等)项目的颜色

1. Registre un evento de cambio de tema personalizado:

extern int STYLE_CHANGE_EVENT;//事件id

class style_change_event : public QEvent
{
public:
    style_change_event();
    virtual ~style_change_event();
    enum mystyle
    {
        Turquoise,//蓝绿色
        Orange,//橙色
        Pink,//粉色
        Red,//红色
        Coffee,//咖啡色
        Blue_Grey,//蓝灰色
        Blue,//蓝色
        Green,//绿色
        Lavender,//紫色
        Arctic_Glacier,//北极冰川
        Custom//自定义
    };
    mystyle get_style()
    {
        return now_style;
    }

    void set_style(mystyle style)
    {
        now_style = style;
    }

    void set_color_list(QStringList list)
    {
        color_list = list;
    }

    QStringList get_color_list()
    {
        return color_list;
    }

private:
    mystyle now_style;
    QStringList color_list;
};
int STYLE_CHANGE_EVENT = QEvent::registerEventType();

style_change_event::style_change_event():
    QEvent (QEvent::Type(STYLE_CHANGE_EVENT))
{
}

style_change_event::~style_change_event()
{}

2. Genere un evento en el lugar correcto:

    style_change_event * event = new style_change_event;
    event->set_style(style_change_event::Turquoise);//选择蓝绿色主题
    qApp->postEvent(this, event);

3. Maneje el evento de cambio de tema en el filtro de eventos:

bool MainWindow::eventFilter(QObject *watched, QEvent *event)
{ 
    if(event->type() == STYLE_CHANGE_EVENT)//主题改变
    {
        style_change_event * e = dynamic_cast<style_change_event*>(event);
        if(e)
        {
            int type = e->get_style();
            switch (type)
            {
                case style_change_event::Turquoise : //蓝绿色
                {
                    style_main_color = "00beac";
                    style_hover_color = "20c9b3";
                    style_item_hover_color = "cafcef";
                    style_item_select_color = "9aefdb";
                    style_press_color = "01968c";
                }
                break;
                case style_change_event::Orange: //橙色
                {
                    style_main_color = "ff9800";
                    style_hover_color = "fcab28";
                    style_item_hover_color = "fcf0ca";
                    style_item_select_color = "fce3a2";
                    style_press_color = "d87802";
                }
                break;
                case style_change_event::Pink://粉红色
                {
                    style_main_color = "ec62a1";
                    style_hover_color = "f78fbd";
                    style_item_hover_color = "fcf1f4";
                    style_item_select_color = "fcf1f5";
                    style_press_color = "c44987";
                }
                break;//红色
                case style_change_event::Red:
                {
                    style_main_color = "f45e63";
                    style_hover_color = "fc8b8d";
                    style_item_hover_color = "fcf1f1";
                    style_item_select_color = "fcf1f1";
                    style_press_color = "cc454e";
                }
                break;
                case style_change_event::Coffee://咖啡色
                {
                    style_main_color = "8c6450";
                    style_hover_color = "967d6f";
                    style_item_hover_color = "c9c5c0";
                    style_item_select_color = "bcb7b3";
                    style_press_color = "634235";
                }
                break;
                case style_change_event::Blue_Grey://蓝灰色
                {
                    style_main_color = "507ea4";
                    style_hover_color = "7296af";
                    style_item_hover_color = "d8dfe2";
                    style_item_select_color = "ccd3d6";
                    style_press_color = "375a7c";
                }
                break;
                case style_change_event::Blue://蓝色
                {
                    style_main_color = "00bcd4";
                    style_hover_color = "24d4e0";
                    style_item_hover_color = "cafcf9";
                    style_item_select_color = "a2fcf9";
                    style_press_color = "0296ad";
                }
                break;
                case style_change_event::Green://绿色
                {
                    style_main_color = "79be3c";
                    style_hover_color = "97c961";
                    style_item_hover_color = "f8fcf1";
                    style_item_select_color = "ebefe4";
                    style_press_color = "5a9628";
                }
                break;
                case style_change_event::Lavender://淡紫色
                {
                    style_main_color = "7467b9";
                    style_hover_color = "988dc4";
                    style_item_hover_color = "efecf7";
                    style_item_select_color = "e2dfea";
                    style_press_color = "534a91";
                }
                break;
                case style_change_event::Arctic_Glacier://北极冰川
                {
                    style_main_color = "45b0c4";
                    style_hover_color = "6bc3ce";
                    style_item_hover_color = "f1fcfc";
                    style_item_select_color = "e9f4f4";
                    style_press_color = "30889b";
                }
                break;
                case style_change_event::Custom://自定义主题
                {
                    QStringList list = e->get_color_list();
                    style_main_color = list.at(0);
                    style_hover_color = list.at(1);
                    style_item_hover_color = list.at(2);
                    style_item_select_color = list.at(3);
                    style_press_color = list.at(4);
                }
                break;
            }
        }
    }
}

Una vez que haya obtenido los 5 colores de tema correspondientes, puede configurar la hoja de estilo. 

Además de los temas fijos, también hay temas personalizados aquí. Los temas personalizados mostrarán una ventana de selección de color para que los usuarios elijan colores:

    QColor c = colorDlg.currentColor();
    if(c.isValid())//QColor转QString
    {
        QString mRgbStr = QString::number(qRgb(c.red(),c.green(),c.blue()),16).right(6);//ARGB 第一个是透明度
    }

Almacene 5 colores seleccionados en QStringList y luego genere objetos de evento:

//设置自定义主题
void set_custom_theme(const QStringList & list)
{
    if(list.size() != 5)
        return;
    style_change_event * event = new style_change_event;
    event->set_style(style_change_event::Custom);
    event->set_color_list(list);
    qApp->postEvent(this, event);
}

No es necesario utilizar un método de evento personalizado, pero aquí debe establecer un tema personalizado. Los eventos generados por el tema personalizado y los eventos generados en otras ubicaciones se unifican en el filtro de eventos para su procesamiento. El efecto de cambiar el tema se puede ver: https://blog.csdn.net/kenfan1647/article/details/109373355

Supongo que te gusta

Origin blog.csdn.net/kenfan1647/article/details/114391479
Recomendado
Clasificación