ListView doesn't populate values from the ListModel - qt

Question

I'm trying to make a list of buttons, where the user can select one of the options. I can't seem to display the text from the listmodel, but I can't figure out why. It seems like even the button is not correctly placed. Does anyone have ideas as to how to fix this? Thanks!
import QtQuick 2.15
import QtQuick.Window 2.2
import QtQuick.Controls 2.15
Window {
id: window
visible: true
height: 400
width: 400
Rectangle {
id: rect
width: 400; height: 400
ListView {
id: listview
anchors.fill: parent
model: timeList
delegate: Item {
anchors.top: parent.top
height: 30
Button {
anchors.top: parent.top
anchors.left: parent.left
id: textButton
text: text
width: parent.width
height: 30
flat: true
onClicked: {
console.log(value)
}
}
Rectangle {
height: (index === timeList.count - 1 ? 0 : 1)
color: '#E1E6E9'
width: 400
anchors {
left: textButton.left
top: textButton.bottom
}
}
}
ListModel {
id: timeList
ListElement { text: "15 minutes"; value: 15 }
ListElement { text: "1 hour"; value: 60 }
ListElement { text: "3 hours"; value: 180 }
ListElement { text: "6 hours"; value: 360 }
ListElement { text: "12 hours"; value: 720 }
}
}
}
}

Answer 1

There are several issues here:
don't name ListElement properties using keywords, text: text looks confusing.
don't wrap everything with Rectangle/Item with no need, use Layout instead if needed
never use anchors for delegates
pay attention that all containers have a size, the delegate's Item has no with for example (or probably 0)
actually, that should work:
import QtQuick
import QtQuick.Window
import QtQuick.Controls
Window {
id: window
visible: true
height: 400
width: 400
ListView {
anchors.fill: parent
model: timeList
delegate: Button {
id: textButton
text: name
width: parent.width
height: 30
flat: true
onClicked: {
console.log(value)
}
}
ListModel {
id: timeList
ListElement { name: "15 minutes"; value: 15 }
ListElement { name: "1 hour"; value: 60 }
ListElement { name: "3 hours"; value: 180 }
ListElement { name: "6 hours"; value: 360 }
ListElement { name: "12 hours"; value: 720 }
}
}
}