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



  • 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


  • Moderators

    Hi,

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



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.