Qt使用QPainter實現自定義圓形進度條

2022-06-16 10:01:08

一、專案介紹

本文介紹利用QPainter實現自定義圓形進度條。

二、專案基本設定

新建一個Qt案例，專案名稱為“RoundprogressbarTest”，基礎類別選擇“QWidget”，點選選中建立UI介面核取方塊，完成專案建立。

三、UI介面設定

UI介面如下：

為簡單起見，這裡只設計兩個控制元件：

序號	名稱	型別	屬性
①	pushButton	QPushButton	text:Start
②	gridLayout	QGridLayout	/

四、主程式實現

4.1 roundprogressbar.h和roundprogressbar.cpp

由於roundprogressbar.h和roundprogressbar.cpp程式碼量較大，這裡不進行展示，僅作簡要說明。

函數如下：

    //設定初始角度，順時針逆時針
    void setdefault(int,bool);
    //設定外圈寬度
    void setOutterBarWidth(float);
    //設定內圈寬度
    void setInnerBarWidth(float);
    //設定範圍
    void setRange(float, float);
    //設定當前值
    void setValue(float);
    //設定外圈顏色
    void setOutterColor(const QColor&);
    //設定內圈漸變色
    void setInnerColor(const QColor&,const QColor&);
    void setInnerColor(const QColor&);
    //設定預設文字顏色
    void setDefaultTextColor(const QColor&);
    //設定控制命令
    void setControlFlags(int);
    //設定顯示數位精度
    void setPrecision(int);

在建構函式中進行了如下初始化設定：

    //設定初始角度，順時針逆時針
    setdefault(90,true);
    //設定預設外圈寬度
    setOutterBarWidth(18);
    //設定預設內圈寬度
    setInnerBarWidth(16);
    //設定預設範圍
    setRange(0,100);
    //設定預設值
    setValue(75);
    //設定外圈顏色
    setOutterColor(QColor(233,248,248));
    //設定預設漸變色
    setInnerColor(QColor(49, 177, 190),QColor(133, 243, 244));
    //設定預設文字顏色
    setDefaultTextColor(QColor(49,177,190));
    //設定預設精度
    setPrecision(0);
    //設定內圈預設文字樣式
    setInnerDefaultTextStyle(RoundProgressBar::percent);

設定初始化角度為90度，順時針，設定外圈寬度為18，內圈寬度為18；設定預設範圍為0-100，設定預設值為75，設定外圈顏色、漸變色、文字顏色和預設精度為0（無小數）設定內圈文字樣式為percent（百分比樣式）。

4.2 widget.h標頭檔案

標頭檔案中引入roundprogressbar.h標頭檔案，按鈕點選槽函數和定時器對應的槽函數、timer物件和bar1物件：

private slots:
    void setText();
    void on_pushButton_clicked();

private:
    RoundProgressBar* bar1;
    QTimer timer;
     int i=0;

4.3 widget.cpp原始檔

原始檔中在建構函式中定義圓形進度條和定時器，將定時器timeout訊號和槽函數setText連線：

    //*********************** RoundProgressBar ************************
    bar1=new RoundProgressBar(this);
    bar1->setOutterBarWidth(20);
    bar1->setInnerBarWidth(20);
    bar1->setValue(0);//設定預設值為0
    bar1->setControlFlags(RoundProgressBar::all);
    ui->gridLayout->addWidget(bar1,0,0);

    //計時
    timer.setInterval(100);//設定計時間隔為0.1s
    connect(&timer,&QTimer::timeout,this,&Widget::setText);

在解構函式中停止定時器：

Widget::~Widget()
{
    if(timer.isActive())
        timer.stop();
    delete ui;
}

兩個槽函數定義如下：

//點選
void Widget::on_pushButton_clicked()
{
    timer.start();
}

void Widget::setText()
{
    bar1->setValue(i++);
    bar1->repaint();
    if(i>100)   //100停止
    {
        timer.stop();
    }
}