使用QML视图显示数据

视图是包含项目的集合.他们富有特色,可自定义风格和行为

Qt Quick图形元素提供了几个标准的视图:

• ListView 水平或垂直列表中排列项目
• GridView 在一个有效空间的网格内排列项目
• PathView 在路径上排列项目
• WebView - 可在QtWebKit QML Module中使用.

与其他视图不同,WebView 不具有全部视图特性,需要与Flickable组合创建一个像Web浏览器一样执行的项目.

这些元素具有的属性和行为相互独立.更多信息见他们的文档.

模型

视图在屏幕上显示模型(models).模型可以是简单的整形列表或一个C++模型.

要给视图设置模型,需要给视图的model属性绑定到一个模型.

 ListModel {
     id: petlist
     ListElement { type: "Cat" }
     ListElement { type: "Dog" }
     ListElement { type: "Mouse" }
     ListElement { type: "Rabbit" }
     ListElement { type: "Horse" }
 }
 ListView {
     id: view
     anchors.fill: parent

     model: petlist
     delegate: petdelegate
 }

更多信息见QML Data Models 文档.

视图代理

视图需要使用代理(delegate)来可视化的表现列表中的项.视图以代理作为模版显示列表中的每个项.模型中的项使用index属性来访问.

 Component {
     id: petdelegate
     Text {
         id: label
         font.pixelSize: 24
         text: if (index == 0)
             label.text = type + " (default)"
         else
             text: type
     }
 }

美化视图

可使用decoration属性来自定义视图的header,footer,section属性.通过向这些属性绑定其他可视对象,就可美化视图.footer中可能包含一个Rectangle元素作为边框,或在header中显示列表的logo图标.

假如一个俱乐部要使用它们的商标颜色来修饰其成员列表.成员列表包含在一个模型中,代理显示模型中的内容.

 ListModel {
     id: nameModel
     ListElement { name: "Alice" }
     ListElement { name: "Bob" }
     ListElement { name: "Jane" }
     ListElement { name: "Harry" }
     ListElement { name: "Wendy" }
 }
 Component {
     id: nameDelegate
     Text {
         text: name;
         font.pixelSize: 24
     }
 }

可以向header和footer属性绑定可视对象来美化这个俱乐部的成员列表.这个可视对象可以直接定义,或在其他文件中定义,或在组件元素中定义..

 ListView {
     anchors.fill: parent
     clip: true
     model: nameModel
     delegate: nameDelegate
     header: bannercomponent
     footer: Rectangle {
         width: parent.width; height: 30;
         gradient: clubcolors
     }
     highlight: Rectangle {
         width: parent.width
         color: "lightgray"
     }
 }

 Component {     //instantiated when header is processed
     id: bannercomponent
     Rectangle {
         id: banner
         width: parent.width; height: 50
         gradient: clubcolors
         border {color: "#9EDDF2"; width: 2}
         Text {
             anchors.centerIn: parent
             text: "Club Members"
             font.pixelSize: 32
         }
     }
 }
 Gradient {
     id: clubcolors
     GradientStop { position: 0.0; color: "#8EE2FE"}
     GradientStop { position: 0.66; color: "#7ED2EE"}
 }

 

ListView的小节

ListView 可在sections中包含很多分组,相关的列表项按他们所在的小节进行标记.而且小节还可以指定代理(delegates).

如下列表中包含了人员姓名和所在小组的信息.

 ListModel {
     id: nameModel
     ListElement { name: "Alice"; team: "Crypto" }
     ListElement { name: "Bob"; team: "Crypto" }
     ListElement { name: "Jane"; team: "QA" }
     ListElement { name: "Victor"; team: "QA" }
     ListElement { name: "Wendy"; team: "Graphics" }
 }
 Component {
     id: nameDelegate
     Text {
         text: name;
         font.pixelSize: 24
         anchors.left: parent.left
         anchors.leftMargin: 2
     }
 }

ListView 元素具有一个叫做section的附加属性(attached property) 可在一个小节内组合临近或相关的元素.section的property属性指明列表元素中的一个属性作为小节名称.criteria属性指明如何显示小节的名称,而delegate与视图的delegate相同.

 ListView {
     anchors.fill: parent
     model: nameModel
     delegate: nameDelegate
     focus: true
     highlight: Rectangle {
         color: "lightblue"
         width: parent.width
     }
     section {
         property: "team"
         criteria: ViewSection.FullString
         delegate: Rectangle {
             color: "#b0dfb0"
             width: parent.width
             height: childrenRect.height + 4
             Text { anchors.horizontalCenter: parent.horizontalCenter
                 font.pixelSize: 16
                 font.bold: true
                 text: section
             }
         }
     }
 }