How to write code using layout for this GUI ?

Ayush Gupta

I need to design this GUI using QT layout with writing code. How can I do that?

attached the snap shot

jsulm

@Ayush-Gupta Read documentation and examples: https://doc.qt.io/qt-5/layout.html

Ayush Gupta

@jsulm is there any way I can divide the full form in two equal size layouts ? For example text edit box section and combo box section along with Read button

VRonin

#include <QApplication>
#include <QComboBox>
#include <QPushButton>
#include <QLineEdit>
#include <QTextEdit>
#include <QGridLayout>
#include <QFormLayout>
#include <QLabel>
#include <QGroupBox>
#include <QSplitter>

class LayedOutWidget : public QWidget{
    Q_DISABLE_COPY(LayedOutWidget)
public:
    explicit LayedOutWidget(QWidget* parent = nullptr)
        :QWidget(parent)
    {

        QWidget* leftSplit = new QWidget(this);
        QComboBox* combo = new QComboBox(leftSplit);
        combo->addItem(tr("test.xml"));
        QPushButton *readButton = new QPushButton(tr("Read"),leftSplit);

        QGroupBox* originalGroup = new QGroupBox(tr("Original Configuration File"),leftSplit);
        QLabel* originalFileName = new QLabel(tr("test.xml"),originalGroup);
        QLabel* originalModified = new QLabel(tr("06/10/2020 11:30:45"),originalGroup);
        QLabel* originalSize = new QLabel(tr("13252 Bytes"),originalGroup);
        QLabel* originalMD5 = new QLabel(tr("e1226a0b62"),originalGroup);
        QFormLayout* originalLay = new QFormLayout(originalGroup);
        originalLay->addRow(tr("File Name:"), originalFileName);
        originalLay->addRow(tr("Modified:"),originalModified);
        originalLay->addRow(tr("Size:"),originalSize);
        originalLay->addRow(tr("MD5 Hash:"),originalMD5);

        QGroupBox* modifiedGroup = new QGroupBox(tr("Modified Configuration File"),leftSplit);
        QLabel* modifiedFileName = new QLabel(tr("Test.XML"),modifiedGroup);
        QLabel* modifiedModified = new QLabel(tr("06/10/2020 11:30:45"),modifiedGroup);
        QLabel* modifiedSize = new QLabel(tr("13252 Bytes"),modifiedGroup);
        QLabel* modifiedMD5 = new QLabel(tr("e1226a0b62"),modifiedGroup);
        QFormLayout* modifiedLay = new QFormLayout(modifiedGroup);
        modifiedLay->addRow(tr("File Name:"), modifiedFileName);
        modifiedLay->addRow(tr("Modified:"),modifiedModified);
        modifiedLay->addRow(tr("Size:"),modifiedSize);
        modifiedLay->addRow(tr("MD5 Hash:"),modifiedMD5);

        QGridLayout* leftLay=new QGridLayout(leftSplit);
        leftLay->addWidget(combo,0,0);
        leftLay->addWidget(readButton,0,1);
        leftLay->addWidget(originalGroup,1,0,1,2);
        leftLay->addWidget(modifiedGroup,2,0,1,2);

        QWidget* rightSplit = new QWidget(this);
        QLineEdit* keywordEdit = new QLineEdit(rightSplit);
        QPushButton *findButton = new QPushButton(tr("Find"),rightSplit);
        QTextEdit* textEdit = new QTextEdit(rightSplit);
        QGridLayout* rightLay=new QGridLayout(rightSplit);
        rightLay->addWidget(new QLabel(tr("KeyWord"),rightSplit),0,0);
        rightLay->addWidget(keywordEdit,0,1);
        rightLay->addWidget(findButton,0,2);
        rightLay->addWidget(textEdit,1,0,1,3);

        QSplitter* mainSplitter= new QSplitter(Qt::Horizontal,this);
        mainSplitter->setHandleWidth(0);
        mainSplitter->setChildrenCollapsible(false);
        mainSplitter->addWidget(leftSplit);
        mainSplitter->addWidget(rightSplit);
        mainSplitter->setStretchFactor(0,1);
        mainSplitter->setStretchFactor(1,1);
        QGridLayout* mainLay=new QGridLayout(this);
        mainLay->setContentsMargins(0,0,0,0);
        mainLay->addWidget(mainSplitter);
    }
};

int main(int argc, char *argv[])
{
    QApplication app(argc,argv);
    LayedOutWidget wid;
    wid.show();
    return app.exec();
}

Ayush Gupta

@VRonin said in How to write code using layout for this GUI ?:

leftLay->addWidget(originalGroup,1,0,1,2);

Thanks I tried seems to be working upto good level.

I have one problem how to remove the extra space from Keyword label. and it should be exact space equal to its size

attached the snap shot

SimonSchroeder

@Ayush-Gupta said in How to write code using layout for this GUI ?:

I have one problem how to remove the extra space from Keyword label. and it should be exact space equal to its size

Layouts compute the distribution of columns/rows automatically. You can define the stretching of separate columns or rows (depending on the layout). Given the code above this would be:

rightLay->setColumnStretch(1, 255);

This will only resize the first column when resizing the widgets. This means that only the line edit will be stretched.

Ayush Gupta

I tried this but it does not works. Spacing is still there. May be due to Install button alignment?

VRonin

@Ayush-Gupta said in How to write code using layout for this GUI ?:

May be due to Install button alignment?

BINGO!

make an QHBoxLayout for the keyword label, edit and button and then use addLayout from the grid layout to add it on top

SimonSchroeder

@Ayush-Gupta said in How to write code using layout for this GUI ?:

I tried this but it does not works. Spacing is still there. May be due to Install button alignment?

Or, instead of what @VRonin suggested (which works BTW), you can make the grid layout with 4 columns. The install button would stretch over 2 columns and the line edit would stretch over 3 columns.