0

QT Designer is giving me one view of the app, and when I run the app it shows up differently.

I am using QT 6. Simple Button, two labels and a spacer put in a horizontal layout, and a horizontal slider.

Im getting weird clipping and the sliders are very different looking when rendered. Any ideas on what is going on?

Image Showing the Problem

Additional Examples

In the background is the Designer interface, the window above it is the actual application being ran using the green play button. You can see how the spacing and the size does not match. Its not very WYSIWYG, which is odd.

Also adding another layout did not fix the sizing being so far off. Adding the slider to a layout did appear to help that. Another Example

Fixing the Style

Here is another update. I was able to use the following code to change the style to match the preview in QT Creator better:

QApplication::setStyle(QStyleFactory::create("Fusion"));

This makes the slider match the preview better, and this is not that big of a deal to me though. The problem I still see is the obvious size difference between the designer window and the app. Is it possible that QT designer has a "magnification" or some sort that I am not realizing exists? I would like for the size of the elements and the spacing to be 1:1 when looking at designer and the actual application running.

Changed Style

SOLUTION

I figured out the problem and posted an answer below detailing the solution.

Dean Knight
  • 660
  • 6
  • 17

2 Answers2

1

You need to use Qt's layout management and put your widgets in layouts for them to appear properly when application is run.

First put the labels and horizontal spacer in a horizontal layout, then put pushbutton, horizontal layout and slider in a vertical layout as shown in the attached gif.

enter image description here

This is what you get when you run the window.

enter image description here

Aamir
  • 1,974
  • 1
  • 14
  • 18
  • The two labels and a spacer are in a layout. And you can see how when i run the application the spacer space is not maintained. When I do the "Preview" like you show, it does look the same as what the designer window is showing. But when I run the actual MainWindow using the green play button in QTCreator, it looks much different at run-time. Any ideas on what else I could be doing wrong here? – Dean Knight Sep 16 '22 at 19:55
  • Qt uses spacer for putting some blank spaces between widgets. The main function of the spacer is to separate the two labels, irrespective of the size of your layout/widget. In the above case one label will always be on the left side and the other will always be on the right side of your layout. – Aamir Sep 16 '22 at 20:03
  • How do you want those two labels to appear? – Aamir Sep 16 '22 at 20:04
  • When laying out the application in Designer, I expect all of the sizes shown in designer would be the same size when the application is ran. I understand if I resize the window, it will change inner widgets based on your layout. But if I lay something out, and run the application and the whole thing is noticeably smaller than what is shown in designer, it seems off. See my additional example. The windows shown in designer and the app running should be the same size, but the actual app is noticeably smaller. – Dean Knight Sep 16 '22 at 20:07
  • The whole idea behind Qt layout is to automatically arrange child widgets within a widget and to ensure that they make good use of the available space. If you want your widgets to appear as you design them in the form, then you need to hard code there position and sizes. But in that case, your widgets will not respond to window resizing. – Aamir Sep 16 '22 at 20:16
  • I understand the point of a layout. My problem is that the layout does not look physically the same in the designer window as it does when the app runs. If I run the app, it should look identical (in size and spacing) as the application does when ran. I understand if I resize the running application things will change, but they should be identical if I have not touched the window. I read about different "Styles" on another SO question so I see why the slider style is different. But this doesnt explain the spacing / size of the elements. – Dean Knight Sep 17 '22 at 04:56
  • I figured out the sizing problem. Posted an answer. Thanks for your attempt though. – Dean Knight Sep 17 '22 at 07:48
1

Fixing Style

I ended up figuring out the issue. As noted in my edit above, the following line matches up the "Style" being used for rendering. QTCreator uses "Fusion" by default. Adding the following in my main.cpp forced my application to use the same style:

QApplication::setStyle(QStyleFactory::create("Fusion"));

Fixing Sizing Difference

The other major issue I was having involved the sizes of the UI form shown in QTCreator not matching the actual application running. It turns out QTCreator will round your windows scaling to 1 or 2. If you have it set to 1.5 (150% scaling in windows display options) this makes it round to 2 (200%) making the displayed form in QTCreator much bigger. I have a multi monitor system and one of my monitors is a 4k resolution where it recommends 150% scaling. This monitor is where I do my QT work, so of course I would be running into this problem.

In order to fix this you need to set an environment variable in windows so that the true scale gets passed through to QTCreator.

The environment variable should be named: QT_SCALE_FACTOR_ROUNDING_POLICY

The value of the variable should be: PassThrough

Here is an image of someone posted in this Answer that shows them having created the variable:

Environment Variable

Result

With that variable set, I restarted QTCreator and now you can see how the sizes of the preview form in QTCreator and the actual app running fully match as you would expect.

Fixed

Dean Knight
  • 660
  • 6
  • 17