Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    How to load custom QML controls into the QML Designer?

    QML and Qt Quick
    qml qmldesigner customplugin drag and drop
    1
    2
    3751
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Cybrum
      Cybrum last edited by Cybrum

      I am facing difficulty in importing my custom control into QML Designer. i.e. MyQMLControls 1.0 library has a BlueButton.
      I want that BlueButton in QML Designer when I import MyQMLControls 1.0 in MyTestApp Project so that I can drag and drop the control .
      Any help is appreciated.

      Cybrum 1 Reply Last reply Reply Quote 0
      • Cybrum
        Cybrum @Cybrum last edited by Cybrum

        I found a solution. I followed the below Steps:
        1.Created a QtCreator Extension Plugin
        2.In Pro file: Add
        uri = mycompany.qmlcomponents
        version =1.0

        3.Added my CustomControl QML file.
        4.Registered using qmlRegisterType
        5.In qml dir:
        module mycompany.qmlcomponents
        plugin MyExtensionPlugin
        classname MyExtensionPlugin
        typeinfo mycompany.qmlcomponents
        designersupported
        5.Wrote the MetaInfo file (myextensionplugin.metainfo):
        MetaInfo {
        Type {
        name: "mycompany.qmlcomponents.MyCustomItem"
        icon: "images/customitem-icon.png"

                ItemLibraryEntry {
                    name: "CustomItem"
                    category: "My Extension - Items"
                    libraryIcon: "images/customitem-icon.png"
                    version: "1.0"
                    requiredImport: "mycompany.qmlcomponents"
        
                    Property {
                        name: "itemItext"
                        type: "binding"
                        value: "qsTr(\"Button\")"
                    }
                }
            }
        }
        

        6.Create a designer folder
        7.Add following to designer.pri
        QML_FILES +=
        $$PWD/CustomItemSpecifics.qml
        QML_FILES += $$PWD/myextensionplugin.metainfo
        QML_FILES +=
        $$PWD/images/customitem-icon.png
        8.Build and install
        9.Generate qmltypes: [You can also do this during qmake]
        qmlplugindump mycompany.qmlcomponents1.0 > plugins.qmltypes
        10.The controls will be available in the qml designer.

        Check the unsupported properties for custom controls:
        http://doc.qt.io/qtcreator/creator-quick-ui-forms.html

        1 Reply Last reply Reply Quote 1
        • First post
          Last post