QML基础语法七

模型视图代理

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