listview height

[joko]

Hello Qt Masters,

I wanted to set a dynamic Listview height which will depends on the height of the delegate items. Because I included the listview into a ColumnLayout, and it needs to have a height so that the next element won't overlapped. I've tried listview's contentHeight and implicitHeight properties but it isn't working. Btw, the delegate item has no specific height set also.

Any idea on how to implement it? Thanks!

[anda_skoa]

I think you'll need to describe your goal in more detail.

Do delegates for difference indexes have uniform or different height?
Do you want a certain number of delegates visible, or all, or a minimum or a maximum?

Cheers,
_

[joko]

I think you'll need to describe your goal in more detail.

Do delegates for difference indexes have uniform or different height?
Do you want a certain number of delegates visible, or all, or a minimum or a maximum?

Cheers,
_

Thank you for your response anda_skoa

Yes, delegates have uniform heights and all items should be visible.
The buttons overlaps in listview item because no height being set on it, which I don't want to hard code the height.

Here's my code:

Item {
 ColumnLayout
        {
            id: body
            anchors.fill: parent
 
            ListView
            {
                id: connDetails
                anchors.fill: parent
                interactive: false
                model: connModel 
                delegate: connDelegate
            }
            Button {
                text: "Ok"
            }
            Button {
                text: "View"
            }
            Button {
                text: "Cancel"
            }
        }
 
ListModel
{
    id: connModel
    ListElement
    {
        serverName: "connection1"
        serverIp: "192.168.1.8"
    }
    ListElement
    {
        serverName: "connection2"
        serverIp: "192.168.1.7"
    }
}
 
Component 
{
   id: connDelegate
 
    GridLayout
    {
        columns: 2
        rows: 2
        columnSpacing: 20
 
        Text
        {
            text: qsTr("Server name:")
            color: "white"
        }
 
        Text
        {
            text: qsTr(serverName)
            color: "white"
        }
 
        Text
        {
            text: qsTr("Server IP:")
            color: "white"
        }
 
        Text
        {
            text: qsTr(serverIp)
            color: "white"
        }
   }
 
}
}

Item {
 ColumnLayout
        {
            id: body
            anchors.fill: parent

            ListView
            {
                id: connDetails
                anchors.fill: parent
                interactive: false
                model: connModel 
                delegate: connDelegate
            }
            Button {
                text: "Ok"
            }
            Button {
                text: "View"
            }
            Button {
                text: "Cancel"
            }
        }

ListModel
{
    id: connModel
    ListElement
    {
        serverName: "connection1"
        serverIp: "192.168.1.8"
    }
    ListElement
    {
        serverName: "connection2"
        serverIp: "192.168.1.7"
    }
}

Component 
{
   id: connDelegate
       
    GridLayout
    {
        columns: 2
        rows: 2
        columnSpacing: 20

        Text
        {
            text: qsTr("Server name:")
            color: "white"
        }

        Text
        {
            text: qsTr(serverName)
            color: "white"
        }

        Text
        {
            text: qsTr("Server IP:")
            color: "white"
        }

        Text
        {
            text: qsTr(serverIp)
            color: "white"
        }
   }

}
}

To copy to clipboard, switch view to plain text mode 

Cheers!

[anda_skoa]

If all items should be visible, i.e. does that mean you are not needing the list view's scrolling capability?
Which of the list view capabilities do you need?

I.e. why use a list view and not simply a Repeater?

Cheers,
_

[joko]

If all items should be visible, i.e. does that mean you are not needing the list view's scrolling capability?
Which of the list view capabilities do you need?

I.e. why use a list view and not simply a Repeater?

Cheers,
_

Wow! Using Repeater is the best option!

Thanks!

[anda_skoa]

Wow! Using Repeater is the best option!

Just a couple of tips:

1) when referencing model data in a delegate it is usually helpful for later readability to make that referencing more explicit.
E.g.. instead of using just "serverName" write "model.serverName"

This makes it more obvious which data is local to the delegate and which data is from the model

2) this is probably just because this is more an example code to demonstrate the problem, but qsTr(serverName) does not make any sense. "serverName" is a property from the model. if is contains translatable text it has had to be translated at its source already.

Cheers,
_