Setting the form lines like iTunes info dialog on Mac with Qt

Question

I'm just a beginner and I wonder if it would be possible to create a form widget on Mac like the info dialog in iTunes.

I tried using:

QGroupBox: I cannot find a way to get rid of the frames.
Creating my own widget: I cannot find a way to fix the spacing between the label and the QLineEdit widget using the QVBoxLayout (actually I'm not sure I understand well the differences between margin/spacing).
QFormLayout: I cannot find a way to reduce the size of the QLabel after using setrowWrapPolicy::WrapAllRows

Also I am not (yet) very comfortable with QtDesigner, so i'd like to avoir using it (for now)

Thanks in advance

Edit: Some precisions on the programs. I use QtCreator 2.6.1 with Qt 4.8.1 and 5.0 on Mac OS X Mountain Lion.

Edit 2: Here is the code.

Subclass of QWidget:

MCLineEdit::MCLineEdit(const QString &header)
{
    m_lineEdit = new QLineEdit;
    m_lineTitle = new QLabel(header);

    QVBoxLayout *layout = new QVBoxLayout;        
    layout->addWidget(m_lineTitle);
    layout->addWidget(m_lineEdit);
    layout->setSpacing(0);
    setLayout(layout);
}

To display the widget

myView::myView(QWidget *parent) :
QWidget(parent)
{
    setFixedSize(600, 500);
    MCLineEdit *lineEdit1 = new MCLineEdit("Test 1");
    MCLineEdit *lineEdit2 = new MCLineEdit("Test 2");
    MCLineEdit *lineEdit3 = new MCLineEdit("Test 3");
    MCLineEdit *lineEdit4 = new MCLineEdit("Test 4");

    QVBoxLayout *mainLayout = new QVBoxLayout;
    mainLayout->addWidget(lineEdit1);
    mainLayout->addWidget(lineEdit2);
    mainLayout->addWidget(lineEdit3);
    mainLayout->addWidget(lineEdit4);
    mainLayout->setSpacing(0);

    setLayout(mainLayout);
}

jdi jdi · Accepted Answer · 2013-01-04T01:09:00

This can be accomplished a ton of ways I am sure. Qt gives you all the possible layouts you could need to achieve this. You could do it with a QGridLayout, and add widgets with different amounts of "cell" spanning, and control the row and column sizes to suit. Or you can just do it with a bunch of nested vertical/horizontal layouts.

For example, you can group a label and a field together in a QVBoxLayout, by adding the widgets with a left alignment, and then setting the spacing to 0 between the items:

layout->setSpacing(0);
layout->addWidget(aLabel, Qt::AlignLeft);
layout->addWidget(aLineEdit, Qt::AlignLeft);

mainVerticalLayout->addLayout(layout);

For something like the track numbers, it is just more nested layouts:

vLayout->addWidget(aLabel);
hLayout->addWidget(aCheckbox);
hLayout->addWidget(aLabel);
hLayout->addWidget(aCheckbox);
vLayout.addLayout(hLayout);

And regarding your bullet points:

QGroupBox lets you remove the frame with setFlat(bool)
With layouts, the margin is the padding around the outside of the contained widgets. What you want is setSpacing(int) to control the amount of space between the items in the layout.
QFormLayout is probably not your best choice here. That is usually for having labels on one side and widgets on the other. Basically it is a 2 column layout. A QGridLayout would be more appropriate. And to reduce the size of the QLabel, you can give it a max or a fix size. Such as using setFixedWidth() or setMaximumWidth() on the label.

Setting the form lines like iTunes info dialog on Mac with Qt

2 Answers