1. Customize Qt widgets/controls

In some cases, we found that a Qt widget required more custom customization than it could set properties in Qt Designer or the functions called on it. A simple and straightforward solution is to subclass the relevant widget class and adapt it to our needs.

This article mainly demonstrates how to use the custom window control by implementing a hexadecimal spinner.

2. Hex spinner (SpinBox)

QSpinBox generally only supports decimal integers, but by rewriting some methods, it can support hexadecimal values.

2.1. Implementation ideas

1. We restrict the input numbers and characters through regularization. [0-9a-fA-F]{1,8}
2. The rewrite validatemethod is used to check the legality of the input text so far.
3. Rewrite textFromValuemethod, used to convert an integer value into a string. Here we need to change the rules to hexadecimal.
4. Rewrite valueFromTextthe method, which is used to reverse the conversion of the string to the integer value. Similarly we also need to change to hexadecimal rules.

2.2. Source code

HexSpinBox.h

#ifndef HEXSPINBOX_H
#define HEXSPINBOX_H

#include <QSpinBox>

class HexSpinBox : public QSpinBox
{
    
    
public:
    HexSpinBox(QWidget* parent = nullptr);

protected:
    // 重写三个重要的方法
    QValidator::State validate(QString& text, int& pos) const override;
    int valueFromText(const QString& text) const override;
    QString textFromValue(int value) const override;

private:
    QRegExpValidator* validator;

};

#endif // HEXSPINBOX_H

HexSpinBox.cpp

#include "HexSpinBox.h"

HexSpinBox::HexSpinBox(QWidget* parent)
    :QSpinBox{
    
    parent}
{
    
    
    setRange(0, 255);
    validator = new QRegExpValidator(QRegExp("[0-9a-fA-F]{1,8}"), this); // 0x00 0xFF

}

QValidator::State HexSpinBox::validate(QString &text, int& pos) const
{
    
    
    return validator->validate(text, pos);
}

int HexSpinBox::valueFromText(const QString& text) const
{
    
    
    return text.toInt(nullptr, 16);
}

QString HexSpinBox::textFromValue(int value) const
{
    
    
    return QString::number(value, 16).toUpper();
}

3. How to use

There are two general usage methods, either directly creating the HexSpinBox control through code, or upgrading the widget through Qt Designer.

3.1, code to add custom widgets/controls

The code is very simple, the same as the normal control usage.

    HexSpinBox spin;
    spin.show();

3.2. Qt Designer adds custom widgets/controls

step:

Create a QSpinBox by dragging a QSpinBox from the Qt Designer widget toolbar onto the form.
Right-click the spinner and select "Promote to Custom Widget" from the context menu.
In the pop-up dialog box, fill in "HexSpinBox" as the name of the class, and fill in "hexspinbox.h" as the name of the header file.

On the right side, you can find that the type of this object is already HexSpinBox, which means success.
insert image description here

3.3. Operation effect

insert image description here

4. Disadvantages

In Qt Designer, those specific properties in a custom widget cannot be accessed, and the widget itself cannot be drawn. Both of these problems can be solved by using the plug-in method. It will be covered in the next chapter.

Qt custom widgets/controls (implement a hexadecimal spinner SpinBox)

Table of contents