[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();
}
@tab01.pro:
@Add more folders to ship with the application, here
folder_01.source = qml/tab01
folder_01.target = qml
DEPLOYMENTFOLDERS = folder_01Additional 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.qmladded 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>
#endifQT_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.0ApplicationWindow {
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 * marginColumnLayout { 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 += widgetsAdd more folders to ship with the application, here
folder_01.source = qml/tab02
folder_01.target = qml
DEPLOYMENTFOLDERS = folder_01Additional 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!