QT自定義控件--電池

文章目錄

• ​​一、效果展示​​
• ​​二、繪制過程​​

• ​​2.1、控件分析​​
• ​​2.2、原理詳解​​
• ​​2.3、繪制框體​​
• ​​2.4、繪制電量​​
• ​​2.3、其餘代碼​​

一、效果展示

二、繪制過程

2.1、控件分析

電池控件主要由電池框體和電量組成，電池會根據電量的高低改變電量的表示顔色，由此可以将任務分為三部分：繪制電池框體、繪制電量、實作電量增減表示

2.2、原理詳解

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