Идём в дизайнер и создаём пустой QWidget
. Клацаем по нему правой кнопкой и нажимаем Изменить styleSheet...
. В появившемся диалоге вписываем стиль для серого обрамления всего виджета:
border: 1px solid rgb(189, 189, 189);
Далее накидываем 4 QLineEdit
'а в строку. Не забываем выставить в свойствах выравнивание текста по середине. Каждому также прописываем стиль:
border: none;
Между ними создаём по QLabel
'у, итого 3 штуки, вбиваем в качестве текста точку. Стиль прописываем:
background: white;
border: none;
Каждому виджету в свойство maximumSize
указываем высоту 30
.
Компонуем по горизонтали все созданные виджеты. Свойству layoutSpacing
ставим 0
, свойства layout*Margin
ставим так, чтобы рамка не уезжала (у меня 2
).
Для проверки того, входит ли в диапазон [0, 255)
, в конструктор добавить что-то подобное:
const auto* validator = new QIntValidator(0, 255, this);
octet_1->setValidator(validator);
octet_2->setValidator(validator);
octet_3->setValidator(validator);
octet_4->setValidator(validator);
auto lockOctet = [validator](QLineEdit* octet) {
return [octet,validator](const QString& str) {
int pos = 0;
if(validator->validate(const_cast<QString&>(str), pos) != QValidator::Acceptable) {
octet->setText(str.chopped(1));
}
};
};
connect(octet_1, &QLineEdit::textEdited, lockOctet(octet_1));
connect(octet_2, &QLineEdit::textEdited, lockOctet(octet_2));
connect(octet_3, &QLineEdit::textEdited, lockOctet(octet_3));
connect(octet_4, &QLineEdit::textEdited, lockOctet(octet_4));
У меня выглядит как-то так:

Ну и конечно всё это лучше обернуть в отдельный класс.