Qt Quick 中model，delegate使用的三种方式

在Qt Quick 中，我们以 ListView 为例，创建一个最简单的列表窗口，为了清晰，去掉了鼠标按键的操作，去掉了高亮的显示，只将数据简单以列表方式显示出来，相当与Hello World 版的 ListView 吧。 

版本1:直接在 ListView 内部定义model及delegate

Window {
    width: 200
    height: 100
    visible: true

    ListView {
        anchors.fill: parent
        model: ListModel {
            ListElement { name: "Apple" }
            ListElement { name: "Orange" }
            ListElement { name: "lemon" }
        }
        delegate: Rectangle {
            width: 25; height: 30
            Text { text: "Name:" + name }
        }
    }
}

版本2: 将model和delegate以组件形式写在外部

Window {
    width: 200
    height: 100
    visible: true

    Component {
        id: listModel
        ListModel {
            ListElement { name: "Apple" }
            ListElement { name: "Orange" }
            ListElement { name: "lemon" }
        }
    }

    Component {
        id: listDelegate
        Item {
            width: parent.width;
            height: 30
            Text { text: "Name:" + name }
        }
    }

    ListView {
        id: listView
        anchors.fill: parent
        model: listModel.createObject(listView)
        delegate: listDelegate
    }
}

版本3:使用DelegateModel

Window {
    width: 200
    height: 100
    visible: true
    
    DelegateModel {
        id: visualModel
        
        model:ListModel {
            ListElement { name: "Apple" }
            ListElement { name: "Orange" }
            ListElement { name: "lemon" }
        }
        
        delegate: Rectangle {
            width: parent.width;
            height: 30
            Text { text: "Name:" + name }
        }
    }
    
    ListView {
        model: visualModel
        anchors.fill: parent
        
    }
}