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

Qt Creator WYSIWYG isn't giving a true representation



  • This is part of the form whilst editing in Qt Creator:
    creator.png

    This is the same form when running as application on desktop:
    IMG_0355.jpg

    In both cases I've screen printed and cropped the area. Why is the final presentation in the compiled application when running on the desktop so different from the view in Qt Creator?

    Also notice the controls used in Qt Creator are not quite the same as those when running in the application, note that the rectangles for the buttons and combo are sharp when running in the application and very slightly rounded when running in Qt Creator.

    I'm using Qt 4.4.1, Based on Qt 5.9.2 (MSVC 2015, 32 bit).


  • Lifetime Qt Champion

    @SPlatten The running application uses the default platform theme to look like an app on that platform should. In designer the platform theme is not set I guess. So, as long as your app looks like it should when running I would not bother.



  • @jsulm , thank you, but the point is I want to design the application in Qt to look the same as it will when running, presently in Qt Creator everything looks find, but when running as you can see in the screen shots it does not.

    I'm more concerned about the labels being resize and not fitting. How can I set-up Qt Creator to match what will be in the final application when running?


  • Lifetime Qt Champion

    @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    I'm more concerned about the labels being resize and not fitting

    Sounds more like layout issue than theme. What happens if you resize the window/widget in designer?
    Also, does your app look like any other app on the same system?



  • @jsulm , whilst viewing in designer the form fits perfectly and everything looks great. The look of the controls do look the same as other native applications, however the point I'm trying to make is that forms in Qt Creator shouldn't look different in design to how they will when compiled.

    Qt Creator should present the forms in the way they will look when running on the host, which currently is very different. I would understand if I was viewing the same application on a different OS, but its the same host, not a different OS and not a different system.



  • @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    How can I set-up Qt Creator to match what will be in the final application when running?

    Layouts apply first when you run your app. So, what you see in QtCreator's Design mode may look different from what your app / widgets really look on runtime.


  • Lifetime Qt Champion

    @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    whilst viewing in designer the form fits perfectly and everything looks great

    That's why I asked what happens if you resize the form in designer? Does everything still fit?

    It would make sense if QtDesigner would use the platform theme by default, but this is something for a change request on Qt bug-tracker.



  • @jsulm, Given the age and maturity of Qt Creator I would expect this to be the default behaviour.



  • @Pl45m4 , why? When I use an WYSIWYG editor I expect the output to be exactly as I design, unless I resize it.


  • Lifetime Qt Champion

    @SPlatten Since I'm not a QtDesigner developer I can't comment on the reasons for that, you can ask on the Qt mailing list.


  • Lifetime Qt Champion

    @Pl45m4 said in Qt Creator WYSIWYG isn't giving a true representation:

    Layouts apply first when you run your app

    They also take effect in designer (try to resize the form with properly set layouts).



  • @jsulm said in Qt Creator WYSIWYG isn't giving a true representation:

    They also take effect in designer (try to resize the form with properly set layouts).

    But nevertheless the behavior / look is or feels a bit different in QtDesigner (from my experience)



  • @SPlatten

    What layouts do you have here and how are your sizeHints and stretches configured?



  • @Pl45m4, the main layout is a QGridLayout, however the controls that I'm having a problem with are not in the layout they children of the centralWidget.


  • Lifetime Qt Champion

    @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    however the controls that I'm having a problem with are not in the layout they children of the centralWidget.

    That's why I asked (two times) what happens if you resize the form in designer, but you still did not answer...



  • @jsulm , nothing happens if I resize in the designer.


  • Lifetime Qt Champion

    @SPlatten So, this is indeed a problem with layouts (or lack of layouts) and not themes...



  • @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    are not in the layout they children of the centralWidget.

    So your "Select Trainee" label is floating around? :)
    Then you don't have to wonder why other widgets cover it.



  • @Pl45m4 , On this form there are four buttons to the left of the label, these are all of a specific size and position, when viewing in designer everything looks great and nothing is wrong.

    When I launch the application I am not resizing or moving anything, it initial state looks very different from how it did in designer.

    No other widgets are covering it, the font size and size of the label is different.



  • @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    No other widgets are covering it

    I thought the button on the left is covering your text...

    the font size and size of the label is different.

    Because the size of your label is not expanding with its content, because no layout will stretch your label :)
    You could try to set a minimum size in QtDesigner that fits your content.



  • @Pl45m4 , thank you, I've dropped in a Horizontal Layout and added the top row of controls to that, the application is better, although the presentation in designer is still not the same and whilst it's perfect in designer, the application still has a label that isn't displaying all characters.



  • @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    the application still has a label that isn't displaying all characters.

    Weird. Shouldn't be the case, if done right.



  • @Pl45m4 , in fact every thing I've tried still results in the label showing everything except the first letter "S".



  • @SPlatten

    I believe there's still something wrong. Show your layout please (the layout / widget setup and the result you get)



  • @SPlatten
    I think it is layout issue.
    In QT Creator You see it
    But while compiling it may show some or none of things

    Try applying horizontal layout label and QComboBox as discussed by @Pl45m4
    Then I am sure It will work
    It may not work if the window size is small Try resizing it

    Why you can't expect the output from QT Creator
    The height and width in QT Creator just for there unless layout is applied to it?
    If the design in QT Creator fills the screen properly Then would you expect it fill to all screens in the same behaviour "NO"
    So It's specific to that size only So I guess layouts are
    EASY
    RESPONSIVE
    ATTRACTIVE

    I hope it helps



  • This is now resolved, I redid the main window ui, the top line buttons and widgets are now in a horizontal layout with the main window content in a grid layout. As a WYSIWYG editor Qt Creator is rubbish because the presentation of what you see is not what you get.


  • Lifetime Qt Champion

    @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    As a WYSIWYG editor Qt Creator is rubbish because the presentation of what you see is not what you get.

    I don't see how this should work - first you've styles which slightly modifies the items and then you can set the sizes and others by code - so what do you expect that this should work out?
    That's why you have to use layouts - they arrange the widgets the way you want without killing the layout when another style is used or similar.


  • Lifetime Qt Champion

    @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    As a WYSIWYG editor Qt Creator is rubbish

    I think the mistake you were doing was that you were designing your UI manually (positions and sizes of the widgets) for a specific theme. This is a very bad idea in my opinion because your UI is going to break as soon as the theme changes.
    Lets assume QtDesigner would use the system theme, you are on Windows 10 and design your UI manually, everything is fine. One day Microsoft changes the theme (this will for sure happen one day) - your UI breaks, you have to adjust the UI and rebuild your app for the new Windows version. And there is one more thing to consider: if you're working on a cross platform app then your UI will only behave properly on the platform were you created it...

    I use QtDesigner a lot and don't see how it is rubbish as long as you use layouts. So, instead of blaming the tool use it properly.



  • Perhaps rubbish is too harsh, but I've used various GUI tools and IDE's and generally when designing a GUI in a front end, what you end up with in your application is exactly how you left it in the designer. This isn't always the case in Qt Creator.

    I'm not sure what you mean by themes, I drag and drop widgets from the palette onto the form and edit properties if required, in code I didn't modify anything, however now its fixed.


  • Lifetime Qt Champion

    @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    I'm not sure what you mean by themes

    This thread started with you saying that QtDesigner does not use system theme (which is correct observation).



  • @jsulm , I don't follow at all.


  • Lifetime Qt Champion

    @SPlatten "Also notice the controls used in Qt Creator are not quite the same as those when running in the application, note that the rectangles for the buttons and combo are sharp when running in the application and very slightly rounded when running in Qt Creator." - you wrote this, right?
    Also: "Qt Creator should present the forms in the way they will look when running on the host, which currently is very different"

    So, what I mean is: QtDesigner does not use the system theme (the one used in the OS it is running on).



  • @jsulm , ok, thank you, and why is that? Surely thats either a design fault?

    Is it a setting I can change?


  • Lifetime Qt Champion

    @SPlatten said in Qt Creator WYSIWYG isn't giving a true representation:

    ok, thank you, and why is that? Surely thats either a design fault?

    No design fault - it's a design feature that your app uses the style of the OS so it looks native.


  • Lifetime Qt Champion

    @SPlatten I don't know why QtDesigner does not use the system theme and I'm not aware of any settings for that. Qt developers on Qt Mailing List could provide more information about this issue.



  • @Christian-Ehrlicher , thats exactly what I want as the default behaviour, but thats not what I'm seeing. What I'm getting is a slightly different look in the designer to the end product.



  • I agree that the Qt Designer is not very good. I had a harder time learning the designer instead of writing C++ code. Especially handling layouts is quite cumbersome in the designer. Most of the time I would be much faster writing things down in C++. But our project uses ui-files.

    You can have a look how things would look like in the native style by using the menu: Tools -> Form Editor -> Preview. It is not entirely WYSIWYG, but you don't have to compile and run your application first to see how it looks. It will not know about your stylesheets, though (maybe there is a way to let it know about them). Also, showing a dialog in your application might actually resize the widget (especially when it contains layouts) whereas the preview shows you the same size as the designer.

    The designer was done for designers who don't know how to code. If you know how to code, I personally prefer to write things down in C++. This gives me much better control over everything and even shifting around things inside the layout is much faster. Sometimes to add something to a complex grid layout you have to break the layout first, then reposition everything in the designer so that when you reapply the grid layout it will pick up on everything correctly. That is way faster in C++ code.

    I don't expect any improvements for the Qt Designer. Designers (the people) are now targeted with QML instead (and also Qt Studio and the like with the commercial licenses).


  • Lifetime Qt Champion

    @SPlatten I don't see what's wrong that there is another style used in designer - your layout should look good with all styles.
    You can select the style for the preview in QtCreator -> extra -> layout editor -> preview in -> <your desired style>



  • As previously noted, Qt GUI programs generally default to a style that matches the runtime environment to a reasonable degree. Designer on my Linux box defaults to the Fusion style. The program can force the style but a quick look at the Designer source does not immediately suggest it does.

    Designer, like any idiomatic Qt GUI program, accepts the command line option "-style stylename". As far as I can tell the common option (depending on platform) are: Windows, WindowsXP, WindowsVista, Android, Fusion, Macintosh. On my Linux box I also have a Breeze and Oxygen style. If, on the platform you are running, it is possible to display in that style it will, or it will report to the console the allowable options and fall back to something that can work. I think Fusion is available and consistent for all platforms.

    Within Designer you can preview your UI in any of the styles that can be rendered in your development environment. It's on one of the menus.

    QtCreator also accepts the flag, but the main UI is so heavily customized the only difference seems to be in the menu look-and-feel.

    Your program can force a style (QApplication::setStyle()) and accept that your program looks different to the other native apps. The Windows style emulation on Linux is Windows95-ish and truly awful ;)

    You can develop your own style to plug in, but that's a lot of work.


Log in to reply