How to write code using layout for this GUI ?
-
I need to design this GUI using QT layout with writing code. How can I do that?
attached the snap shot
-
I need to design this GUI using QT layout with writing code. How can I do that?
attached the snap shot
@Ayush-Gupta Read documentation and examples: https://doc.qt.io/qt-5/layout.html
-
@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
-
#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(); }
-
@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
-
@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
@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.
-
I tried this but it does not works. Spacing is still there. May be due to Install button alignment?
-
I tried this but it does not works. Spacing is still there. May be due to Install button alignment?
@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 useaddLayout
from the grid layout to add it on top -
I tried this but it does not works. Spacing is still there. May be due to Install button alignment?
@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.