一、项目介绍
本文介绍利用QPainter实现自定义圆形进度条。
二、项目基本配置
新建一个Qt案例，项目名称为“RoundprogressbarTest”，基类选择“QWidget”，点击选中创建UI界面复选框，完成项目创建。
三、UI界面设置
UI界面如下：
为简单起见，这里只设计两个控件：
| 序号 | 名称 | 类型 | 属性 |
|---|---|---|---|
| ① | pushButton | QPushButton | text:Start |
| ② | gridLayout | QGridLayout | / |
四、主程序实现
4.1 roundprogressbar.h和roundprogressbar.cpp
由于roundprogressbar.h和roundprogressbar.cpp代码量较大，这里不进行展示，仅作简要说明。
函数如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//设置初始角度，顺时针逆时针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); |
在构造函数中进行了如下初始化设定：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//设置初始角度，顺时针逆时针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对象：
|
1
2
3
4
5
6
7
8
|
private slots: void setText(); void on_pushButton_clicked();private: RoundProgressBar* bar1; QTimer timer; int i=0; |
4.3 widget.cpp源文件
源文件中在构造函数中定义圆形进度条和定时器，将定时器timeout信号和槽函数setText连接：
|
1
2
3
4
5
6
7
8
9
10
11
|
//*********************** RoundProgressBar ************************bar1=new RoundProgressBar(this);bar1->setOutterBarWidth(20);bar1->setInnerBarWidth(20);bar1->setValue(0);//设置默认值为0bar1->setControlFlags(RoundProgressBar::all);ui->gridLayout->addWidget(bar1,0,0);//计时timer.setInterval(100);//设置计时间隔为0.1sconnect(&timer,&QTimer::timeout,this,&Widget::setText); |
在析构函数中停止定时器：
|
1
2
3
4
5
6
|
Widget::~Widget(){ if(timer.isActive()) timer.stop(); delete ui;} |
两个槽函数定义如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
//点击void Widget::on_pushButton_clicked(){ timer.start();}void Widget::setText(){ bar1->setValue(i++); bar1->repaint(); if(i>100) //100停止 { timer.stop(); }} |
五、效果演示
完整效果如下：
到此这篇关于Qt使用QPainter实现自定义圆形进度条的文章就介绍到这了,更多相关Qt自定义进度条内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！
原文链接：https://wendy.blog.csdn.net/article/details/124378255
