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 C++ ,同样可以使用样式表(QSS)来实现主题切换,具体方法如下: 1. 创建样式表:使用 Qt Designer 或手动创建一个样式表文件(.qss),其包含您要应用于应用程序的各种样式和属性。 2. 加载样式表:在应用程序加载样式表文件。可以使用 `QApplication` 或 `QWidget` 的 `setStyleSheet()` 方法来加载样式表。 3. 实现主题切换:您可以使用 `setStyleSheet()` 方法来动态更改应用程序的样式表,以实现主题切换。可以在应用程序定义多个样式表,然后通过按钮或菜单等控件触发事件来切换样式表。 以下是一个简单的示例代码,演示了如何在 Qt C++ 应用程序切换主题: ```c++ #include <QApplication> #include <QMainWindow> #include <QPushButton> class MainWindow : public QMainWindow { Q_OBJECT public: MainWindow(QWidget *parent = 0) : QMainWindow(parent) { // 创建按钮 QPushButton *button = new QPushButton("切换主题", this); button->setGeometry(50, 50, 100, 50); // 为按钮添加事件处理程序 connect(button, &QPushButton::clicked, this, &MainWindow::toggleTheme); // 加载默认样式表 QFile file("default.qss"); file.open(QFile::ReadOnly); QString styleSheet = QLatin1String(file.readAll()); qApp->setStyleSheet(styleSheet); } public slots: void toggleTheme() { // 切换样式表 if (qApp->styleSheet().isEmpty()) { QFile file("dark.qss"); file.open(QFile::ReadOnly); QString styleSheet = QLatin1String(file.readAll()); qApp->setStyleSheet(styleSheet); } else { qApp->setStyleSheet(""); } } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); MainWindow window; window.show(); return app.exec(); } ``` 在此示例代码,我们创建了一个按钮,当用户单击该按钮时,将切换应用程序的主题。我们使用 `setStyleSheet()` 方法来加载默认样式表,并使用 `toggleTheme()` 方法来切换样式表。在 `toggleTheme()` 方法,我们检查当前样式表是否为空,如果为空,则加载一个新的样式表(dark.qss),否则将样式表设置为空字符串。 需要注意的是,在 Qt C++ 样式表文件必须使用 `QLatin1String()` 函数将其内容转换为 `QString` 类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值