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

Not supported in Qt Quick UI error when coding in QML



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



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



  • @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?


  • Moderators

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



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


  • Moderators

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



  • 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


  • Moderators

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


Log in to reply