Qt はカスタム コントロールを作成します - flatten flatui

開発 2023-09-16 01:33:16 訪問数: null

I.はじめに

現在のフロントエンド開発者にとって、FlatUI は決して珍しいものではありません。近年、フラット デザインはますます人気が高まっています。PC やモバイル デバイスの解像度がますます高くなっているためか、フラット デザインはより魅力的に見えます。人々は幸せです。 、そしてグラデーションカラーによって生成されたテクスチャカラーは、フラットカラーほどフレンドリーではありません。


Flat UI は二次開発用の Bootstrap をベースにしたフラットなフロントエンド フレームワークで、ダイナミックでファッショナブルなスタイルとカラー マッチング、シンプルで魅力的な機能コンポーネントを提供し、よりスムーズな JS インタラクティブ アニメーションも提供します。フロントエンドのフラットデザインフレームワーク。


フラット デザイン フレームワークを代表する優れたフレームワークなので、当然自分のプロジェクトにも適用する必要がありますが、最初は VB 開発を使用し、次に C# 開発に切り替え、最後に Qt 開発に切り替えました。会社のプロジェクトに参加し、必要に応じて新しいプロジェクトを学び続けました。プログラミング フレームワークと言語はすべてつながっています。1 つの例を他のケースにも適用してください。以前 C# で書かれた vista の時計コントロールと vista カレンダー コントロールは、C# で書かれた対応するコントロールに転送されました。 Qt に少し変更を加えたものです。とても便利です。アイデアをマスターして言語に熟達していれば、フレームワークを学べば、他のこともすぐに学ぶことができます。


Qt の qss の仕組みは css によく似ています。css から生まれたような気がします。qss を使って Qt のインターフェース スタイルを実装するのは一般的には便利ではありませんが、非常に新鮮です。FlatUI などの絶妙なフラット デザイン スタイルを見た後では、手のかゆみを抑えるために、qssを使用して同様のスタイルを実現したいと考えています。

オープンソースのアドレス: https://gitee.com/feiyangqingyun/QWidgetDemo https://github.com/feiyangqingyun/QWidgetDemo

2. 実装された機能

  • 1:ボタンスタイル設定
  • 2：テキストボックスのスタイル設定
  • 3: プログレスバーのスタイル
  • 4: スライダーバーのスタイル
  • 5: ラジオボタンのスタイル
  • 6:スクロールバースタイル
  • 7：オブジェクトの高さ、幅などを自由に設定できる
  • 8: デフォルトのパラメータ値が付属しています

3.エフェクト描画

この記事の特典として、Qt 開発学習パッケージと技術ビデオ (C++ 言語の基礎、Qt プログラミングの概要、QT シグナルとスロットのメカニズム、QT インターフェイス開発イメージの描画、QT ネットワーク、QT データベース) を無料で受け取ることができます。プログラミング、QT プロジェクトの実践、QT 組み込み開発、Quick モジュールなど） ↓↓↓↓下記参照↓↓料金受け取りは記事下部をクリック↓↓

4. ヘッダファイルのコード

#ifndef FLATUI_H
#define FLATUI_H

/**
 * FlatUI辅助类 作者:feiyangqingyun(QQ:517216493) 2016-12-16
 * 1:按钮样式设置
 * 2:文本框样式设置
 * 3:进度条样式
 * 4:滑块条样式
 * 5:单选框样式
 * 6:滚动条样式
 * 7:可自由设置对象的高度宽度大小等
 * 8:自带默认参数值
 */

#include <QObject>

class QPushButton;
class QLineEdit;
class QProgressBar;
class QSlider;
class QRadioButton;
class QCheckBox;
class QScrollBar;

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT FlatUI : public QObject
#else
class FlatUI : public QObject
#endif

