Define a delegate with different type elements

Arturo Pablo R

Hi, i have the next question, ¿exist form to define a delegate Component in which sometimes exist a textinput, or another ComboBox (defined for one value, read a file in json format, sometimes i read a text, but other cases, read a jsonarray, and i will show values),

Example, here is the main case of my delegate

Component{
     id: itemGuiForList
    Item{
        height: 20
        width: listViewSection.width

        Text {
            id: name
            renderType: Text.NativeRendering
            font.pixelSize: 12
            height: parent.height
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.Right
            width: parent.width*0.42
            anchors.left: parent.left
            text: model.name_parameter                
        }
        Rectangle{
            anchors.right: parent.right
            height: parent.height
            width:parent.width*0.56
            border.width: 1
            radius:4
            TextInput{
                id: m_value
                width: parent.width*0.97; height: parent.height
                horizontalAlignment: Text.Right
                font.pixelSize: 12
                verticalAlignment: Text.AlignVCenter
                anchors.horizontalCenter: parent.horizontalCenter
                clip:true
                text: model.value
                renderType: TextInput.NativeRendering                   
            }
        }
    }
}

And here other case for delegate

Component{
    id: itemGuiForList
    Item{
        height: 20
        width: listViewSection.width
        Text {
            id: name
            renderType: Text.NativeRendering
            font.pixelSize: 12
            height: parent.height
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.Right
            width: parent.width*0.42
            anchors.left: parent.left
            text: model.name_parameter                
        }            
        ComboBox{
            id: comboOptions
            anchors.right: parent.right
            anchors.fill: parent
            model:comboOptionsList               
        }
    }
  }

I use this delegates in listview.
In 2 cases only change the second element, ¿ exist mode to show one with ComboBox or TextInput?

p3c0

Hi @Arturo-Pablo-R,
Do you mean multiple delegates for ListView ? If so, then define a Loader for delegate of ListView and then depending upon condition load the particular Component for Loader using sourceComponent.

Arturo Pablo R

@p3c0 , well, i began to belive something like this, and is confirmed, thanks

Quteroid

@Arturo-Pablo-R
I had a similar problem. If you just have to switch between two or three predefined cases then doing with QML and a Loader-based conditional component switch may be sufficient. However, for four or more distinct delegate variants this seems not feasible.

For more complex variations you can use JavaScript to build delegates dynamically. With that you have all the power of "if"+"else if", "switch" + "case" and arrays to construct a row-specific delegate. Actually, you could even define how to build the delegate inside the model. Weird things like individually designed delegates (with varying dimensions) for every row are possible then.

You probably need some advanced JavaScript skills for this approach, as it is not quite straightforward, unfortunately, but requires callbacks for delegates. I described how to accomplish this at https://forum.qt.io/topic/53899/solved-how-to-create-delegates-and-listmodel-dynamically-in-javascript/6

Arturo Pablo R

@Quteroid Thanks, i really bealive i will learn more about javascript