Qt はカスタム コントロールのプロンプト プログレス バーを書き込みます

I.はじめに

多くのインストール パッケージでは、インストール プロセス中に、下部に美しい進行状況バーが表示され、対応する進行状況が上に一時的に表示され、その後、下部の進行状況が複数の色のグラデーション、Qt 独自の進行状況バーまたは操作で表示されます。システムのプログレス バー スタイルは十分にクールではありません。今回は、カスタム描画実装を思いついただけです。QWidget クラスを継承するか QProgressBar クラスを継承するかは関係ありません。QWidget クラスから継承する場合は、次のことを行う必要があります。範囲の最大値と最小値を自分で設定し、QProgressBar から継承する場合は、独自の関数を使用して直接実装できます。今回書かれたプログレスバーでは、プロンプト情報の背景色は以下のプログレスカラーと完全に一致しており、それに応じて変化します。

2. 実装された機能

• 1：最小値/最大値/範囲値/現在値を設定可能
• 2：パーセンテージを表示するかどうかを設定可能
• 3: プロンプト情報が隙間からはみ出さないようにマージンを設定できます。
• 4: 進行状況の色を設定でき、グラデーションブラシにすることができます
• 5: 背景色/文字色/プロンプト背景を設定可能
• 6: フィレット角度を設定可能
• 7: プログレス ブラシが設定されている場合、背景にもこのブラシを使用するように求めるメッセージが表示されます。

3.エフェクト描画

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

#ifndef PROGRESSTIP_H
#define PROGRESSTIP_H

/**
 * 提示进度条控件 作者:feiyangqingyun(QQ:517216493) 2019-10-05
 * 1:可设置最小值/最大值/范围值/当前值
 * 2:可设置是否百分比显示
 * 3:可设置边距,流出空隙防止提示信息跑到外面
 * 4:可设置进度的颜色,可以是渐变画刷
 * 5:可设置背景颜色/文字颜色/提示背景
 * 6:可设置圆角角度
 * 7:如果设置了进度画刷则提示背景也采用该画刷
 */

#include <QWidget>

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

class QDESIGNER_WIDGET_EXPORT ProgressTip : public QWidget
#else
class ProgressTip : public QWidget
#endif

{
    Q_OBJECT
    Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)
    Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(double value READ getValue WRITE setValue)

    Q_PROPERTY(bool percent READ getPercent WRITE setPercent)
    Q_PROPERTY(int padding READ getPadding WRITE setPadding)
    Q_PROPERTY(int radius READ getRadius WRITE setRadius)

    Q_PROPERTY(QBrush valueBrush READ getValueBrush WRITE setValueBrush)
    Q_PROPERTY(QColor valueColor READ getValueColor WRITE setValueColor)
    Q_PROPERTY(QColor bgColor READ getBgColor WRITE setBgColor)
    Q_PROPERTY(QColor tipColor READ getTipColor WRITE setTipColor)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)

public:
    explicit ProgressTip(QWidget *parent = 0);

protected:
    void paintEvent(QPaintEvent *);    
    void drawBg(QPainter *painter);
    void drawTip(QPainter *painter);
    void drawValue(QPainter *painter);

private:
    double minValue;            //最小值
    double maxValue;            //最大值
    double value;               //目标值

    bool percent;               //百分比显示
    int padding;                //边距
    int radius;                 //圆角角度

    QBrush valueBrush;          //进度画刷
    QColor valueColor;          //进度颜色
    QColor bgColor;             //背景颜色
    QColor tipColor;            //提示背景颜色
    QColor textColor;           //文字颜色

public:
    double getMinValue()        const;
    double getMaxValue()        const;
    double getValue()           const;

    bool getPercent()           const;
    int getPadding()            const;
    int getRadius()             const;

    QBrush getValueBrush()      const;
    QColor getValueColor()      const;
    QColor getBgColor()         const;
    QColor getTipColor()        const;
    QColor getTextColor()       const;

    QSize sizeHint()            const;
    QSize minimumSizeHint()     const;

public Q_SLOTS:
    //设置范围值
    void setRange(double minValue, double maxValue);
    void setRange(int minValue, int maxValue);

    //设置最大最小值
    void setMinValue(double minValue);
    void setMaxValue(double maxValue);

    //设置目标值
    void setValue(double value);
    void setValue(int value);

    //设置百分比显示
    void setPercent(bool percent);
    //设置边距
    void setPadding(int padding);
    //设置圆角角度
    void setRadius(int radius);

    //设置进度画刷+进度颜色+背景颜色+提示背景+文字颜色
    void setValueBrush(const QBrush &valueBrush);
    void setValueColor(const QColor &valueColor);
    void setBgColor(const QColor &bgColor);
    void setTipColor(const QColor &tipColor);
    void setTextColor(const QColor &textColor);

Q_SIGNALS:
    void valueChanged(double value);
};

#endif // PROGRESSPLAY_H

5. コアコード

void ProgressTip::paintEvent(QPaintEvent *)
{
    //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //绘制背景
    drawBg(&painter);
    //绘制上部分提示信息
    drawTip(&painter);
    //绘制进度
    drawValue(&painter);
}

void ProgressTip::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(bgColor);

    QRect rect(padding, (height() / 3) * 2, width() - padding * 2, height() / 3);
    painter->drawRoundedRect(rect, radius, radius);

    painter->restore();
}

void ProgressTip::drawTip(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(valueBrush == Qt::NoBrush ? tipColor : valueBrush);

    //计算当前值对应的百分比
    double step = value / (maxValue - minValue);
    int progress = (width() - padding * 2) * step;

    //绘制上部分提示信息背景
    QRect rect(progress, 0, padding * 2, (double)height() / 2.1);
    painter->drawRoundedRect(rect, 2, 2);

    //绘制倒三角
    int centerX = rect.center().x();
    int initY = rect.height();
    int offset = 5;
    QPolygon pts;
    pts.append(QPoint(centerX - offset, initY));
    pts.append(QPoint(centerX + offset, initY));
    pts.append(QPoint(centerX, initY + offset));
    painter->drawPolygon(pts);

    //绘制文字
    QString strValue;
    if (percent) {
        double temp = value / (maxValue - minValue) * 100;
        strValue = QString("%1%").arg(temp, 0, 'f', 0);
    } else {
        strValue = QString("%1").arg((double)value, 0, 'f', 0);
    }

    painter->setPen(textColor);
    painter->drawText(rect, Qt::AlignCenter, strValue);

    painter->restore();
}

void ProgressTip::drawValue(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    //定义了画刷则取画刷,可以形成渐变效果
    painter->setBrush(valueBrush == Qt::NoBrush ? valueColor : valueBrush);

    //计算当前值对应的百分比
    double step = value / (maxValue - minValue);
    int progress = (width() - padding * 2) * step;

    QRect rect(padding, (height() / 3) * 2, progress, height() / 3);
    painter->drawRoundedRect(rect, radius, radius);

    painter->restore();
}

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

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/11690027.html