{
    Q_OBJECT
public:
    static FlatUI *Instance();
    explicit FlatUI(QObject *parent = 0);    

private:
    static QScopedPointer<FlatUI> self;

public:
    //设置按钮样式
    static QString setPushButtonQss(QPushButton *btn,                               //按钮对象
                                    int radius = 5,                                 //圆角半径
                                    int padding = 8,                                //间距
                                    const QString &normalColor = "#34495E",         //正常颜色
                                    const QString &normalTextColor = "#FFFFFF",     //文字颜色
                                    const QString &hoverColor = "#4E6D8C",          //悬停颜色
                                    const QString &hoverTextColor = "#F0F0F0",      //悬停文字颜色
                                    const QString &pressedColor = "#2D3E50",        //按下颜色
                                    const QString &pressedTextColor = "#B8C6D1");   //按下文字颜色

    //设置文本框样式
    static QString setLineEditQss(QLineEdit *txt,                                   //文本框对象
                                  int radius = 3,                                   //圆角半径
                                  int borderWidth = 2,                              //边框大小
                                  const QString &normalColor = "#DCE4EC",           //正常颜色
                                  const QString &focusColor = "#34495E");           //选中颜色

    //设置进度条样式
    static QString setProgressQss(QProgressBar *bar,
                                     int barHeight = 8,                             //进度条高度
                                     int barRadius = 5,                             //进度条半径
                                     int fontSize = 9,                              //文字字号
                                     const QString &normalColor = "#E8EDF2",        //正常颜色
                                     const QString &chunkColor = "#E74C3C");        //进度颜色

    //设置滑块条样式
    static QString setSliderQss(QSlider *slider,                                    //滑动条对象
                                int sliderHeight = 8,                               //滑动条高度
                                const QString &normalColor = "#E8EDF2",             //正常颜色
                                const QString &grooveColor = "#1ABC9C",             //滑块颜色
                                const QString &handleBorderColor = "#1ABC9C",       //指示器边框颜色
                                const QString &handleColor = "#FFFFFF");            //指示器颜色

    //设置单选框样式
    static QString setRadioButtonQss(QRadioButton *rbtn,                            //单选框对象
                                     int indicatorRadius = 8,                       //指示器圆角角度
                                     const QString &normalColor = "#D7DBDE",        //正常颜色
                                     const QString &checkColor = "#34495E");        //选中颜色

    //设置滚动条样式
    static QString setScrollBarQss(QWidget *scroll,                                 //滚动条对象
                                   int radius = 6,                                  //圆角角度
                                   int min = 120,                                   //指示器最小长度
                                   int max = 12,                                    //滚动条最大长度
                                   const QString &bgColor = "#606060",              //背景色
                                   const QString &handleNormalColor = "#34495E",    //指示器正常颜色
                                   const QString &handleHoverColor = "#1ABC9C",     //指示器悬停颜色
                                   const QString &handlePressedColor = "#E74C3C");  //指示器按下颜色
};

#endif // FLATUI_H

5. コアコード

#pragma execution_character_set("utf-8")

#include "flatui.h"
#include "qmutex.h"
#include "qpushbutton.h"
#include "qlineedit.h"
#include "qprogressbar.h"
#include "qslider.h"
#include "qradiobutton.h"
#include "qcheckbox.h"
#include "qscrollbar.h"
#include "qdebug.h"

QScopedPointer<FlatUI> FlatUI::self;
FlatUI *FlatUI::Instance()
{
    if (self.isNull()) {
        static QMutex mutex;
        QMutexLocker locker(&mutex);
        if (self.isNull()) {
            self.reset(new FlatUI);
        }
    }

    return self.data();
}

FlatUI::FlatUI(QObject *parent) : QObject(parent)
{

}

QString FlatUI::setPushButtonQss(QPushButton *btn, int radius, int padding,
                                    const QString &normalColor,
                                    const QString &normalTextColor,
                                    const QString &hoverColor,
                                    const QString &hoverTextColor,
                                    const QString &pressedColor,
                                    const QString &pressedTextColor)
{
    QStringList list;
    list.append(QString("QPushButton{border-style:none;padding:%1px;border-radius:%2px;color:%3;background:%4;}")
                .arg(padding).arg(radius).arg(normalTextColor).arg(normalColor));
    list.append(QString("QPushButton:hover{color:%1;background:%2;}")
                .arg(hoverTextColor).arg(hoverColor));
    list.append(QString("QPushButton:pressed{color:%1;background:%2;}")
                .arg(pressedTextColor).arg(pressedColor));

    QString qss = list.join("");
    btn->setStyleSheet(qss);
    return qss;
}

