Define a delegate with different type elements



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


  • Moderators

    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.



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



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



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


Log in to reply
 

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