QtWidget绘制电池控件

1、电池控件效果

使用QPainter来进行绘制自定义的控件，然后通过QTimer来实现电池控件的电量变化效果，效果图如下：

2、自定义电池控件的实现

2.1、初始化电池控件的基本属性

在设计电池控件时，首先得考虑这个控件的基本属性，然后通过自定义一个初始化的接口或者通过初始化列表来初始化电池控件的属性，如下是自定义初始化接口来初始化电池控件的基本属性：

void Widget::init()
{
   
   
    m_margin=5;
    m_isForward=true;
    m_currentValue=10;
    m_maxValue=100;
    m_minValue=0;
    m_batteryWidth=150;
    m_batteryHeight=60;
}

下图是私有作用域下的电池属性：

2.2、电池控件电量的增减变化的实现

要想实现电池控件电量增减变化，必须使用QTimer来构造一个定时器，设置定时器的周期，然后是通过信号槽绑定，让窗口上的电池控件不断触发改变电量的槽函数，最后是使用update()来实现窗体的重绘。

void Widget::changeValue()
{
   
   
    if(m_isForward)
    {
   
   
        m_currentValue+=1;
    }
    else
    {
   
   
        m_currentValue-=1;
    }

    if(m_currentValue>=100)
    {
   
   
        m_currentValue=100;
        m_isForward=false;
    }
    if(m_currentValue<=0)
    {
   
   
        m_currentValue=0;
        m_isForward=true;
    }
    update();
}

2.3、绘制电池控件的边框和头部

绘制电池控件边框时，将电池的主体部分绘制到窗体中心，然后是绘制电池控件的头部，绘制头部时就是绘制一条线段，只是这条线段比较粗，代码如下：

void Widget::drawBorder(QPainter *painter)
{
   
   
    //保存画家的当前状态
    painter->save();
    //设置画笔
    painter->setPen(QPen(Qt::gray,8));
    //无画刷
    painter->setBrush(Qt::NoBrush);
    //电池主体居中
    m_batteryRect=QRectF((this->width()-m_batteryWidth)/2,(this->height()-m_batteryHeight)/2,
                        m_batteryWidth,m_batteryHeight);
    //绘制电池边框
    painter->drawRoundRect(m_batteryRect,15,15);

    //绘制电池头部
    painter->setPen(QPen(Qt::gray,12));
    QLine line(m_batteryRect.topRight().x()+10,m_batteryRect.topRight().y()+10,
               m_batteryRect.bottomRight().x()+10,m_batteryRect.bottomRight().y()-10);
    painter->drawLine(line);
    //恢复画家保存的状态
    painter->restore();
}

效果图如下：