Qt使用QPainter實(shí)現(xiàn)自定義圓形進(jìn)度條

更新時(shí)間：2022年06月16日 09:11:09 作者：wendy_ya

這篇文章主要介紹了Qt如何使用QPainter實(shí)現(xiàn)自定義圓形進(jìn)度條功能，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Qt有一定的幫助，需要的可以參考一下

一、項(xiàng)目介紹

本文介紹利用QPainter實(shí)現(xiàn)自定義圓形進(jìn)度條。

二、項(xiàng)目基本配置

新建一個(gè)Qt案例，項(xiàng)目名稱為“RoundprogressbarTest”，基類選擇“QWidget”，點(diǎn)擊選中創(chuàng)建UI界面復(fù)選框，完成項(xiàng)目創(chuàng)建。

三、UI界面設(shè)置

UI界面如下：

為簡單起見，這里只設(shè)計(jì)兩個(gè)控件：

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

四、主程序?qū)崿F(xiàn)

4.1 roundprogressbar.h和roundprogressbar.cpp

由于roundprogressbar.h和roundprogressbar.cpp代碼量較大，這里不進(jìn)行展示，僅作簡要說明。

函數(shù)如下：

    //設(shè)置初始角度，順時(shí)針逆時(shí)針
    void setdefault(int,bool);
    //設(shè)置外圈寬度
    void setOutterBarWidth(float);
    //設(shè)置內(nèi)圈寬度
    void setInnerBarWidth(float);
    //設(shè)置范圍
    void setRange(float, float);
    //設(shè)置當(dāng)前值
    void setValue(float);
    //設(shè)置外圈顏色
    void setOutterColor(const QColor&);
    //設(shè)置內(nèi)圈漸變色
    void setInnerColor(const QColor&,const QColor&);
    void setInnerColor(const QColor&);
    //設(shè)置默認(rèn)文字顏色
    void setDefaultTextColor(const QColor&);
    //設(shè)置控制命令
    void setControlFlags(int);
    //設(shè)置顯示數(shù)字精度
    void setPrecision(int);

在構(gòu)造函數(shù)中進(jìn)行了如下初始化設(shè)定：

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

設(shè)置初始化角度為90度，順時(shí)針，設(shè)置外圈寬度為18，內(nèi)圈寬度為18；設(shè)置默認(rèn)范圍為0-100，設(shè)置默認(rèn)值為75，設(shè)置外圈顏色、漸變色、文本顏色和默認(rèn)精度為0（無小數(shù)）設(shè)置內(nèi)圈文字樣式為percent（百分比樣式）。

4.2 widget.h頭文件

頭文件中引入roundprogressbar.h頭文件，按鈕點(diǎn)擊槽函數(shù)和定時(shí)器對應(yīng)的槽函數(shù)、timer對象和bar1對象：

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

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

4.3 widget.cpp源文件

源文件中在構(gòu)造函數(shù)中定義圓形進(jìn)度條和定時(shí)器，將定時(shí)器timeout信號和槽函數(shù)setText連接：

    //*********************** RoundProgressBar ************************
    bar1=new RoundProgressBar(this);
    bar1->setOutterBarWidth(20);
    bar1->setInnerBarWidth(20);
    bar1->setValue(0);//設(shè)置默認(rèn)值為0
    bar1->setControlFlags(RoundProgressBar::all);
    ui->gridLayout->addWidget(bar1,0,0);

    //計(jì)時(shí)
    timer.setInterval(100);//設(shè)置計(jì)時(shí)間隔為0.1s
    connect(&timer,&QTimer::timeout,this,&Widget::setText);

在析構(gòu)函數(shù)中停止定時(shí)器：

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

兩個(gè)槽函數(shù)定義如下：

//點(diǎn)擊
void Widget::on_pushButton_clicked()
{
    timer.start();
}

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