QString FlatUI::setLineEditQss(QLineEdit *txt, int radius, int borderWidth,
                                  const QString &normalColor,
                                  const QString &focusColor)
{
    QStringList list;
    list.append(QString("QLineEdit{border-style:none;padding:3px;border-radius:%1px;border:%2px solid %3;}")
                .arg(radius).arg(borderWidth).arg(normalColor));
    list.append(QString("QLineEdit:focus{border:%1px solid %2;}")
                .arg(borderWidth).arg(focusColor));

    QString qss = list.join("");
    txt->setStyleSheet(qss);
    return qss;
}

QString FlatUI::setProgressQss(QProgressBar *bar, int barHeight,
                                     int barRadius, int fontSize,
                                     const QString &normalColor,
                                     const QString &chunkColor)
{

    QStringList list;
    list.append(QString("QProgressBar{font:%1pt;background:%2;max-height:%3px;border-radius:%4px;text-align:center;border:1px solid %2;}")
                .arg(fontSize).arg(normalColor).arg(barHeight).arg(barRadius));
    list.append(QString("QProgressBar:chunk{border-radius:%2px;background-color:%1;}")
                .arg(chunkColor).arg(barRadius));

    QString qss = list.join("");
    bar->setStyleSheet(qss);
    return qss;
}

QString FlatUI::setSliderQss(QSlider *slider, int sliderHeight,
                                const QString &normalColor,
                                const QString &grooveColor,
                                const QString &handleBorderColor,
                                const QString &handleColor)
{
    int sliderRadius = sliderHeight / 2;
    int handleWidth = (sliderHeight * 3) / 2 + (sliderHeight / 5);
    int handleRadius = handleWidth / 2;
    int handleOffset = handleRadius / 2;

    QStringList list;
    list.append(QString("QSlider::horizontal{min-height:%1px;}").arg(sliderHeight * 2));
    list.append(QString("QSlider::groove:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(normalColor).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::add-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(normalColor).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::sub-page:horizontal{background:%1;height:%2px;border-radius:%3px;}")
                .arg(grooveColor).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::handle:horizontal{width:%3px;margin-top:-%4px;margin-bottom:-%4px;border-radius:%5px;"
                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 %1,stop:0.8 %2);}")
                .arg(handleColor).arg(handleBorderColor).arg(handleWidth).arg(handleOffset).arg(handleRadius));

    //偏移一个像素
    handleWidth = handleWidth + 1;
    list.append(QString("QSlider::vertical{min-width:%1px;}").arg(sliderHeight * 2));
    list.append(QString("QSlider::groove:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(normalColor).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::add-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(grooveColor).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::sub-page:vertical{background:%1;width:%2px;border-radius:%3px;}")
                .arg(normalColor).arg(sliderHeight).arg(sliderRadius));
    list.append(QString("QSlider::handle:vertical{height:%3px;margin-left:-%4px;margin-right:-%4px;border-radius:%5px;"
                        "background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,stop:0.6 %1,stop:0.8 %2);}")
                .arg(handleColor).arg(handleBorderColor).arg(handleWidth).arg(handleOffset).arg(handleRadius));

    QString qss = list.join("");
    slider->setStyleSheet(qss);
    return qss;
}

QString FlatUI::setRadioButtonQss(QRadioButton *rbtn, int indicatorRadius,
                                     const QString &normalColor,
                                     const QString &checkColor)
{
    int indicatorWidth = indicatorRadius * 2;

    QStringList list;
    list.append(QString("QRadioButton::indicator{border-radius:%1px;width:%2px;height:%2px;}")
                .arg(indicatorRadius).arg(indicatorWidth));
    list.append(QString("QRadioButton::indicator::unchecked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,"
                        "stop:0.6 #FFFFFF,stop:0.7 %1);}").arg(normalColor));
    list.append(QString("QRadioButton::indicator::checked{background:qradialgradient(spread:pad,cx:0.5,cy:0.5,radius:0.5,fx:0.5,fy:0.5,"
                        "stop:0 %1,stop:0.3 %1,stop:0.4 #FFFFFF,stop:0.6 #FFFFFF,stop:0.7 %1);}").arg(checkColor));

    QString qss = list.join("");
    rbtn->setStyleSheet(qss);
    return qss;
}

