Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

ListView of custom Component



  • Hello,

    I'm trying to make a list view of a custom component.
    This component is called ManualFunction.qml.
    It is made of Rectangles, image and buttons.
    I would like a list of this component where I change a few properties.

    The properties I want to change are the text on 2 buttons, and the source of the image.
    The properties are define like that in the ManualFunction.qml :

        property string textButtonR: ""
        property string textButtonL: ""
        property string imageSource: ""
    

    Here is what I tried to create the listView:

    
            ListModel {
                id: myModel
                ListElement {
                    textButtonR: "Open"
                    textButtonL: "Close"
                    imageSource: "../img/sun.svg"
                }
    
                ListElement {
                    textButtonR: "Open"
                    textButtonL: "Close"
                    imageSource: "../img/sun.svg"
                }
    
                ListElement {
                    textButtonR: "Open"
                    textButtonL: "Close"
                    imageSource: "../img/sun.svg"
                }
    
            }
            
            Component{
                id: del
                ManualFunction{
                    
                }
            }
    
            ListView{
                anchors.fill: parent
                anchors.horizontalCenter: parent.horizontalCenter
                model: myModel
                delegate: del
            }
    

    But I only get one ManualFunction without sources and Text in button. I may have misunderstood the way ListView works.
    Can you please help me make this works ?



  • @DavidM29 Hi,

    You need to bind value from model to your delegate.

     Component{
                id: del
                ManualFunction{
                    textButtonR: model.textButtonR
                    textButtonL: model.textButtonL
                    imageSource: model.imageSource
                }
            }
    


  • @Gojir4 Thank you,
    It kind of works. I have now one element with the data I want in the button and image. But why do I have only one element ? I put three list element in my ListModel.
    Could they possibly be on top of the other ?



  • @DavidM29 hi,

    for a ManualFunction.qml defined like this;
    //ManualFunction.qml

    import QtQuick 2.0
    import QtQuick.Controls 2.2
    Rectangle{
        id: r
        height: 90
        width: 200
        color:'indigo'
        property string textButtonR: ""
        property string imageSource: ""
        Column{
            anchors.fill: parent
            Image{
                source:imageSource
                height: 20
                width: 20
            }
            Text{
                text:textButtonR
            }
        }
    }
    
    

    //main.qml

    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    
        ListModel {
                    id: myModel
                    ListElement {
                        btntxt: "Open"
                        textButtonL: "Close"
                        imgsrc: "spin.png"
    
    
                    }
    
                    ListElement {
                        btntxt: "Open"
                        textButtonL: "Close"
                        imgsrc: "spin.png"
    
    
                    }
    
                    ListElement {
                        btntxt: "Open"
                        textButtonL: "Close"
                        imgsrc: "spin.png"
    
                    }
    
                }
     ListView{
        anchors.fill: parent
        clip: true
        model:myModel
        delegate:ManualFunction{
        imageSource: imgsrc
        textButtonR: btntxt + " " +  index
       }
     }
    }
    


  • Thank you ! The list element where on top of eachother. I just modified the ManualFunction.qml to correct this by setting a height.


Log in to reply