Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



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



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

    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.



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