How to write code using layout for this GUI ?
-
wrote on 11 Jun 2021, 09:43 last edited by
-
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
-
wrote on 11 Jun 2021, 09:57 last edited by
@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
-
wrote on 11 Jun 2021, 10:32 last edited by
#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(); }
-
wrote on 14 Jun 2021, 04:39 last edited by 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
-
@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
wrote on 14 Jun 2021, 07:21 last edited by@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.
-
wrote on 14 Jun 2021, 07:29 last edited by
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?
wrote on 14 Jun 2021, 08:59 last edited by@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?
wrote on 14 Jun 2021, 13:59 last edited by@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.
1/9