模型视图代理
1. 模型:数据及其结构,多种QML创建模型
2. 视图:显示数据容器,数据可以通过列表或表格的形式显示
3. 委托:控制数据如何在视图中显示,委托获取、封装了模型中每个数据,需要通过委托才能访问到数据
4. 创建方法:
将视图的model属性绑定到一个模型类型,将delegate属性绑定到一个组件或其他兼容的类型
例子:ListViewde model用来提供数据,委托delegate设置数据的显示方式,ListView使用ListElement添加数据
Item{
width:100;height:100
ListModel{
id:myModel
ListElement{type:"Dog";age:8}
ListElement{type:"Cat";age:5}
}
Component{
id:MyDelegate
Text{
text:type+","+age;
font.pointSize:12
}
}
ListView{
anchors.fill:parent
model:MyModel
delegate:myDelegate
}
}
1.数据模型
QUick的数据模型主要包含在QtQml.Model中,还有个基于XML的QtQml.XmlListModel
使用这些模型需要导入 import QtQml.Models
使用XML类型的导入 import QtQml.XmlListModel
使用表格类型的需要import Qt.labs.qmlmodels
使用Repeater可以将模型中的数据在定位器positioners中进行布局和显示
整数作为 模型,数量不能超过100 000 000
例子
Item{
Component{
id:itemDelegate
Text{text:"Iam item number:"+index}
}
ListView{
anchors.fill:parent
model:5
delegate:itemDelagate
}
}
2.ListModel
包含ListElement 存储数据
使用count属性获取数量
追加 append() 插入insert()、移动move()、移除remove()、获取get()、替换set()、清空clear()
一些方法接受字典类型为参数,被模型自动转为ListElement对象
使用setProperty()修改给定索引位置的ListElement属性值
ListElement在ListModel中定义;没有固定属性
例子:存储水果信息,
ListModel包含三个数据项,有三个ListElement表示,每个ListElement有三个角色name、cost、attributes
attributes使用列表数据
使用ListView展示模型,指定model、delegate;
使用Component内敛组件作为委托
import QtQuick
Item{
width:300;height:300;
ListModel{
id:fruitModel
ListElement{
name:"Apple";cost:2.54
attributes:[
ListElement{description:"Deciduous"}
]
}
ListElement{
name:"Orange";cost:2.31
attributes:[
ListElement{description:"Citrus"}
]
}
ListElement{
name:"Banana";cost:1.54
attributes:[
ListElement{description:"Tropical"}
ListElement{description:"Seedless"}
]
}
}
Component{
id:fruitDelegate
Item{
width:200;height:50
Text{id:nameField;text:name}
Text{text:'$'+cost;anchors.left:nameField.right}
Row{
anchors.top:nameField.bottom;spacing:5
Text{text:"Attributes:"}
Repeater{
model:attributes
Text{text:description}
}
}
MouseArea{
anchors.fill:parent
onClicked:fruitModel.setProperty(index,"cost",cost*2) //使用index获取被单击的索引
}
}
}
ListView{
anchors.fill:parent
model:fruitModel;delegate:fruitDelegate
}
}
3.ObjectModel
可将Qt Quick的可视化项目作为数据项显示到视图上
ObjectModel不需要指定委托Delegate,自身包含了可视化的委托Delegate
使用model的附加属性index获取数据项索引
也提供了append、insert、move、remove、get、clear等
例子:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Rectangle{
widht:200;height:300;
ObjectModel{
id:itemModel
Rectangle{
height:30;width:100;radius:5;color:"red"
}
Label{
height:20;width:50;text:qsTr("标签按钮")
}
Button{
height:20;width:50;text:qsTr("按钮控件")
}
Switch{
checked:true
}
Rectangle{
height:20;width:50
border.width:3;color:"yellow"
Text{text:qsTr("文本项目");anchors.centerIn:parent}
}
Frame{
width:150
ColumnLayout{
anchors.fill:parent
CheckBox{text:qsTr("E-mail")}
CheckBox{text:qsTr("Calendar")}
}
}
ScrollView{
width:200;height:70
Label{
text:"ABC"
font.pixelSize:90
}
}
}
ListView{
anchors.fill:parent
anchors.margins:5
model:itemModel
spacing:5
}
}