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

glob

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.

jpnurmi

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.

glob

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.