QString FlatUI::setScrollBarQss(QWidget *scroll, int radius, int min, int max,
                                   const QString &bgColor,
                                   const QString &handleNormalColor,
                                   const QString &handleHoverColor,
                                   const QString &handlePressedColor)
{
    //滚动条离背景间隔
    int padding = 0;

    QStringList list;

    //handle:指示器,滚动条拉动部分 add-page:滚动条拉动时增加的部分 sub-page:滚动条拉动时减少的部分 add-line:递增按钮 sub-line:递减按钮

    //横向滚动条部分
    list.append(QString("QScrollBar:horizontal{background:%1;padding:%2px;border-radius:%3px;min-height:%4px;max-height:%4px;}")
                .arg(bgColor).arg(padding).arg(radius).arg(max));
    list.append(QString("QScrollBar::handle:horizontal{background:%1;min-width:%2px;border-radius:%3px;}")
                .arg(handleNormalColor).arg(min).arg(radius));
    list.append(QString("QScrollBar::handle:horizontal:hover{background:%1;}")
                .arg(handleHoverColor));
    list.append(QString("QScrollBar::handle:horizontal:pressed{background:%1;}")
                .arg(handlePressedColor));
    list.append(QString("QScrollBar::add-page:horizontal{background:none;}"));
    list.append(QString("QScrollBar::sub-page:horizontal{background:none;}"));
    list.append(QString("QScrollBar::add-line:horizontal{background:none;}"));
    list.append(QString("QScrollBar::sub-line:horizontal{background:none;}"));

    //纵向滚动条部分
    list.append(QString("QScrollBar:vertical{background:%1;padding:%2px;border-radius:%3px;min-width:%4px;max-width:%4px;}")
                .arg(bgColor).arg(padding).arg(radius).arg(max));
    list.append(QString("QScrollBar::handle:vertical{background:%1;min-height:%2px;border-radius:%3px;}")
                .arg(handleNormalColor).arg(min).arg(radius));
    list.append(QString("QScrollBar::handle:vertical:hover{background:%1;}")
                .arg(handleHoverColor));
    list.append(QString("QScrollBar::handle:vertical:pressed{background:%1;}")
                .arg(handlePressedColor));
    list.append(QString("QScrollBar::add-page:vertical{background:none;}"));
    list.append(QString("QScrollBar::sub-page:vertical{background:none;}"));
    list.append(QString("QScrollBar::add-line:vertical{background:none;}"));
    list.append(QString("QScrollBar::sub-line:vertical{background:none;}"));

    QString qss = list.join("");
    scroll->setStyleSheet(qss);
    return qss;
}

