Search code examples
qtscalingqt-designer

Qt Designer: How to fix screen size disparity

I'm working on a program in QT Creator as well as in QT Designer. This is my first experience with the QT family, and I've been working on this for about 3 weeks now. I have to design a variety of menus for a study I've been assigned to make this thing for.

I'm using the QT Designer / QT Creator built-in drag-and-drop to make the biggest pieces and then using code to change some things during runtime (some rich text labels change after user input, for example). My problem is that I'm working on a two-monitor setup. One monitor is 1920 by 1080, and the other is 3840 by 2160. When I drag the running program from the 1920/1080 screen to the other, the sizing just goes all to hell. Text in the LineEdit gets cut off and often the labels just get screwy.

I'm using the "QT Widget Application" project as a base in QT Creator and all of the UI forms are .ui files, NOT .qml files. I have a substantial portion of this already done, so I need to either keep everything in .ui while fixing this or find an easy way to convert to a better format AND fix the problem.

What's very weird is that QT Designer's preview screen of the form looks the same on both screens. I can drag the main menu preview between the 1920/1080 screen and the 3840/2160 screen and there's only very minor changes. Meanwhile the running program in QT Creator has massive disparities in appearance depending on the screen.

Here's a picture to hopefully explain it better, visually:

the image.

These are just two print-screens, cropped down to show one of the things that's changing. The top half is the running program, and the bottom half is the preview, both on the same screen at the same screen size (maximized). I've tried changing the horizontalStretch and verticalStretch for various elements in the Designer but it's still borked.

This is probably a rookie problem, but I am in fact a rookie with QT. I'm just trying to make sure that no matter what screen size we run this thing on, it looks the same no matter what.

Solution

  • Looks like a problem related to widget themes in Qt.

    Qt Designer shows you the form preview using the fusion style, but when you run your program Qt will select the best match for your platform. This could explain the differences that you see. You can override this behavior forcing the fusion style.

    Edit: Another thing that you can try is to enable the Hi-DPI screen support for rendering, if not set yet. Just add this line to your main function like this:

    QApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
QApplication::setStyle(QStyleFactory::create("Fusion")); // these lines before the next
QApplication a(argc, argv);

    You will need to add #include <QStyleFactory> on top to make it work.