⚠️ Forum Maintenance: Feb 6th, 8am - 14pm (UTC+2)

[solved] Creating own components?

  • Hello,

    I want to use buttons in QML.
    Therefor, I wrote this code
    @ Rectangle {
    id: rectangle1
    height: 50
    color: "#ffffff"
    radius: 5
    anchors.left: item1.right
    anchors.leftMargin: 0
    anchors.right: parent.right
    anchors.rightMargin: 0
    anchors.bottom: parent.bottom
    anchors.bottomMargin: 0
    transformOrigin: Item.BottomRight
    border.width: 2
    border.color: "#000000"

            Text {
                id: text2
                text: qsTr("button's caption")
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                transformOrigin: Item.Center
                font.bold: true
                font.pixelSize: 20
            MouseArea {
                id: mouse_area1
                z: 1
                hoverEnabled: true
                anchors.fill: parent
                anchors.bottom: page.top
                anchors.top: page.bottom
                onClicked: {
                    // button's function

    and because I don't want to rewrite this or copy it always when needed, I want to create a component that includes the code above.
    !http://i46.img-up.net/Screenshotq3f3.png(Qt Quick, Elements)!

    Thank you

  • you can write this code in a separate file say Button.qml and it will be automatically available to you just like the available built-in components

  • Oh, and where should I save the file, so that it is available from all my projects?
    (my project directory is c:\qtsdk\projects)

    What should I write in the file in addition ?

  • you ll have to save the file in the folder in which you have the .pro file of ur project...
    you ll have to do so for all the projects for which u need the button element...

  • Ok, I saved the file and added it to my project.

    But I can't load it via the menu with the elements like "Border Image", "Image", "Item", "Rectangle".

  • You should write a qmldir for that .qml file.

  • To access to component created. You have to be sure that you import dir of this.

    for example:

    thinking in an order, you could create a folder named myComponents inside: c:\qtsdk\projects

    so: c:\qtsdk\projects\myComponents\Button.qml exists.

    At first in your main.qml you type: "import myComponents" then you can write Button{} an it will work fine.


  • Good! iam learning QML too, and it's so very helpfull. Sorry for my poor english.

Log in to reply