Qt自定义 Widget 组件

自定义 Widget 子类 QmyBattery

Qt 的 UI 设计器提供了很多 GUI 设计的界面组件，可以满足常见的界面设计需求。但是某些时候需要设计一些特殊的界面组件，而在 UI 设计器的组件面板里根本没有合适的组件，这时就需要设计自定义的界面组件。
所有界面组件的基类是 QWidget，要设计自定义的界面组件，可以从 QWidget 继承一个自定义的类，重定义其 paintEvent() 事件，利用 Qt 的绘图功能绘制组件外观，并实现需要的其他功能。
例如，假设需要设计一个如图所示的电池电量显示组件，用于电池使用或充电时显示电量，但是在 UI 设计器的组件面板没有现成的组件。这就需要设计一个自定义的 Widget 组件。

为此，设计一个从 QWidget 继承的类 QmyBattery。创建 C++类，可以单击 Qt Creator 的“File”->“New File or Project”菜单选项，在出现的对话框选择 C++组里面的 C++Class，在向导中设置类的名称，并选择基类为 QWidget。定义 QmyBattery 类的头文件如下：

#include    <QWidget>
#include    <QColor>

class QmyBattery : public QWidget
{
    Q_OBJECT
//自定义属性
    Q_PROPERTY(int  powerLevel READ powerLevel WRITE setPowerLevel NOTIFY powerLevelChanged)

private:
    QColor  mColorBack=Qt::white;//背景颜色
    QColor  mColorBorder=Qt::black;//电池边框颜色
    QColor  mColorPower=Qt::green;//电量柱颜色
    QColor  mColorWarning=Qt::red;//电量短缺时的颜色

    int mPowerLevel=60;//电量0-100
    int mWarnLevel=20;//电量低警示阈值

protected:
    void    paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;

public:
    explicit QmyBattery(QWidget *parent = 0);

    void    setPowerLevel(int pow);//设置当前电量
    int     powerLevel();

    void    setWarnLevel(int warn);//设置电量低阈值
    int     warnLevel();

    QSize   sizeHint();//报告缺省大小

signals:
    void   powerLevelChanged(int );

public slots:
};

在 private 部分定义了几个私有变量，主要是各种颜色的定义，当前电量值 mPowerLevel 和电量低阈值 mWarnLevel；protected 部分重定义了 patinEvent() 事件；public 部分定义了用来读取和设置当前电量值、电量低阈值的好函数，还定义了 sizeHint() 函数，用于返回组件缺省大小。
定义了一个信号 powerLevelChanged(int)，在当前电量值改变的时候发射该信号，使用 QmyBattery 类时可以设计槽函数对此信号做处理。下面是具体的实现代码，复杂的部分是 paintEvent() 事件函数里绘制界面功能实现，这里设置了窗口逻辑坐标，所以当组件大小变化时，绘制的电池大小也会自动变化。

void QmyBattery::paintEvent(QPaintEvent *event)
{  //界面组件的绘制
    Q_UNUSED(event);

    QPainter    painter(this);
    QRect rect(0,0,width(),height()); //viewport矩形区
    painter.setViewport(rect);//设置Viewport
    painter.setWindow(0,0,120,50); // 设置窗口大小，逻辑坐标
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);


//绘制电池边框
    QPen    pen;//设置画笔
    pen.setWidth(2); //线宽
    pen.setColor(mColorBorder); //划线颜色
    pen.setStyle(Qt::SolidLine);//线的类型，实线、虚线等
    pen.setCapStyle(Qt::FlatCap);//线端点样式
    pen.setJoinStyle(Qt::BevelJoin);//线的连接点样式
    painter.setPen(pen);

    QBrush  brush;//设置画刷
    brush.setColor(mColorBack); //画刷颜色
    brush.setStyle(Qt::SolidPattern); //画刷填充样式
    painter.setBrush(brush);

    rect.setRect(1,1,109,48);
    painter.drawRect(rect);//绘制电池边框

    brush.setColor(mColorBorder); //画刷颜色
    painter.setBrush(brush);
    rect.setRect(110,15,10,20);
    painter.drawRect(rect); //画电池正极头

//画电池柱
    if (mPowerLevel>mWarnLevel)
    {  //正常颜色电量柱
        brush.setColor(mColorPower); //画刷颜色
        pen.setColor(mColorPower); //划线颜色
    }
    else
    { //电量低电量柱
        brush.setColor(mColorWarning); //画刷颜色
        pen.setColor(mColorWarning); //划线颜色
    }
    painter.setBrush(brush);
    painter.setPen(pen);

    if (mPowerLevel>0)
    {
        rect.setRect(5,5,mPowerLevel,40);
        painter.drawRect(rect);//画电池柱
    }

//绘制电量百分比文字
    QFontMetrics    textSize(this->font());
    QString powStr=QString::asprintf("%d%%",mPowerLevel);
    QRect textRect=textSize.boundingRect(powStr);//得到字符串的rect

    painter.setFont(this->font());
    pen.setColor(mColorBorder); //划线颜色
    painter.setPen(pen);

    painter.drawText(55-textRect.width()/2,
               23+textRect.height()/2,
               powStr);
}

QmyBattery::QmyBattery(QWidget *parent) : QWidget(parent)
{
//    setPalette(QPalette(mColorBack));
//    setAutoFillBackground(true);
//    this->resize(120,50);
}

void QmyBattery::setPowerLevel(int pow)
{ //设置当前电量值
    mPowerLevel=pow;
    emit powerLevelChanged(pow); //触发信号
    repaint();
}

int QmyBattery::powerLevel()
{ //读取当前电量值
    return mPowerLevel;
}

void QmyBattery::setWarnLevel(int warn)
{//设置电量低阈值
    mWarnLevel=warn;
    repaint();
}

int QmyBattery::warnLevel()
{//读取电量低阈值
    return  mWarnLevel;
}

QSize QmyBattery::sizeHint()
{//报告缺省大小,调整比例
    int H=this->height();
    int W=H*12/5;
    QSize   size(W,H);
    return size;
}

自定义 Widget 组件的使用

实现了自定义类后，如果是使用代码创建 QmyBattery 类对象，其使用与一般的组件类是一样的；如果是在 UI 设计器中使用 QmyBattery，则需要采用提升的方法（promotion）。
拖一个 QWidget 组件在窗口上，右击选择“提升为（Promote to）“，就会出现如下所示对话框：

在基类名称的下来列表里选择 QWidget，将提升后的类名设置为 QmyBattery，头文件名会自动生成。可以将设置添加到已提升的列表里，以便重复使用。在提供组件之后，虽然 QWidget 已经被提升为 QmyBattery 类，但是在这个组件的“Go to slot”对话框没有 QmyBattery 类的 powerLevelChanged(int) 信号，无法采用可视化方法生成信号的槽函数。在主窗口上放置一个 QSlider 组件和一个 QLabel 组件。华东标尺改变数据时，设置为 battery 的当前电量，其 valueChanged()信号的槽函数代码如下：

void Widget::on_horizontalSlider_valueChanged(int value)
{
   ui->battery->setPowerLevel(value);
   QString  str=QStringLiteral("当前电量：")+QString::asprintf("%d %%",value);
   ui->LabInfo->setText(str);
}

下一篇文章说说如何创建 Qt Designer 的插件，可以直接在 UI 设计器中拖动使用。
参考资料：https://github.com/0voice