Not supported in Qt Quick UI error when coding in QML

ThanksForTheHelp

I am trying to create an Android Qt application but I am unable to do so because whenever I try to paste an example QML code snippet into my code I get tons of errors. Example:

Rectangle {
    width: 180; height: 200

    Component {
        id: contactDelegate
        Item {
            width: 180; height: 40
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Text { text: '<b>Number:</b> ' + number }
            }
        }
    }

    ListView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

Whenever I paste this into one of my PageForm.ui.qml I get errors such as This type (Component) is not supported in a Qt Quick UI form on the "Component { ... }" part of the code, as well as other errors saying stuff is not supported or known.

ODБOï

hi this is the cause of errors
you need to create .qml components not .ui.qml where lot of features are disabled

ThanksForTheHelp

@LeLev creating a pure .qml instead of .ui.qml file helped a bit but I still get the error Unknown Component. (M300) in the code where it says model: ContactModel {}. Why do I get this error? I have copied it directly from the documentation. Is the documentation incorrect?

J.Hilk

@thanksforthehelp seems like ContactModel is it's own Qml file. Do you have ContactModel.qml in your project?

ThanksForTheHelp

I do not have ContactModel.qml in my project, no. I only copied an example code from the docs, expecting it to work so that I can play around and learn stuff... :/

J.Hilk

@thanksforthehelp what example are you talking about, do you have a link?

ThanksForTheHelp

I created a file called ContactModel.qml containing the following:

import QtQuick 2.0

ListModel {
    ListElement {
        name: "Bill Smith"
        number: "555 3264"
    }
    ListElement {
        name: "John Brown"
        number: "555 8426"
    }
    ListElement {
        name: "Sam Wise"
        number: "555 0473"
    }
}

And another file called testPage.qml:

import QtQuick 2.0
import "ContactModel.qml"

Rectangle {
    width: 180; height: 200

    Component {
        id: contactDelegate
        Item {
            width: 180; height: 40
            Column {
                Text { text: '<b>Name:</b> ' + name }
                Text { text: '<b>Number:</b> ' + number }
            }
        }
    }

    ListView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: contactDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

No errors in QtCreator but after compiling it I get

W libTest.so: QQmlComponent: Component is not ready
W libTest.so: qrc:/main.qml:68:5: QML StackView: push: qrc:/testPage.qml:2 "ContactModel.qml": no such directory
W libTest.so: QQmlComponent: Component is not ready
W libTest.so: qrc:/main.qml:68:5: QML StackView: push: qrc:/testPage.qml:2 "ContactModel.qml": no such directory

but it does exist in the same directory as my main file as well as the other files mentioned. I go to the page using this code snippet:

Drawer {
        id: drawer
        width: window.width * 0.66
        height: window.height

        Column {
            anchors.fill: parent

        ItemDelegate {
                text: qsTr("Test Page")
                width: parent.width
                onClicked: {
                    stackView.push("testPage.qml")
                    drawer.close()
                }
            }
...

Edit: the docs example I am referring to is this

J.Hilk

@thanksforthehelp
do not import Qml Files directly import "ContactModel.qml" only import folders, if it's different from the current folder

If they life inside the same folder, then no import is needed at all.

That said this tutorial may be more suited:
https://doc.qt.io/qt-5/qml-dynamicview-tutorial.html

Usually inside the class documentation you'll find only code excerptions. The link above is a full tutorial and a ready to compile example can be find inside QtCreator itself, if you use the IDE.