Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Qml items with native look and feel
Forum Updated to NodeBB v4.3 + New Features

Qml items with native look and feel

Scheduled Pinned Locked Moved QML and Qt Quick
11 Posts 3 Posters 4.3k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J Offline
    J Offline
    joanpuigsanz
    wrote on last edited by
    #1

    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!

    1 Reply Last reply
    0
    • O Offline
      O Offline
      onek24
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0
      • J Offline
        J Offline
        joanpuigsanz
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • O Offline
          O Offline
          onek24
          wrote on last edited by
          #4

          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.

          1 Reply Last reply
          0
          • J Offline
            J Offline
            joanpuigsanz
            wrote on last edited by
            #5

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

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

            1 Reply Last reply
            0
            • T Offline
              T Offline
              Torgeir
              wrote on last edited by
              #6

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

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

              1 Reply Last reply
              0
              • O Offline
                O Offline
                onek24
                wrote on last edited by
                #7

                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.

                1 Reply Last reply
                0
                • T Offline
                  T Offline
                  Torgeir
                  wrote on last edited by
                  #8

                  [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

                  1 Reply Last reply
                  0
                  • T Offline
                    T Offline
                    Torgeir
                    wrote on last edited by
                    #9

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

                    1 Reply Last reply
                    0
                    • O Offline
                      O Offline
                      onek24
                      wrote on last edited by
                      #10

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

                      1 Reply Last reply
                      0
                      • J Offline
                        J Offline
                        joanpuigsanz
                        wrote on last edited by
                        #11

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

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved