[Solved]Qml properties not displayed on dynamically creating the QML element

[nikhil.patil2010]

Here I'm trying to create some buttons dynamically on clicking the existing button. But the new buttons which were added to gui won't have any gradient,background color properties; it just displays the button label. In the image, "Sample" is the newly created button. "http://imgur.com/YIlgY7F":http://imgur.com/YIlgY7F
@import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
id: main
width: 360
height: 360

Mybutton1{
    x:30
    y:61
    width:120
    height:50
    text:"Prev"
    onClicked: {
        //createRect(2);
    }

}

function createRect(num)
  {
        var component = Qt.createComponent("Mybutton1.qml");
        var rect = component.createObject(main,{"x":30,"y":61});
        if(rect !== null ) {
            //rect.text = "Test";
            rect.x =  Math.floor(Math.random() * 300 );
            rect.y = Math.floor(Math.random() * 100 );
      }
  }

}@

Here is my Mybutton1.qml code.
@import QtQuick 2.0
import QtGraphicalEffects 1.0

Rectangle {
id: button

signal clicked
property alias text: btnText.text
radius: 4
border.color:"#6a6363"
property string buttonId;

color: "blue"
gradient: off

 Gradient {
    id:off
    GradientStop { position: 0.0; color: "#817D77" }
    GradientStop { position: 1.0; color: "#52504B" }
}

Gradient {
    id:onn
    GradientStop { position: 0.0; color: "#8a867f" }
    GradientStop { position: 1.0; color: "#5c5a54" }
}

Gradient {
    id:pressed
    GradientStop { position: 0.0; color: "#504e49" }
    GradientStop { position: 1.0; color: "#807c76" }
}


Text {
    id:btnText
    anchors.centerIn: parent
    color:"#eee9dd"
    style: Text.Normal
    font.bold: true
    font.family: "Arial"
    font.pixelSize: 14
    text: "Sample"
}

MouseArea {
        id: mouseArea
        anchors.fill: parent
        hoverEnabled : true

        onClicked:  {
            button.clicked();
            createRect(0);
        }

        onEntered:{
            button.gradient=onn
            border.color= "#636a6a"
        }

        onPressed: {
            button.gradient=pressed
            border.color= "#636a6a"
        }

        onReleased: {
            button.gradient=onn
            border.color= "#6a6363"
        }

        onCanceled:{
            border.color= "#6a6363"
            button.gradient=off
        }

        onExited: {
            border.color= "#6a6363"
            button.gradient=off
        }


    }

}@

(sierdzio) Edit: fix the link to the image

[Eddy]

Hi,

You didn't set a height and width for the root rectangle of your button in Mybutton1.qml

[Xander84]

seems like your dynamically created button has no size ( width and height)? that is why you won't see the Rectangle I guess.

Edit: eddy was faster :D