Solved QML ListView shows only 2 of 3 Elements
-
I want to create a dynamic amount of Switches that are Located in a ColumnLayout using a "ListView" and "ListModel" like this:
import QtQuick import QtQuick.Window import QtQuick.Layouts import QtQuick.Controls Window { width: 640 height: 480 visible: true title: qsTr("Hello World") ListModel { id: fruitModel ListElement { name: "Apple" cost: 2.45 } ListElement { name: "Orange" cost: 3.25 } ListElement { name: "Banana" cost: 1.95 } } ColumnLayout{ id:configColumn spacing: 10 Layout.fillWidth: true Layout.fillHeight: true Component { id: fruitDelegate Switch { text: name } } ListView { //take as much width as possible with a binding width: parent.width //keep enought height to display each delegate instance height: 50 implicitHeight: height implicitWidth: width model: fruitModel delegate: fruitDelegate } } }
When i run this only two of the expected three switches are shown. Can anybody tell me why that is?
I am using QT6 and Qt Creator 5.15.2 on Kubuntu 21.04
Thanks in advance -
@Detzi said in QML ListView shows only 2 of 3 Elements:
Can anybody tell me why that is?
I think the problem is
height: 50
==> there is not space enough to show more than 2 switches!
I would change this toheight: parent.height
-
@KroMignon Thank you :)
changing the height property to 100 fixes the problem, but "parent.height" does not work. I also tried
"configColumn.height" but both do only show one element.
Since "configColumn.childrenRect.height" is a "loop" is there a nice way of getting the resulting height or do i have to explicitly set the switch height and calculatate the resulting height, like "height: fruitModel.count*50" ? -
I would make some changes in your QML code:
- for
ColumLayout
removeLayout.fillWidth: true
andLayout.fillHeight: true
and addanchors.fill: parent
- remove
implicitHeight
,implicitWidth
,height
andwidth
in theListView
and also addanchors.fill: parent
Since "configColumn.childrenRect.height" is a "loop" is there a nice way of getting the resulting height or do i have to explicitly set the switch height and calculatate the resulting height, like "height: fruitModel.count*50" ?
In the
ListView
item, the propertycontentItem.childrenRect.height
should contain the value you want to calculate (cf. .https://doc.qt.io/qt-5/qml-qtquick-item.html#childrenRect.width-prop). - for