4. Qml items with native look and feel

⚠️ Forum Maintenance: Feb 6th, 8am - 14pm (UTC+2)

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!

    0

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

    0

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

    0

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

    0

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

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

    0

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

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

    0

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

    0

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

    0

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

    0

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

    0

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

    0
Log in to reply