ListView of custom Component

DavidM29

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 ?

Gojir4

@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
            }
        }

DavidM29

@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 ?

ODБOï

@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
   }
 }
}

DavidM29

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