Qt使用QWidget创建自己想要的控件

Qt使用QWidget创建自己想要的控件

我们都知道，如果仅仅是使用Qt给我们提供的控件的话，很多功能是无法实现我们自己的需求的，而却界面上的美观程度也是不一样的，因此我们就需要自己来设置自己想要的控件的形状等。做一个控件，无外乎他的外观和交互，这要把这两部份写好了，我们的任务就算完成了。自己定义的控件又分为两种，一种是对原有的控件进行修改，来满足需求，这种的好处是，原来控件带有的交互还是有的，不需要我们额外的再写交互。另外一种就是直接继承于QWidget这个类，这就需要我们对控件的界面设计和事件的交互重新写。因此在这之前，必须对Qt给我们提供的界面的类有一定的了解。可以查看我之前写过的文章，简单介绍了一个类的作用。
比如QLineEdit这个常用的控件也是继承于QWidget，可以查看一下这个类是怎么写的，对于帮助我们自己构建自己的类是很有帮助的。可以通多这个链接。

在写自己想要自定义的控件的时候，我们是需要根据自己的需求对界面设计和交互事件写对应的代码。

写自定义控件的步骤

比如自己控件类为MyControl，达成的目标是可以显示图片，并显示信息，可以移动，图片来回切换显示，实现闪烁。
1。继承于QWidget。对类中的信息进行补充，完成我们的元对象系统。
如QLineEdit：

class Q_WIDGETS_EXPORT QLineEdit : public QWidget
{
    Q_OBJECT
    
    Q_PROPERTY(QString inputMask READ inputMask WRITE setInputMask)
    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged USER true)
    Q_PROPERTY(int maxLength READ maxLength WRITE setMaxLength)
    Q_PROPERTY(bool frame READ hasFrame WRITE setFrame)
    Q_PROPERTY(EchoMode echoMode READ echoMode WRITE setEchoMode)
    Q_PROPERTY(QString displayText READ displayText)
    Q_PROPERTY(int cursorPosition READ cursorPosition WRITE setCursorPosition)
    Q_PROPERTY(Qt::Alignment alignment READ alignment WRITE setAlignment)
    Q_PROPERTY(bool modified READ isModified WRITE setModified DESIGNABLE false)
    Q_PROPERTY(bool hasSelectedText READ hasSelectedText)
    Q_PROPERTY(QString selectedText READ selectedText)
    Q_PROPERTY(bool dragEnabled READ dragEnabled WRITE setDragEnabled)
    Q_PROPERTY(bool readOnly READ isReadOnly WRITE setReadOnly)
    Q_PROPERTY(bool undoAvailable READ isUndoAvailable)
    Q_PROPERTY(bool redoAvailable READ isRedoAvailable)
    Q_PROPERTY(bool acceptableInput READ hasAcceptableInput)
    Q_PROPERTY(QString placeholderText READ placeholderText WRITE setPlaceholderText)
    Q_PROPERTY(Qt::CursorMoveStyle cursorMoveStyle READ cursorMoveStyle WRITE setCursorMoveStyle)
    Q_PROPERTY(bool clearButtonEnabled READ isClearButtonEnabled WRITE setClearButtonEnabled)
    ......
}

2。由于我们要用到信息和槽，需要我们增加宏Q_OBJECT
3。根据自己想要的功能（达成的目标是可以显示图片，并显示信息，可以移动，图片来回切换显示，实现闪烁），定义属性信息。
4。提供函数功能，能够对我们的这个控件的信息进行修改。
5。一定要重写void paintEvent(QPaintEvent *)函数。这个是对我们控件的界面进行设置的，要使用Qt给我们提供的QPainter类，画出自己的控件。
6。就是实现自己的交互。交互这一块，我们根据功能，可以通过信号与槽来实现对应的功能。

整体上看，就是我们对这个类的封装的技巧了。

自定义–带有按键的Qlabel

需求：想在状态栏显示文字并带有按键。这个是控件的组合来达到自定义控件。
并且按键也能有自己对应的事情处理机制。简单的设置了一下。
效果:

源代码：

#ifndef FORM_H
#define FORM_H

#include <QWidget>

namespace Ui {
class Form;
}

class Form : public QWidget
{
    Q_OBJECT
    enum ButtonColor{RED,GREEN};
public:
    explicit Form(QWidget *parent = nullptr);
    ~Form();
    void setText(const QString text);
    void setButtonColor(ButtonColor color=RED);
    void setTextAndButton(const QString text,ButtonColor color);

private slots:
    void on_toolButton_triggered(QAction *arg1);
    void on_toolButton_clicked();

private:
    Ui::Form *ui;
    QStringList m_listColor;
};

#endif // FORM_H

cpp文件：

#include "form.h"
#include "ui_form.h"
#include <QDebug>

Form::Form(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Form)
{
    ui->setupUi(this);

    QString green="QToolButton { border-radius:9px;background-color: rgb(85, 255, 0);}"
                  "QToolButton:pressed {border-width:3;border-color:orange;border-style:solid;;background-color: rgb(255, 255, 255);}";
    QString red="QToolButton { border-radius:9px; background-color: rgb(255, 0, 0);}"
                "QToolButton:pressed {border-width:3;border-color:orange;border-style:solid;;background-color: rgb(255, 255, 255);}";
    m_listColor.push_back(red);
    m_listColor.push_back(green);
    //设置开始默认颜色
    setButtonColor();
}

Form::~Form()
{
    delete ui;
}

void Form::on_toolButton_triggered(QAction *arg1)
{
    qDebug()<<u8"点击了按键";
}

void Form::on_toolButton_clicked()
{
    qDebug()<<u8"点击了按键";
    //ui->toolButton->setStyleSheet("QToolButton{border-radius:9px;background-color: rgb(255, 0, 0);}");
    QString str="QToolButton {border-radius:9px; background-color: rgb(255, 0, 0);background-color: rgb(85, 255, 0);}"
                "QToolButton::pressed {color:orange;border-width:3;border-color:orange;border-style:solid;;background-color: rgb(255, 255, 255);}}";
    ui->toolButton->setStyleSheet(str);
}

void Form::setText(const QString text)
{
   ui->label->setText(text);
}

void Form::setButtonColor(ButtonColor color)
{
    ui->toolButton->setStyleSheet(m_listColor[color]);
    qDebug()<<m_listColor[color];
}

void Form::setTextAndButton(const QString text,ButtonColor color)
{
    setText(text);
    setButtonColor(color);
}