使用Qt画一个电池

ui界面

具体而言，电池其实是一个QWidget，还有一个horizontalSlider，一个label，ui界面很简单

其实可以直接在主界面里写函数来画电池，不过这个电池之后还有用，所以选择把电池位置的QWidget进行提升

首先添加一个新文件，选择C++类，继承QWidget，名字为TBattery，记得选上Q_OBJECT，这样我们就得到一个头文件一个cpp文件了

画图其实就是paintEvent，所以我们就重写paintEvent函数即可，不过之前先准备一下头文件的内容

private:
    QColor colorBackground=Qt::white;
    QColor colorBorder=Qt::black;
    QColor colorPower=Qt::green;
    QColor colorWarning=Qt::red;
    int m_powerLevel=60;//当前电量
    int m_warnLevel=20;//警告的电量

记得给上述两个变量设置get和set函数，让Qt自动生成即可

随后，重写paintEvent

void TBattery::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QRect rect(0,0,width(),height());//视口，窗口都是Widget的大小
    painter.setViewport(rect);//视口 绝对坐标
    painter.setWindow(0,0,120,50);//窗口 逻辑坐标 不过这次左上角是0，0
    painter.setRenderHint(QPainter::Antialiasing);//抗锯齿
    painter.setRenderHint(QPainter::TextAntialiasing);

    //绘制电池
    QPen pen(colorBorder);//边框颜色
    pen.setWidth(2);
    pen.setStyle(Qt::SolidLine);
    pen.setCapStyle(Qt::FlatCap);
    pen.setJoinStyle(Qt::BevelJoin);
    painter.setPen(pen);
    QBrush brush(colorBackground);//填充色
    brush.setStyle(Qt::SolidPattern);
    painter.setBrush(brush);
    rect.setRect(1,1,109,48);
    painter.drawRect(rect);//边框

    brush.setColor(colorBorder);
    painter.setBrush(brush);
    rect.setRect(110,15,10,20);
    painter.drawRect(rect);//绘制正极

    if(m_powerLevel>m_warnLevel){
        brush.setColor(colorPower);
        pen.setColor(colorPower);
    }
    else{
        brush.setColor(colorWarning);
        pen.setColor(colorWarning);
    }
    painter.setPen(pen);
    painter.setBrush(brush);
    if(m_powerLevel>0){
        rect.setRect(5,5,m_powerLevel,40);
        painter.drawRect(rect);//画电量
    }

    QString powStr=QString::asprintf("%d%%",m_powerLevel);
    QFontMetrics textSize(this->font());
    QRect textRect=textSize.boundingRect(powStr);//会根据字体算出字的矩形大小
    pen.setColor(colorBorder);
    painter.setPen(pen);
    painter.drawText(55-textRect.width()/2,25+textRect.height()/2,powStr);//在中间写字

    event->accept();

}

画图的流程就是先设置Pen和Brush，再让painter来draw

具体坐标都是事先算好的，左上角是(0,0)，整个电池框长度是110，这样可以直接用电量值来画电量的图

写好类后，记得提升我们ui里的QWidget为TBattery

最后，写一个horizontalSlider信号valueChanged的槽，这样可以根据滑动条改变电池的电量

void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->Battery->setPowerLevel(value);//这里用到了我们自定义类的set函数
    ui->label->setText(QString::asprintf("当前电量:%d%%",value));
    ui->Battery->repaint();
}