[solved]Appearance difference



  • Possibly another beginner question:
    When I build the qml example 'gallery' on a windows machine, it looks like this:
    !http://blog.qt.digia.com/wp-content/uploads/2012/08/native-text-widgets.png(image original look)!
    The look is the typical Windows look for me.
    However, if I create a own applicationwindow with menus and tabs (using the QQmlApplicationEngine and QtQuick.Controls) , the style looks quite different...somewhat similar to:
    !http://www.ics.com/sites/default/files/snapshot2.png(image other look)!
    I wasn't able to figure out, why there is this style difference. I there something where you can specify it?
    Thank you very much!



  • Yes. The main difference is that the QStyle used for native look and feel requires linking against and using the widget library. If you replace QGuiApplication with QApplication you will get the same appearance as with qmlscene.



  • Great, thank you for the explanation!
    Unfortunately, I haven't managed to change the look with your advice. I did the following:
    *main.cpp:
    @
    //#include <QtGui/QGuiApplication> // commented
    #include <QApplication> // added

    #include <QQmlApplicationEngine>
    #include <QQuickWindow>

    #include <QtQml>
    // #include <cppadder.h>

    int main(int argc, char *argv[])
    {
    QGuiApplication app(argc, argv);

    // qmlRegisterType<CppAdder>("CppAdder",1,0,"CppAdder");
    
    QQmlApplicationEngine engine;
    engine.load(QUrl("qml/tab01/main.qml"));
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    window->show();
    return app.exec&#40;&#41;;
    

    }
    @

    tab01.pro:
    @

    Add more folders to ship with the application, here

    folder_01.source = qml/tab01
    folder_01.target = qml
    DEPLOYMENTFOLDERS = folder_01

    Additional import path used to resolve QML modules in Creator's code model

    QML_IMPORT_PATH =

    The .cpp file which was generated for your project. Feel free to hack it.

    SOURCES += main.cpp

    Installation path

    target.path =

    Please do not modify the following two lines. Required for deployment.

    include(qtquick2applicationviewer/qtquick2applicationviewer.pri)
    qtcAddDeployment()

    OTHER_FILES +=
    qml/tab01/MyButton.qml

    added for #include <QApplication>

    QT +=widgets
    @

    These modifications apparently weren't enough. What else do I need to change?
    Thank you very much for your help!

    PS: Would you recommend to stick to the QtGuiApplication? Is it lighter in the end?



  • You also need to change line 12 in main.cpp ( QGuiApplication to QApplication ). Unless you are developing for a constrained mobile platform, I don't think you need to be concerned about the resource usage of depending on widgets in your app.



  • Hi Jens, thank you for your quick reply. I tried your suggestion and it looks closer now, but it is not identical yet.

    Look of the qt quick controls - basic layouts example:

    !http://www.freeimagehosting.net/newuploads/6b95n.png(basic layouts from example)!

    and this is the look I get with the code below:
    !http://www.freeimagehosting.net/newuploads/oxell.png(basic layouts own build)!

    The code to create the second look above is more or less copied from the example on the top:
    main.cpp
    @

    #include <QtQml>
    #include <QtQuick/QQuickView>
    //#include <QtCore/QString>

    #ifdef QT_WIDGETS_LIB
    #include <QtWidgets/QApplication>
    #else
    #include <QtGui/QGuiApplication>
    #endif

    QT_BEGIN_NAMESPACE

    #ifdef QT_WIDGETS_LIB
    #define Application QApplication
    #else
    #define Application QGuiApplication
    #endif

    #define QT_QUICK_CONTROLS_EXAMPLE_MAIN(url)
    int main(int argc, char *argv[])
    {
    Application app(argc, argv);
    QQmlApplicationEngine engine;
    engine.load(QUrl("qml/tab02/main.qml"));
    QObject *topLevel = engine.rootObjects().value(0);
    QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel);
    if ( !window ) {
    qWarning("Error: Your root item has to be a Window.");
    return -1;
    }
    window->show();
    return app.exec();
    }

    QT_END_NAMESPACE
    @

    main.qml:
    @
    import QtQuick 2.1
    import QtQuick.Controls 1.1
    import QtQuick.Layouts 1.0

    ApplicationWindow {
    title: "Basic layouts"
    property int margin: 11
    width: mainLayout.implicitWidth + 2 * margin
    height: mainLayout.implicitHeight + 2 * margin
    minimumWidth: mainLayout.Layout.minimumWidth + 2 * margin
    minimumHeight: mainLayout.Layout.minimumHeight + 2 * margin

    ColumnLayout {
        id: mainLayout
        anchors.fill: parent
        anchors.margins: margin
        GroupBox {
            id: rowBox
            title: "Row layout"
            Layout.fillWidth: true
    
            RowLayout {
                id: rowLayout
                anchors.fill: parent
                TextField {
                    placeholderText: "This wants to grow horizontally"
                    Layout.fillWidth: true
                }
                Button {
                    text: "Button"
                }
            }
        }
    
        GroupBox {
            id: gridBox
            title: "Grid layout"
            Layout.fillWidth: true
    
            GridLayout {
                id: gridLayout
                rows: 3
                flow: GridLayout.TopToBottom
                anchors.fill: parent
    
                Label { text: "Line 1" }
                Label { text: "Line 2" }
                Label { text: "Line 3" }
    
                TextField { }
                TextField { }
                TextField { }
    
                TextArea {
                    text: "This widget spans over three rows in the GridLayout.\n"
                        + "All items in the GridLayout are implicitly positioned from top to bottom."
                    Layout.rowSpan: 3
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                }
            }
        }
        TextArea {
            id: t3
            text: "This fills the whole cell"
            Layout.minimumHeight: 30
            Layout.fillHeight: true
            Layout.fillWidth: true
        }
    }
    

    }
    @

    tab02.pro:
    @
    QT += widgets

    Add more folders to ship with the application, here

    folder_01.source = qml/tab02
    folder_01.target = qml
    DEPLOYMENTFOLDERS = folder_01

    Additional import path used to resolve QML modules in Creator's code model

    QML_IMPORT_PATH =

    The .cpp file which was generated for your project. Feel free to hack it.

    SOURCES += main.cpp

    Installation path

    target.path =

    Please do not modify the following two lines. Required for deployment.

    include(qtquick2applicationviewer/qtquick2applicationviewer.pri)
    qtcAddDeployment()
    @

    Do you have an idea why there is still this difference in the look? Sorry for the huge post :)



  • I am a bit puzzeled as that should really just work. I presume this is copied from the included qt quick examples. Does the same apply when you compile the gallery directly from there?

    Perhaps you simply need to re-run qmake or qmake -r in order for the project to be updated properly.



  • Weird, I did it once again from scratch...and now it works! Nice, thank you!
    However, I recognized a funny behavior: If I now use the QApplication look and set a 'TabViewStyle' inside a TabView, the look automatically reverts back to the QGuiApplication look. Is that intended? Or is it not possible to specify any styles in QApplication?

    Looking forward to you answer!

    btw: awesome forum and help!!!



  • That is intended. Custom styles are all based on the same cross platform look to keep things a bit predictable. We are considering adding some style hints to allow customisation of platform styles but for the moment you cannot tweak the native styles a lot.



  • Alright, so I will probably stick to the cross platform look!
    Thank you very much for answering all my questions!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.