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. How to import the "latest" versions of QtQuick.Controls and QtQuick.Controls.Styles?
QtWS25 Last Chance

How to import the "latest" versions of QtQuick.Controls and QtQuick.Controls.Styles?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
modulesversionsimport
3 Posts 2 Posters 13.2k Views
  • 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.
  • globG Offline
    globG Offline
    glob
    wrote on last edited by
    #1

    I'm having trouble figuring out which versions of QtQuick.Controls and QtQuick.Controls.Styles I should be importing. I'd like to just use the "latest" version of each - but it seems that it isn't that simple.

    I have Qt v5.7 installed. Below is a slightly simplified version of my QML file.

    import QtQuick 2.5
    import QtQuick.Controls 2.0
    import QtQuick.Controls.Styles 1.4
    
    Item {
        Column {
            id: column
            anchors.fill: parent
    
            TextField {
                id: textField
                height: 37
    
                style: TextFieldStyle {
                    textColor: "black"
                    background: Rectangle {
                        color: "white"
                        border.color: "black"
                        border.width: 1
                    }
                }
            }
        }
    }
    

    I'm importing versions 2.0 and 1.4 respectively, as these appear to be the latest versions of these two modules - at least, they are the latest version numbers that are offered up by the auto-completion in Qt Creator. However, this code produces a red "error" underline on the "style" property. Hovering over it shows: 'Invalid property name: "style". (M16).' At runtime, attempting to load this QML file produces the error 'Cannot assign to non-existent property "style" '. I'm pretty sure this error is occurring because the version numbers (2.0 and 1.4) do not match.

    As another variation, I tried this:

    import QtQuick.Controls 2.0
    import QtQuick.Controls.Styles 2.0
    

    I didn't expect this to work, since the latest version of the Styles module that the designer knows about is 1.4, but I thought I would try it. As expected, this also produces a red error underline in the designer, and at runtime produces the error 'module "QtQuick.Controls.Styles" version 2.0 is not installed'.

    The only way I can get this to work is to use:

    import QtQuick.Controls 1.4
    import QtQuick.Controls.Styles 1.4
    

    However, I'm then limited to the feature set of QtQuick.Controls 1.4, and can't use any 2.0 features - for example, I can't use the Label.topPadding property (which I want to use elsewhere in this file), as it isn't supported by QtQuick.Controls 1.4.

    All I really want to do is to import QtQuick.Control 2.0, and be able to apply a style to a TextField - but I'm stumped as to how I can do this. Any advice or suggestions would be much appreciated.

    1 Reply Last reply
    0
    • jpnurmiJ Offline
      jpnurmiJ Offline
      jpnurmi
      wrote on last edited by jpnurmi
      #2

      In Qt Quick Controls 2, there is no such property as TextField::style. In general, there is no way to use the style objects from Qt Quick Controls 1 with Qt Quick Controls 2. The APIs between the two major versions of Qt Quick Controls are not compatible. See the following documentation pages for more details:

      • Differences between Qt Quick Controls
      • Styling Qt Quick Controls 2
      • Customizing Qt Quick Controls 2

      There is a reason why we ended up breaking the APIs and creating a new major version. In short, there is no way to make the heavily Loader-based architecture of Qt Quick Controls 1 to perform reasonably well. Therefore all that dynamic loading of Components was ditched in Qt Quick Controls 2. The delegates that used to be provided by a style object are now part of the control instead, instantiated "in place". In essence:

      TextField {
          style: TextFieldStyle {
              textColor: "white"
              background: Rectangle { color: "black" }
          }
      }
      

      vs.

      TextField {
          color: "white"
          background: Rectangle { color: "black" }
      }
      

      You can read more about the history in http://blog.qt.io/blog/category/qt-quick-controls/. For example, http://blog.qt.io/blog/2015/03/31/qt-quick-controls-for-embedded/ highlights the fundamental structural changes in Qt Quick Controls 2.

      1 Reply Last reply
      3
      • globG Offline
        globG Offline
        glob
        wrote on last edited by
        #3

        Thanks J-P, that's exactly what I needed to know! I think I found an old example online that used the 1.x approach to styling, then tried to combine that with 2.x controls - and got myself in a tangle. I now understand how styling is meant to be applied in 2.x, and it's working just fine for me.

        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