ListView 不填充 ListModel 中的值

ListView doesn't populate values from the ListModel

我正在尝试制作一个按钮列表,用户可以在其中 select 选择其中一个选项。我似乎无法显示列表模型中的文本,但我不明白为什么。似乎连按钮都没有正确放置。有没有人知道如何解决这个问题?谢谢!

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 }
            }
        }
    }
}

这里有几个问题:

  • 不要使用关键字命名 ListElement 属性,text: text 看起来很混乱。
  • 不要用 Rectangle/Item 包装所有东西,如果不需要,请使用 Layout 代替
  • 永远不要为代表使用锚点
  • 注意所有容器都有大小,代表的Item没有例如(或者可能是0)

实际上,这应该有效:

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 }
        }
    }
}