[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