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