Qtスタイルシート：テーマの切り替え

まず第一に、私はこの兄貴のソフトウェア「qssデザイナー」をお勧めします：QT-スマートQSSデザイナー

このツールは異なるテーマを切り替えることができます。このソフトウェアはオープンソースではありませんが、いくつかの方法に従って同じテーマ切り替え機能を実装できます。

たとえば、ボタンの場合、次の3つの色が通常の状態で設定されます。通常の色、押された色、およびマウスオーバーの色は、動的なインタラクティブ効果を持つことができます。

このボタンのスタイルは次のように設定されています。

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色の値を変更し、毎回スタイルシートを設定する限り、テーマを切り替える効果を得ることができます。

原理はこんな感じで、具体的な操作は以下の通りです。

ベンチマークとしてのソフトウェア「qssDesigner」によると、5つの色を設定する必要があるテーマを定義しています。

これは次のように定義されます。

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スタイルシート：テーマの切り替え

おすすめ