qt

Layout for a custom dialog box

In my Qt desktop app i need a dialog for a user to enter some data. So I select: New file | Qt | Designer form class then Dialog with buttons bottom and name it appropriately.

In the new dialog's constructor I create some labels and line edits and add them to a grid layout. Like this:

ui->setupUi(this);

partNoLabel = new QLabel(tr("&Part No:"));
partDescLabel = new QLabel(tr("&Description:"));

partNoLineEdit = new QLineEdit();
partDescLineEdit = new QLineEdit();

partNoLabel->setBuddy(partNoLineEdit);
partDescLabel->setBuddy(partDescLineEdit);

supplierLabel = new QLabel(tr("Supplier"));
supPartNoLabel = new QLabel(tr("Part No"));
supplierLineEdit = new QLineEdit();
supPartNoLineEdit = new QLineEdit();

supplierLabel->setBuddy(supplierLineEdit);
supPartNoLabel->setBuddy(supPartNoLineEdit);


QGridLayout *dlgLayout = new QGridLayout;
dlgLayout->addWidget(partNoLabel, 0, 0);
dlgLayout->addWidget(partNoLineEdit, 0, 1);
dlgLayout->addWidget(partDescLabel, 1, 0);
dlgLayout->addWidget(partDescLineEdit, 1, 1);

dlgLayout->addWidget(supplierLabel, 2, 0);
dlgLayout->addWidget(supplierLineEdit, 2, 1);
dlgLayout->addWidget(supPartNoLabel, 3, 0);
dlgLayout->addWidget(supPartNoLineEdit, 3, 1);

setLayout(dlgLayout);

setWindowTitle("New part");

When displayed, though - it looks terrible:

dialog showing buttons over edit boxes

and when resized, looks worse:

resized dialog showing buttons over edit boxes

This is obviously unacceptable, how do I fix this, or how should I have done this?

Fixed version :

I followed Gábor Angyal advice and did it manually, removing and adding a button box in code. I also changed to using a FormLayout as described in this article: http://doc.qt.digia.com/qq/qq25-formlayout.html

The resulting form looks like:

fixed dialog

which still needs a tweak or two, but at least the buttons are in the right place :D .

Solution

  • The problem is that you created a layout manually, but did not add the button box to it. I suggest you to either create the whole form using Designer, or do everything manually, but do not mix the two.

    With Designer

    Manual