Qml items with native look and feel

joanpuigsanz

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!

onek24

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.

joanpuigsanz

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)!

onek24

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.

joanpuigsanz

And how is the "Qt Quick Controls - Gallery" example project doing it?

I checked out the code but it is not clear to me :(

Torgeir

How is your main(), do you create a QGuiApplication or QApplication?

You need QApplication for platform styling to take effect when using QtQuick.Controls

onek24

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.

Torgeir

[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

Torgeir

[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.

onek24

[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.

joanpuigsanz

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>
#endif

QT_BEGIN_NAMESPACE

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

QT_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!!