几种Model的简单使用

在QML的Model-View框架中，有三个基本概念：

        Model:       用来组织数据结构

        Views:       数据的展示窗口，常见的有三种，ListView,TableView, TreeView

        Delegate:  用来控制Model中的数据怎么和View中每一项一一对应

下面主要来介绍下QML中几种Model的使用

数字作为Model

      此时Model只有一个信息，数据项的个数是多少，没有项数据

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models

Rectangle{
    width: 600
    height: 400

    ListView{
        id:view
        anchors.fill: parent
        model: 5
        delegate: Rectangle{
            width: parent.width
            height: 30
            required property int index;
            Text{
                text: "我是第"+index + "个元素"
            }
        }
    }
}

数组作为Model

        由于是JS中的数组，所以数组里的数据类型可以不同

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models

Rectangle{
    width: 600
    height: 400
    ListView{
        id:view
        anchors.fill: parent
        model: ["hello", true, 1.87, {"a":"AAA", "b":"BBB"}, [1,2], 999, new Date(), {a:123, b:"field b"}]
        delegate: Rectangle{
            width: parent.width
            height: 30
            required property int index;
            required property var modelData;
            Text{
                text: {
                    console.log(view.model[index])
                    let res = "我是第" + index + "个元素, 类型是:" +  Object.prototype.toString.call(modelData).slice(8, -1) + ", 值是:";
                    if(modelData instanceof Object){
                        res = res + JSON.stringify(modelData)
                    }
                    else{
                        res = res+ modelData;
                    }
                    return res
                }

            }
        }
    }
}

QML中对象作为Model

      对象的属性作为每一项属性

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models


Rectangle {
    width: 200; height: 250

    //只支持QML中的对象
    QtObject{
        id:obj
        property string fieldA: "hello"
        property bool fieldB: true
        property int fieldC: 100
    }

    //jS中的对象好像不支持
    property var myObj: {
        let tt = {
            fieldA: "hello",
            fieldB: 100,
            fieldC: 1.1111,
            fieldD: false
        }
        console.log(typeof tt)
        return tt
    }

    ListView {
        anchors.fill: parent
        anchors.topMargin: 30
        model: obj
        delegate: Rectangle{
            required property var model
            height: 30
            width: parent.width
            color:"green"
            Row{
                spacing: 15
                Text {text: model.fieldA}
                Text {text: model.fieldB}
                Text {text: model.fieldC}
            }
        }
    }
}

ObjectModel

     QML内置类

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml.Models

Rectangle{
    width: 600
    height: 400

    ObjectModel{
        id:myModel

        Rectangle{
            width: 100
            height: 30
            color:Qt.lighter("blue", 1.1)
        }
        Rectangle{
            width: 100
            height: 30
            color:Qt.lighter("blue", 1.3)
        }
        Rectangle{
            width: 100
            height: 30
            color:Qt.lighter("blue", 1.5)
        }
    }
    ListView{
        id:view
        anchors.fill: parent
        model: myModel
    }
}

ListModel

        QML内置类

Rectangle{
    width: 320
    height: 200
    ListView{
        id:view
        anchors.fill: parent
        model:  ListModel {
            id: fruitModel

            ListElement {
                name: "Apple"
                cost: 2.45
                attributes: [
                    ListElement { description: "Core" },
                    ListElement { description: "Deciduous" }
                ]
            }
            ListElement {
                name: "Orange"
                cost: 3.25
                attributes: [
                    ListElement { description: "Citrus" }
                ]
            }
            ListElement {
                name: "Banana"
                cost: 1.95
                attributes: [
                    ListElement { description: "Tropical" },
                    ListElement { description: "Seedless" }
                ]
            }
        }
        delegate: Rectangle{
            width: parent.width
            height: 30
            color:Qt.lighter("lightblue", 1.1)
            required property int index;
            required property var modelData;
            required property var name;
            Row{
                Text{
                    width: 100
                    height: 30
                    text: name  //或者用modelData.name
                }

                Text{
                    width: 100
                    height: 30
                    text: modelData.cost
                }

                ComboBox{
                    width:100
                    height: 30
                    model:modelData.attributes
                }
            }

        }
    }
}