QT自定义控件--电池

一、效果展示

二、绘制过程

2.1、控件分析

电池控件主要由电池框体和电量组成，电池会根据电量的高低改变电量的表示颜色，由此可以将任务分为三部分：绘制电池框体、绘制电量、实现电量增减表示

2.2、原理详解

电量表示是在电池框体绘制了一个填充了颜色的圆角矩形框体。如果把电量分为100份，可以设置一个power变量，取值为0-100，然后电量表示的圆角矩形框体在绘制时，宽度参考power变量就可以实现电量的多少与power挂钩。

在绘制框体时，宽度可以这样确定，( width()/100 ) * power

2.3、绘制框体

void Bettery_Painter::draw_frame(QPainter *painter)
{
    painter->save();

    QPen pen;
    pen.setWidth(4);
    pen.setBrush(buttery_frame);
    painter->setPen(pen);
    painter->setBrush(buttery_background);
    painter->drawRoundedRect(space,space,width()-space*2,height()-space*2,5,5);

    painter->setPen(Qt::NoPen);
    painter->setBrush(buttery_head);
    painter->drawRoundedRect(width()-space,height()/2-height()/5,space,height()/3,5,5);

    painter->restore();
}

2.4、绘制电量

void Bettery_Painter::draw_power(QPainter *painter)
{
    painter->save();

    painter->setPen(Qt::NoPen);
    if(power>0 && power<=20)
    {
        painter->setBrush(low_power);
    }
    else if(power>20 && power<=80)
    {
        painter->setBrush(mid_power);
    }
    else
    {
        painter->setBrush(high_power);
    }

    painter->drawRoundedRect(space,space,(width()-space*2)/100 * power,height()-space*2,5,5);


    painter->restore();
}

2.3、其余代码

void Bettery_Painter::paintEvent(QPaintEvent *)
{
    QPainter painter(this);

    draw_frame(&painter);
    draw_power(&painter);
}

void Bettery_Painter::set_power(int power)
{
    this->power = power;

    update();
}