Home > Enterprise >  QML module not recognized by IDE
QML module not recognized by IDE

Time:11-27

I'm having trouble importing my QML module into my main file so that Qt Design Studio would recognize it.

I have the following folder structure:

Gui
 ┣ imports
 ┃ ┣ delegates
 ┃ ┃ ┣ ActionBarButton.qml
 ┃ ┃ ┣ CellBase.qml
 ┃ ┃ ┣ CellBaseImage.qml
 ┃ ┃ ┣ NameText.qml
 ┃ ┃ ┣ qmldir
 ┃ ┃ ┣ TextIndicator.qml
 ┃ ┃ ┗ ViewCountIndicator.qml
 ┃ ┣ searchbar
 ┃ ┃ ┣ qmldir
 ┃ ┃ ┗ SearchBar.qml
 ┣ Main.qml

This is how delegates/qmldir looks like:

module delegates
TextIndicator 1.0 TextIndicator.qml

And this is is how searchbar/qmldir looks like:

module searchbar
SearchBar 1.0 SearchBar.qml

When I'm in my main.qml I do:

import delegates 1.0
import searchbar 1.0

Both imports are accepted by the IDE (Qt Design Studio) and if I run Import trance with QML_IMPORT_TRACE: "1" environment variable I get :

qt.qml.import: addLibraryImport: file:///Gui/Main.qml "delegates" 1.0 as ""
qt.qml.import: importExtension: file:///Gui/Main.qml loaded "Gui/imports/delegates/qmldir"
qt.qml.import: addLibraryImport: file:///Gui/Main.qml "searchbar" 1.0 as ""
qt.qml.import: importExtension: file:///Gui/Main.qml loaded "Gui/imports/searchbar/qmldir"

Which as so far as I understand means that the module loaded successfully. Yet when in Main.qml I'm trying to access TextIndicator (located in the delegates module) the IDE doesn't know what I'm talking about.(Doesn't auto-complete the type. And when I manually type, the type. It doesn't see the internal properties or highlight it as a type. It doesn't help with common properties like anchors or width and height.) On the other hand when trying to access 'SearchBar' (located in searchbar module, it works just fine.)

I'm struggling to figure out why it doesn't work for the former and what's the difference between the two.

This is how it looks in the editor:

enter image description here

Yet when I run the example, both the search bar and the text indicator are present in the scene:

enter image description here

Does anyone know how to make the IDE be aware of the delegates module?

Here is how TextIndicator.qml looks like inside:

import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    id: durationIndicator
    property string indicatorText: "hello"
    property color backgroundColor: "black"
    property color textColor: "white"
    property int fontPointSize: 15
    width: durationText.width
    height: durationText.height

    Text {
        id: durationText
        text: indicatorText
        anchors.centerIn: parent
        color: textColor
        font.pointSize: fontPointSize
        z: 1
    }

    Rectangle {
        id: durationIndcatorBackground
        anchors.fill: durationText
        anchors.leftMargin: -2
        anchors.rightMargin: -2
        anchors.bottomMargin: -2
        color: backgroundColor
        z: 0
    }
}

And this is SearchBar.qml:

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: searchBarRoot
    width: 1000
    height: 80
    color: "grey"
    signal acceptedText(string searchText, string searchInText, string orderByText, bool excludedFromWatched, bool isDesc)

    Row {
        id: itemRow
        anchors.fill: parent
        anchors.verticalCenter: parent.verticalCenter
        anchors.margins: 10
        spacing: 10

        TextField {
            id: textInput
            //            anchors.left: parent.left
            //            anchors.leftMargin: 80
            //        anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            width: 300
            //        height: 20
            text: "searchtext"
            font.pixelSize: 12
            focus: true
            onFocusChanged: {

            }

            onAccepted: {
                console.log("Accepted text: "   textInput.text)
                searchBarRoot.acceptedText(textInput.text,
                                           searchFieldComboBox.text,
                                           orderByCombobox.currentText,
                                           isWatched.checked,
                                           isDescending.checked, isFav.checked)
            }
        }

        ComboBox {
            id: searchFieldComboBox
            anchors.verticalCenter: parent.verticalCenter
            model: ["Path", "Parent Dir"]
        }

        ComboBox {
            id: orderByCombobox
            anchors.verticalCenter: parent.verticalCenter
            model: ["Path", "Random", "Name", "Rating", "Favorite", "Path To Dir", "Width", "Height", "Duration", "Size", "Codec_Name", "Frame Rate", "Bit_Rate", "Probe_Score", "Date_Added", "Play_count", "Play_time"]
        }

        CheckBox {
            id: isDescending
            anchors.verticalCenter: parent.verticalCenter
            text: "Is Desc"
        }

        CheckBox {
            id: isWatched
            anchors.verticalCenter: parent.verticalCenter
            text: "Exclude Watched"
        }

        CheckBox {
            id: isFav
            anchors.verticalCenter: parent.verticalCenter
            text: "Is Fav"
        }
    }

    Component.onCompleted: {
        textInput.forceActiveFocus()
        textInput.selectAll()
    }
}

CodePudding user response:

Try setting QML_IMPORT_PATH as described here:

https://doc.qt.io/qtcreator/creator-qml-modules-with-plugins.html#importing-qml-modules

CodePudding user response:

This is kind of embarrassing, but after restarting Qt Design Studio a couple of times, it seems to solve the issue. Though I still need to restart it every time I import the 'delegates' module into another file. Otherwise, it isn't aware of it. Which is weird.

  • Related