网页设计是什么职业_程序员联系方式_企业网站的类型_网络营销的四大要素

一个ListView可以显示来自由如ListModel和XmlListModel等内置 QML 类型创建的模型的数据，也可以用在 C++ 中定义的、继承自QAbstractItemModel或QAbstractListModel的自定义模型类的数据。
一个ListView要有一个模型，它定义了要显示的数据，还有一个委托，它定义了数据应该如何显示。ListView中的项可以水平或垂直布局。由于ListView继承自Flickable，所以列表视图也是可滑动的。

1. 简单使用

下面定义一个简单的数据模型(ListModel)和代理(本示例程序用Text)，并用ListView来展示：

// 数据模型
ListModel {id: cusModelListElement {name: "Tom"number: "11111"}ListElement {name: "Jerry"number: "22222"}ListElement {name: "Spike"number: "33333"}
}ListView {id: viewmodel: cusModel    // 指定模型width: 200height: parent.heightdelegate: Text {    // 自定义代理text: name + " -> " + number}
}

运行结果图如下：

2. 自定义代理

由于上述例子的代理仅仅是一个Text，实属太难看；下面我们将代理改良下，让它变得稍微好看点：

// 自定义代理项
Component {id: cusDelgateItem {width: 180height: 40Column {Text { text: '<b>名称:</b>' + name; color: "red";}Text { text: '<b>代号:</b> ' + number }}}
}ListView {id: viewmodel: cusModel  // 指定模型x: 20y: 20width: 200height: parent.heighthighlight: Rectangle { color: "lightsteelblue"; radius: 5 } // 高亮delegate: cusDelgatefocus: true      // 设置为true则可以使用键盘上下键切换项，被选择的项以高亮显示// 框出ListView区域Rectangle {anchors.fill: parentcolor: "transparent"border.width: 1border.color: "black"}
}

运行结果如下图：
ListView比较常用的一些属性：

orientation: ListView.Horizontal (默认为ListView.Vertical)
header  // 自定义列表标头(页眉)
footer  // 自定义页脚
spacing // 项与项之间间距
... 更多详细请参考Qt帮助文档

3.使用ListView写一个简单的联系人列表

运行结果如下图：

ListView主要代码：

ListView {id: listViewwidth: 270model: 10clip: trueanchors {top: parent.topleft: parent.leftbottom: parent.bottom}header: SearchBox {width: listView.width}delegate: ContactItem {id: contactwidth: listView.widthheight: 70}footer: Rectangle {id: footerRectwidth: ListView.view.widthheight: 30color: "lightblue"border.width: 1Text {anchors.centerIn: footerRectcolor: "red"text: "一共有 " + listView.count + " 项"}}
}

SearchBox代码：

import QtQuick 2.15
import QtQuick.Controls 2.15Rectangle {id: rootheight: 85TextField {id: searchwidth: 100color: "transparent"leftPadding: 40placeholderText: "搜索"font.pixelSize: 20anchors {fill: parentmargins: 20}background: Rectangle {anchors.fill: parentborder.width: 1border.color: "gray"color: "transparent"radius: width / 2Image {id: namex: 10y: (parent.height - height) / 2width: 20height: 20source: "qrc:/images/icon/search.svg"}}}
}

ContactItem代码：

import QtQuick 2.15
import QtQuick.Controls 2.15Rectangle {id: rootclip: trueproperty bool selected: false       // 被选中onSelectedChanged: {if(selected) selectRect.width = 5else selectRect.width = 0}Component.onCompleted: {root.selected = true}// 分割线Rectangle {id: linecolor: "gray"width: parent.widthheight: 1}// 被选中时的状态矩形Rectangle {id: selectRectwidth: 10height: parent.heightcolor: "blue"Behavior on width {PropertyAnimation {duration: 70}}}// 头像图片Rectangle {id: headImgwidth: parent.height - line.heightheight: widthanchors {top: line.bottomleft: selectRect.rightleftMargin: 8}CusMaskShape {anchors.fill: parent}}// 名称及个性签名Column {id: txtheight: parent.heightanchors {left: headImg.rightleftMargin: 10right: headImg.lefttop: line.toptopMargin: {let topM = nameTxt.font.pixelSize + descTxt.font.pixelSizetopM = (root.height - topM - line.height) / 2return topM;}}Text {id: nameTxtfont.pixelSize: 20font.bold: truetext: "Tom"}Text {id: descTxtfont.pixelSize: 16font.bold: truetext: "talk is cheap, show me the code!"color: "gray"elide: Text.ElideRight}}
}

4. 注意事项：

当要在代理中访问视图的属性时，最好不要使用父类属性绑定，例如：

ListView {id: listView// ...delegate: Item {// 不建议width: parent.width// 推荐width: listView.widthwidth: ListView.view.width// ...}
}