6. コントロールの導入

  1. さまざまなダッシュボード、プログレスバー、プログレスボール、コンパス、カーブ、ルーラー、温度計、ナビゲーションバー、ナビゲーションバー、フラットイ、ハイライトボタン、スライドセレクター、旧暦などをカバーする160以上の絶妙なコントロール。qwt によって統合されるコントロールの数をはるかに上回ります。
  2. 各クラスは結合なしで個別のコントロールに独立して形成できます。各コントロールにはヘッダー ファイルと実装ファイルがあり、他のファイルに依存しません。単一のコントロールを次の形式でプロジェクトに統合するのが便利です。ソースコードの量が減り、コードが減ります。qwt のコントロール クラスは連動しており、高度に結合されているため、いずれかのコントロールを使用する場合は、すべてのコードを含める必要があります。
  3. すべて純粋な Qt で書かれ、QWidget+QPainter によって描画され、Qt4.6 から Qt5.13 までの任意の Qt バージョンをサポートし、mingw、msvc、gcc などのコンパイラをサポートし、Windows+Linux+Mac などのオペレーティング システムをサポートします。 +埋め込み Linux など、コード化けせずに Qt Creator に直接統合でき、組み込みコントロールのように使用でき、ほとんどのエフェクトはいくつかのプロパティを設定するだけで済み、非常に便利です。
  4. 各コントロールには、簡単に参照して使用できるように、コントロールのソース コードを含む対応する個別のデモがあります。また、すべてのコントロールで使用される統合デモも提供します。
  5. 各コントロールのソース コードには詳細な中国語のコメントがあり、統一された設計仕様に従って記述されているため、カスタム コントロールの作成方法を簡単に学ぶことができます。
  6. 各コントロールのデフォルトのカラーマッチングとデモに対応したカラーマッチングが非常に絶妙です。
  7. 130 を超える表示コントロールと 6 つの非表示コントロール。
  8. 一部のコントロールでは、複数のスタイルの選択肢と複数のインジケーター スタイルの選択肢が提供されます。
  9. すべてのコントロールはフォームストレッチの変化に適応します。
  10. 統合されたカスタム コントロール属性デザイナー、ドラッグ アンド ドロップ デザイン、WYSIWYG をサポートし、XML 形式のインポートとエクスポートをサポートします。
  11. ActiveX コントロールのデモが付属しており、すべてのコントロールを IE ブラウザで直接実行できます。
  12. fontawesome グラフィック フォントと Alibaba iconfont が収集した何百ものグラフィック フォントを統合し、グラフィック フォントがもたらす楽しさをお楽しみください。
  13. すべてのコントロールは最終的にダイナミック ライブラリ ファイル (dll など) を生成します。これは、ドラッグ アンド ドロップ設計のために qtcreator に直接統合できます。
  14. qml バージョンはすでにありますが、ユーザーからの要望が多ければ pyqt バージョンも検討される予定です。
  15. カスタム コントロール プラグインは、バックドアや制限なしでダイナミック ライブラリを自由に使用できます (永久無料)。お気軽にご利用ください。
  16. 現在、32 バージョンの dll が提供されており、その中で qt_5_7_0_mingw530_32 バージョンは常に最新かつ完全であることが保証されます。
  17. コントロールは随時追加および改善され、SDK も随時更新されます。ご提案は大歓迎です。ありがとうございます。
  18. Qt の入門書としては、Huo Yafei 著の『Qt Creator によるクイック スタート』および『Qt5 プログラミング入門』を、Qt の上級書籍については、公式の『C++ GUI Qt4 Programming』をお勧めします。
  19. プログラマー向けの自己啓発本と計画本シリーズ『偉そうなプログラマー』、『プログラマーの成長講座』、『悩み解消プログラマー』シリーズはとてもためになり、一生役に立つのでとてもおすすめです。
  20. SDK アドレス: https://gitee.com/feiyangqingyun/QUCSDK https://github.com/feiyangqingyun/qucsdk

元のリンク: https://www.cnblogs.com/feiyangqingyun/p/11675298.html

この記事の特典として、Qt 開発学習パッケージと技術ビデオ (C++ 言語の基礎、Qt プログラミングの概要、QT シグナルとスロットのメカニズム、QT インターフェイス開発イメージの描画、QT ネットワーク、QT データベース) を無料で受け取ることができます。プログラミング、QT プロジェクトの実践、QT 組み込み開発、Quick モジュールなど） ↓↓↓↓下記参照↓↓料金受け取りは記事下部をクリック↓↓

おすすめ

転載: blog.csdn.net/hw5230/article/details/132839234
おすすめ
大規模な言語モデルに基づくオープンソースのナレッジベースの質問と回答システムである MaxKB GitHub Star の数が 5,000 を超えました。
ランキング
短线选股的一种方法
Javaクライアントでのユーバーのリズムワークフローで睡眠時間をキャンセルし、再スケジュール
CALIPSOデータバッチダウンロード方式
LeetCode アルゴリズム再帰クラス - ソードはオファー 26 を参照します。 ツリーの部分構造
HTMLのインポート外部CSS、JavaScriptの論文
PostgreSQL 13.1、12.5、11.10、10.15、9.6.20、および9.5.24がリリースされました
アップルは、エラーメッセージがポテトに接続されていた実行する方法ポテトポテトショーをダウンロードすることができません
あなたは空腹で突然電話を切っていますか？これはテクノロジーの裏側ですか、それともテスト用の銃ですか？
VIMエディタのヒント
動的計画法の最長共通部分列（LCS）
アーカイブ
もっと
2024-05-13(8)
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)

コードワールド

© 2018 codetd.com