Qml items with native look and feel
-
Hi there,
I am making and app and I want it to have a native look and feel, but when I'm using buttons, checkBoxes and others they just do not look like native... How can I make it?
Thanks!
-
Hello and welcome to devnet,
you can design the QML items customly. For me the default CheckBox already looks native, or do i misunderstand you somehow? Could you explain a little further how it should looks like? Then i could provide you an example of a native CheckBox.
-
This is a non native checkBox form qt
!https://dl.dropboxusercontent.com/u/1242513/not_native.png(Not native)!ant this is how it looks native (also done with qt)
!https://dl.dropboxusercontent.com/u/1242513/native.png(native)! -
Well, i guess thats not that simple to made due to the hook and diverse gradients. Sorry, but i can not provide you an example for that, yet. But you can customize your components using the style property of the component:
@CheckBox {
style: CheckBoxStyle {
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
radius: 4
border {
color: "gray"
width: 1
}
Rectangle {
visible: control.checked
color: "#555"
border.color: "#333"
radius: 1
anchors {
margins: 4
fill: parent
}
}
}
}
}@You will have to import QtQuick.Controls.Styles 1.x to use the CheckBoxStyle.
-
And how is the "Qt Quick Controls - Gallery" example project doing it?
I checked out the code but it is not clear to me :(
-
How is your main(), do you create a QGuiApplication or QApplication?
You need QApplication for platform styling to take effect when using QtQuick.Controls
-
bq. And how is the “Qt Quick Controls – Gallery” example project doing it?
I checked out the code but it is not clear to me :(I also checked "this":http://qt-project.org/doc/qt-5/qtquickcontrols-gallery-example.html code. As we can see in the controls.qml, the CheckBox is a default CheckBox.
@CheckBox {
id: frameCheckbox
text: "Text frame"
checked: true
Layout.minimumWidth: 100
}@But in the Styles.qml the CheckBox has got a changed style property:
@style: CheckBoxStyle{}@
It changes it's style if you set the style to CheckBoxStyle{} .
I was guessing the CheckBoxStyle is like the default CheckBox style just with the opportunity to change it. Looks like it has a custom style similar to the native look already included. I couldn't find more changes in the qt quick controls gallery.I've compiled the hole project on my computer, it doesn't look like it does on the picture, so i guess the picture was taken on an older qt version were another style was the default style. Or maybe it was compiled on another machine? Windows 7 here.
-
[quote author="onek24" date="1400835615"]
I was guessing the CheckBoxStyle is like the default CheckBox style just with the opportunity to change it. Looks like it has a custom style similar to the native look already included. I couldn't find more changes in the qt quick controls gallery.[/quote]When you do
@style: CheckBoxStyle{}@you get a default base style that is the same across all platforms. It is really hard and not quite well defined to keep some parts of a native control and just replace other parts.
Please see the response to a similar question on the "development mailing list":http://lists.qt-project.org/pipermail/development/2014-April/016656.html
-
[quote author="joanpuigsanz" date="1400768255"]And how is the "Qt Quick Controls - Gallery" example project doing it?[/quote]
It uses a QApplication if linked with widgets (QT += widgets), or a QGuiApplication if widgets is not used.
You can test this by removing QT += widgets in gallery.pro and you will see it uses platform styling only when QT += widgets is used.
-
[quote author="Torgeir" date="1400838295"][quote author="joanpuigsanz" date="1400768255"]And how is the "Qt Quick Controls - Gallery" example project doing it?[/quote]
It uses a QApplication if linked with widgets (QT += widgets), or a QGuiApplication if widgets is not used.
You can test this by removing QT += widgets in gallery.pro and you will see it uses platform styling only when QT += widgets is used.
[/quote]
Thanks for that info, i'll check it out later.
-
I solved using QApplication in the main.cpp. I used the header from the Gallery example.
@
#ifndef QTQUICKCONTROLSAPPLICATION_H
#define QTQUICKCONTROLSAPPLICATION_H#ifdef QT_WIDGETS_LIB
#include <QtWidgets/QApplication>
#else
#include <QtGui/QGuiApplication>
#endifQT_BEGIN_NAMESPACE
#ifdef QT_WIDGETS_LIB
#define QtQuickControlsApplication QApplication
#else
#define QtQuickControlsApplication QGuiApplication
#endifQT_END_NAMESPACE
#endif // QTQUICKCONTROLSAPPLICATION_H
@and in the main.cpp
@
QtQuickControlsApplication app(argc, argv);
@I also added this line in the .pro file
@
!android: !ios: !blackberry: qtHaveModule(widgets): QT += widgets
@But they are not actually needed :)
Thanks for the help guys!!