使用QML视图显示数据_qml数据显示到界面

 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
 }

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