Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. How to load custom QML controls into the QML Designer?

How to load custom QML controls into the QML Designer?

Scheduled Pinned Locked Moved QML and Qt Quick
qmlqmldesignercustomplugindrag and drop
2 Posts 1 Posters 4.1k Views
  • 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.
  • CybrumC Offline
    CybrumC Offline
    Cybrum
    wrote on last edited by Cybrum
    #1

    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.

    CybrumC 1 Reply Last reply
    0
    • CybrumC 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.

      CybrumC Offline
      CybrumC Offline
      Cybrum
      wrote on last edited by Cybrum
      #2

      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
      1

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved