Qt学习笔记二:Qt通过重写paintEvent方法写一个自定义选择框

原创
2019/07/09 17:18
阅读数 1.8K

Qt通过重写paintEvent方法写一个自定义选择框

> 这几天导师下发任务,让我一个月之内熟悉一个通过Qt Widget制作的项目,第一眼看到项目,我是懵逼的。才知道自己写的那些几百行的代码算什么玩意了。看到项目里密密麻麻继承QWidget的控件,然后各种重写paintEvent方法,才发现自己完全没有使用过Qt的绘图功能。好吧,开始学习吧!

前言

本文将会介绍如何通过重写QWidget类的paintEvent方法自定义一个CheckBox。当然有人问了,为什么不使用QSS来设置CheckBox样式,搞个自定义这么复杂干嘛?这个嘛,,,当然是闲得蛋疼了哈哈哈哈~

第一步:创建一个继承QWidget的对象

若要使用Qt的绘图功能,就需要创建一个继承自QPaintDevice的类,包括QWidget、QImage、QPixmap等。这里我们重点说一下QWidget,很多控件都继承自QWidget,我们可以操作的如QLineEdit、QAbstractButton无一例外的继承自QWidget。这就以为着我们本身可以通过重写QWidget对象中的方法来实现注入Button的操作。本文编写了一个CheckBox类,代码如下:

#ifndef CHECKBOX_H
#define CHECKBOX_H

#include <qobject>
#include <qwidget>

class CheckBox : public QWidget
{
    Q_OBJECT
public:
    explicit CheckBox(QWidget *parent = nullptr);

    bool getIsChecked() const;

protected:
    virtual void paintEvent(QPaintEvent *event) Q_DECL_OVERRIDE;
    virtual void mousePressEvent(QMouseEvent *event) Q_DECL_OVERRIDE;
    virtual void mouseReleaseEvent(QMouseEvent *event) Q_DECL_OVERRIDE;

Q_SIGNALS:
    void clicked(bool isChecked);

public Q_SLOTS:
    void onClicked();
private:
    bool isChecked = false;
    QPainter *painter;
};

#endif // CHECKBOX_H

这里注意的是我重写了paintEvent方法和鼠标点击和释放方法。isCheckedbool值用来储存checkbox的选中状态。

构造函数如下:

CheckBox::CheckBox(QWidget *parent) : QWidget(parent)
{
    this-&gt;connect(this, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
}

鼠标点击事件如下:

// 没用到
void CheckBox::mousePressEvent(QMouseEvent *event)
{
}

void CheckBox::mouseReleaseEvent(QMouseEvent *event)
{
    isChecked = !isChecked; // 状态取反
    qDebug() &lt;&lt; "click status:" &lt;&lt; isChecked;
    emit clicked(isChecked); // 释放被点击信号,
}

onClicked槽函数如下:

void CheckBox::onClicked()
{
    this-&gt;update();
}

这里的QWidget::update()槽函数用于刷新绘图。绘图刷新的具体流程下文会提到。

第二步:重写QWidget::paintEvent方法

直接贴代码:

void CheckBox::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    painter = new QPainter();
    painter-&gt;begin(this);
    
    // 创建一支笔,设置各种样式
    QPen pen;
    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::RoundJoin);
    pen.setWidth(2);
    pen.setStyle(Qt::SolidLine);
    pen.setColor("#fff");
    painter-&gt;setPen(pen);
    
    // 画一个正方形作为checkbox的框框
    painter-&gt;drawRect(4,4,10,10);

//    QStyleOption option;
//    option.initFrom(this);
//    this-&gt;style()-&gt;drawPrimitive(QStyle::PE_IndicatorCheckBox, &amp;option, painter, this);

    // 写checkbox边上的label
    QRect rect(12, -1, 50, 20);
    painter-&gt;drawText(rect, Qt::AlignCenter, QString::fromLocal8Bit("选择框"));

    // 判断checkbox是否被选中,则画一个NIKE
    if (isChecked) {
        QPoint points[] = {
            QPoint(2, 10),
            QPoint(7, 15),
            QPoint(17, 5)
        };
        painter-&gt;drawPolyline(points, 3);
    }
    painter-&gt;end();
}

这里读者会发现这几行注释:

    QStyleOption option;
    option.initFrom(this);
    this-&gt;style()-&gt;drawPrimitive(QStyle::PE_IndicatorCheckBox, &amp;option, painter, this);

QStyleOption在开发文档中是这样描述的: > QStyleOption and its subclasses contain all the information that QStyle functions need to draw a graphical element.

意思是QStyleOption和它的子类包含了所有QStyle需要画一个图形元素的函数的所有信息。

initFrom方法描述我就直接翻译给各位看官: > QStyleOption.initFrom(const QWidget *widget)根据指定的窗口小部件初始化state,direction,rect,palette,fontMetrics和styleObject成员变量。

QStyle::drawPrimitive方法让开发者快速绘画出系统Qt控件图案。官方解释是: > 使用选项指定的样式选项,使用提供的画家绘制给定的基本元素。

跟我说的应该没有什么区别(逃)。

整个cpp文件放出

一个一个方法看太麻烦,所以:

#include "checkbox.h"
#include <qdebug>
#include <qpainter>
#include <qstyle>
#include <qstyleoption>

CheckBox::CheckBox(QWidget *parent) : QWidget(parent)
{
    this-&gt;connect(this, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
}

void CheckBox::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    painter = new QPainter();
    painter-&gt;begin(this);
    QPen pen;
    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::RoundJoin);
    pen.setWidth(2);
    pen.setStyle(Qt::SolidLine);
    pen.setColor("#fff");
    painter-&gt;setPen(pen);
    painter-&gt;drawRect(4,4,10,10);

//    QStyleOption option;
//    option.initFrom(this);
//    this-&gt;style()-&gt;drawPrimitive(QStyle::PE_IndicatorCheckBox, &amp;option, painter, this);

    QRect rect(12, -1, 50, 20);
    painter-&gt;drawText(rect, Qt::AlignCenter, QString::fromLocal8Bit("选择框"));

    // 判断checkbox是否被选中,则画一个NIKE
    if (isChecked) {
        QPoint points[] = {
            QPoint(2, 10),
            QPoint(7, 15),
            QPoint(17, 5)
        };
        painter-&gt;drawPolyline(points, 3);
    }
    painter-&gt;end();
}

void CheckBox::mousePressEvent(QMouseEvent *event)
{
}

void CheckBox::mouseReleaseEvent(QMouseEvent *event)
{
    isChecked = !isChecked;
    qDebug() &lt;&lt; "click status:" &lt;&lt; isChecked;
    emit clicked(isChecked);
}

void CheckBox::onClicked()
{
    this->update();
}

bool CheckBox::getIsChecked() const
{
    return isChecked;
}

演示

自己画框框

image

使用drawPrimitive

image

展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部