Qt实战案例(44)——利用QPainter实现自定义圆形进度条

一、项目介绍

本文介绍利用QPainter实现自定义圆形进度条。

二、项目基本配置

新建一个Qt案例,项目名称为“RoundprogressbarTest”,基类选择“QWidget”,点击选中创建UI界面复选框,完成项目创建。

三、UI界面设置

UI界面如下:
在这里插入图片描述
为简单起见,这里只设计两个控件:

序号名称类型属性
pushButtonQPushButtontext:Start
gridLayoutQGridLayout/

四、主程序实现

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();
    }
}

五、效果演示

完整效果如下:
在这里插入图片描述

如果没有看懂的话,完整代码可以参考:https://download.csdn.net/download/didi_ya/85212547


ok,以上便是本文的全部内容了,如果对你有所帮助,记得点个赞哟~

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wendy_ya

您的鼓励将是我创作的最大动力~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值