Qt样式表：切换主题

首先推荐这位大佬的软件《qss设计器》：QT-智能QSS设计器

这个工具可以切换不同的主题，这个软件没有开源不过可以根据一些方法实现和它一样的切换主题功能。

比如一个按钮，通常状态下设置以下三种颜色：普通的颜色、按下的颜色、鼠标滑过的颜色就可以具备动态的交互效果：

此按钮的样式设置如下：

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

QPushButton:hover
{ 
	background: #24d4e0
}

QPushButton:pressed
{ 
	background: #0296ad;
}

可以发现如果要改变它的颜色那只需要改变“background”属性，其他的属性不用改变，进一步调整：

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);

这样每次只要修改3种颜色的值再设置样式表就可以做到切换主题的效果。

原理就是这样，具体操作如下：

根据《qss设计器》这个软件为基准，它定义了一种主题需要设置五种颜色：

这里定义为：

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、注册一个自定义主题切换事件：

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、在合适的地方生成一个事件：

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

3、在事件过滤器处理主题切换事件：

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;
            }
        }
    }
}

获得了5种相应的主题颜色就可以用来设置样式表了。

这里除了固定的主题外还有自定义主题，自定义主题即弹出颜色选择窗口让用户自己选择颜色：

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

将5种选择的颜色存入QStringList，然后生成事件对象：

//设置自定义主题
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);
}

不一定非要使用自定义事件的方式，只是这里要设置自定义主题，自定义主题生成的事件和在其他位置生成事件统一在事件过滤器处理比较方便而已。切换主题的效果可以查看：https://blog.csdn.net/kenfan1647/article/details/109373355

Qt样式表：切换主题

猜你喜欢