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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.