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

 

 

你可能感兴趣的:(QML,Qt,Quick)