Qt自定义进度条
wendy_ya 人气:7一、项目介绍
本文介绍利用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(); } }
五、效果演示
完整效果如下:
加载全部内容