Why is this Designer form not sufficiently WYSIWYG?

[JonB]

Qt 5.15.3, Creator 6.0.2, as supplied with Ubuntu 22.04.

I don't understand why my design case does not show as truly WYSIWYG in Designer, and differs (irritatingly) from runtime/preview?

The above shot is in Designer. I have a QFormLayout. I start with each row being a label (column #0) plus a spinbox (column #1). You can see from the bottom half above (last 3 rows) that rows are equally spaced vertically with a "small" gap, just as I want.
Now I need to make each value widget in the QFormLayout have a little QToolButton to the right (to set it to 0). So I make column #1 be a QWidget, set its layout horizontal, and put the QSpinBox + QToolButton on that. I set the layout to have all its margins as 0. I have completed that for the first 2 rows. If you look, you can clearly see that the vertical spacing between the changed rows (look at the spacing below the 2 rows which have the spinbox + toolbutton) is now higher/greater than it was/still is for the other rows.

But if I run the application or choose Preview in Designer what I get is:

This is indeed what I want. But it's not what I expected to get from the first screenshot as Designer shows it. And that can make it hard to judge some things, as it shows as taller than it will be at runtime.

Why is this? Have I failed to do something which would make Designer more accurate? What is it I have done which makes Designer now show it different from run/preview-time?

UPDATE
When I look at the .ui file it defines the QFormLayout's rows/columns in an "odd" order (not sequentially), doubtless as a result of the order I happen to have edited in. I notice that it "skips" some row numbers, they are simply not present. That implies it has defined some "empty" rows. I wonder if this might be why it displays differently at design-time than at runtime? When I am finished editing I will go through the .ui file manually editing to make it have no missing rows, and will report back if that changes the situation....

[JonB]

Hmm, OK, it was indeed caused by the "missing/gap" row numbers, which are produced by Designer depending on how you happen to edit.

To fix, I right-click on the .ui file and select Open With > Plain Text Editor, and initially see this:

See the "gaps"? I edit these row="..." numbers to be consecutive, without gaps and starting from 0, and save. Now when I open it normally with the Form Editor it shows as properly WYSIWYG for what I will get at run/preview time again.

Now I seem to recall having this issue with QGridLayout as well as QFormLayout in the past. As you edit it may cause "gaps" in row numbers. Missing rows seem to be quite invisible and take up no space at run/preview time, but at design time Designer must be leaving a little vertical gap to allow for them, for some reason? It's annoying because you cannot seem to discover or adjust this from Designer, you have to do above editing by hand....

But mystery solved.

[CPPUIX]

I face this situation regularly as well, but I had no Idea how to form a proper clear question about it, my solution was to just stuff spacers in my forms, which seemed to work.

Thank you for this clarification!