How to create custom widget and use it in Qt Designer?

Question

I extremely need to create my custom widget and use it inside QtDesigner ( promoting QWidget to my widget ). I have never done it before, and can't google anything useful. Widget i need to get is just square box with few QLabel and QLineEdit objects. For this moment i have the following code:

#include "customwidget01.h"
#include "qlabel.h"
#include "qlineedit.h"
#include "QGridLayout"
customWidget01::customWidget01(QWidget *parent) : QWidget(parent)
{
    QString textSheets = "QLabel,QLineEdit {width:60;height:20;max-width:60;max-height:20;;min-width:60;min-height:20;}";
    QString widgetSheet = "customWidget01 {width:200;height:200;max-width:200;max-height:200;;min-width:120;min-height:200;}";
    this->setStyleSheet(widgetSheet + textSheets);
    QLabel *label1= new QLabel(this);
    label1->setText("1st arg");
    QLabel *label2 = new QLabel(this);
    label2->setText("2nd arg");
    QLabel *label3= new QLabel(this);
    label3->setText("3rd arg");
    QLabel *label4= new QLabel(this);
    label4->setText("4th arg");
    QLineEdit *line1 = new QLineEdit(this);
    line1->setPlaceholderText("enter 1st arg");
    QLineEdit *line2 = new QLineEdit(this);
    line2->setPlaceholderText("enter 2nd arg");
    QLineEdit *line3 = new QLineEdit(this);
    line3->setPlaceholderText("enter 3rd arg");
    QLineEdit *line4 = new QLineEdit(this);
    line4->setPlaceholderText("enter 4th arg");
    QGridLayout *layout = new QGridLayout();
    this->setLayout(layout);
    layout->setVerticalSpacing(10);
    layout->setHorizontalSpacing(10);
    layout->addWidget(label1,0,0);
    layout->addWidget(label2,1,0);
    layout->addWidget(label3,2,0);
    layout->addWidget(label4,3,0);
    layout->addWidget(line1,0,1);
    layout->addWidget(line2,1,1);
    layout->addWidget(line3,2,1);
    layout->addWidget(line4,3,1);
    this->setVisible(true);
}

My problems are:

1. cant draw border around widget itself
2. vertical and horizontal spacings do not work

Used QtDesigner for GUI all the time - not really familiar with gui creation in plain code.

Answer 1

let me help you in order to get beautiful interface you need to learn CSS I will show you how it works that's what you have right now

This means that you do not correctly write the CSS code

QString textSheets = "QLabel,QLineEdit {width:60;height:20;max-width:60;max-height:20;;min-width:60;min-height:20;}";
QString widgetSheet = "customWidget01 {width:200;height:200;max-width:200;max-height:200;;min-width:120;min-height:200;}";
this->setStyleSheet(widgetSheet + textSheets);  // does not work

I will exchange these lines for it

QString textSheets = "QLineEdit{ border-width: 2px; border-style: solid; border-color: red green black rgb(127,255,10); }"
                      "QLabel  { border-width: 2px; border-style: solid; border-color: green black rgb(10,255,180) rgb(180,10,158); }" ;

setStyleSheet(textSheets);

and that's what result

to resize you just need to do so

//label1->setMinimumSize(150,50);
label1->setFixedSize(150,50);
//label1->setMaximumSize(150,50);
//label1->setMidLineWidth(150);

and that's what result

Answer 2

1. Add a QWidget in design mode.
2. Right click it and select Promote to... from the context menu.
3. Write the name ( customWidget01 ) of your from QWidget derived class into Promoted class name .
4. Make sure the generated text in Header file is correct.
5. Click add.
6. Select it and click promote.