Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Correct mode to draw UI



  • Hi, I would like to draw this ui by code:
    e62953c7-6363-4dbc-9b8e-b2d14b5e75d8-image.png

    I tried to play with QGridLayout, QHBoxLayout, QSizePolicy and QGridLayout span , but the best I've had is this:
    ab2153cb-f289-4bdf-a96e-1f64453159cf-image.png

    Zip and Prov. fields too long and unaligned with upper fields.

    This is the code:

    QWidget *Cooperative::CreateGenericView(void)
    {
        QWidget *GenericWdg = new QWidget;
    
        QGridLayout *Layout = new QGridLayout;
        GenericWdg->setLayout(Layout);
    
        QLabel *lblName = new QLabel("Name");
        QLabel *lblAddress = new QLabel("Address");
        QLabel *lblZip = new QLabel("Zip");
        QLabel *lblCity = new QLabel("City");
        QLabel *lblProv = new QLabel("Prov.");
    
        QLineEdit *leName = new QLineEdit;
        leName = new QLineEdit;
        leName->setMaxLength(64);
        leName->setValidator(new QRegExpValidator(QRegExp("[A-Za-z0-9_- ]+"), this));
        SetWidgetWidth(leName, 64);
    
        QLineEdit *leAddress = new QLineEdit;
        leAddress = new QLineEdit;
        leAddress->setMaxLength(64);
        leAddress->setValidator(new QRegExpValidator(QRegExp("[A-Za-z0-9_- ]+"), this));
        SetWidgetWidth(leAddress, 64);
    
        QLineEdit *leZip = new QLineEdit;
        leZip = new QLineEdit;
        leZip->setMaxLength(MaxCapLen);
        leZip->setValidator(new QRegExpValidator(QRegExp("[0-9]+"), this));
        SetWidgetWidth(leZip, 5);
    
        QLineEdit *leCity = new QLineEdit;
        leCity = new QLineEdit;
        leCity->setMaxLength(30);
        leCity->setValidator(new QRegExpValidator(QRegExp("[A-Za-z0-9_- ]+"), this));
        SetWidgetWidth(leCity, 30);
    
        QLineEdit *leProv = new QLineEdit;
        leProv = new QLineEdit;
        leProv->setMaxLength(2);
        leProv->setValidator(new QRegExpValidator(QRegExp("[A-Za-z0-9_- ]+"), this));
        SetWidgetWidth(leProv, 2);
    
        Layout->addWidget(lblName, 1, 0);
        Layout->addWidget(leName, 1, 1);
        Layout->addWidget(lblAddress, 2, 0);
        Layout->addWidget(leAddress, 2, 1);
        Layout->addWidget(lblZip, 3, 0);
    
        QHBoxLayout *hl1 = new QHBoxLayout;
        Layout->addLayout(hl1, 3, 1, 1, 2);
    
        hl1->addWidget(leZip);
        hl1->addWidget(lblCity);
        hl1->addWidget(leCity);
        hl1->addWidget(lblProv);
        hl1->addWidget(leProv);
    
        return GenericWdg;
    }
    
    

    Can you help me to understand where I wrong?
    Thanks.

    Stefano


  • Moderators

    The last line is too long because you've set a 2 column span on the horizontal layout, Just remove it:

    Layout->addLayout(hl1, 3, 1);
    

    As for the widths - I don't know what SetWidgetWidth is, but you can remove it and just set some stretch factors, for example:

    hl1->setStretchFactor(leZip, 1);
    hl1->setStretchFactor(leCity, 10);
    hl1->setStretchFactor(leProv, 1);
    

    The 1,10,1 ratio is just an example. You can set it to be whatever you want.
    Alternatively you can fix the size of the side line edits and set the central one to expanding:

    leZip->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
    leCity->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    leProv->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
    

    Also, just a side note: just as all indexing in C++, row numbers start at 0. You added widgets to rows 1, 2 and 3, so you have an empty row at the top of the layout.



  • @Chris-Kawa said in Correct mode to draw UI:

    The last line is too long because you've set a 2 column span on the horizontal layout, Just remove it:

    Layout->addLayout(hl1, 3, 1);
    

    Yes, this solution works fine :)

    As for the widths - I don't know what SetWidgetWidth is, but you can remove it and just set some stretch factors, for example:

    hl1->setStretchFactor(leZip, 1);
    hl1->setStretchFactor(leCity, 10);
    hl1->setStretchFactor(leProv, 1);
    

    The 1,10,1 ratio is just an example. You can set it to be whatever you want.
    Alternatively you can fix the size of the side line edits and set the central one to expanding:

    SetWidgetWidth estimate width of widget about max string lenght.

    This is the function:

    void GenericDialog::SetWidgetWidth(QLineEdit *LineEdit, uint16_t len)
    {
        QString StrLen;
        for(uint16_t s = 0; s <= len; s++) StrLen += 48+s;
        QFontMetrics fm(LineEdit->fontMetrics());
    
        LineEdit->setMinimumWidth(fm.horizontalAdvance(StrLen));
    }
    
    

    I tried to use setStretchFactor, but leZip and leProv still too large.
    If I increase width of window, leZip, leCity and leProv increase his width in equal measure.

    leZip->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);
    leCity->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Fixed);
    leProv->setSizePolicy(QSizePolicy::Fixed, QSizePolicy::Fixed);

    
    

    With setSizePolicy (that I had already tried) leZip and leProv continue to still too large.
    It seems that under this measure they cannot be set.

    Also, just a side note: just as all indexing in C++, row numbers start at 0. You added widgets to rows 1, 2 and 3, so you have an empty row at the top of the layout.

    Yes, you are right, but the posted code is a small part of a larger function with other controls above.


Log in to reply