赞
踩
为列表模型(ListModel)的所有元素提供列表视图。
ListView显示内置QML类型(例如ListModel和XmlListModel)创建的模型数据,或者使用C++定义的自定义模型类(继承QAbstractItemModel或QAbstractListModel)创建的数据。
ListView有一个Model(定义要显示的数据)和一个Delegate(定义如何显示数据)。ListView中的元素可以水平或垂直放置。列表视图本质上是可以拖动的,因为ListView继承Flickable。
以下示例显示了在名为ContactModel.qml的文件中定义的简单列表模型:
import QtQuick 2.0 ListModel { ListElement { name: "Bill Smith" number: "555 3264" } ListElement { name: "John Brown" number: "555 8426" } ListElement { name: "Sam Wise" number: "555 0473" } }
另一个组件可以在ListView中显示此模型数据,如下所示:
import QtQuick 2.0
ListView {
width: 180; height: 200
model: ContactModel {}
delegate: Text {
text: name + ": " + number
}
}
示例中,ListView为model创建了ContactModel组件,并为其委托创建一个Text显示项。
改进的列表视图如下所示。对委托进行了显示效果改进,并将其移至单独的contactDelegate组件中。
Rectangle { width: 180; height: 200 Component { id: contactDelegate Item { width: 180; height: 40 Column { Text { text: '<b>Name:</b> ' + name } Text { text: '<b>Number:</b> ' + number } } } } ListView { anchors.fill: parent model: ContactModel {} delegate: contactDelegate highlight: Rectangle { color: "lightsteelblue"; radius: 5 } focus: true } }
示例中,当前选中的元素使用highlight属性,以蓝色矩形突出显示,并将焦点(focus)设置为true以启用ListView的键盘导航。ListView本身就是焦点范围(有关详细信息,请参考Qt Quick中的Keyboard Focus)。
代理(delegate)将根据需要实例化,并且可以随时销毁。它们是ListView的contentItem的父级,而不是ListView本身的父级。永远不要将状态存储在代理中。
ListView将许多属性附加到代理的根元素(root item),例如ListView.isCurrentItem。在以下示例中,代理的根元素可以直接访问附加属性ListView.isCurrentItem。而子contactInfo对象必须通过父级访问(wrapper.ListView.isCurrentItem)
ListView { width: 180; height: 200 Component { id: contactsDelegate Rectangle { id: wrapper width: 180 height: contactInfo.height color: ListView.isCurrentItem ? "black" : "red" Text { id: contactInfo text: name + ": " + number color: wrapper.ListView.isCurrentItem ? "red" : "black" } } } model: ContactModel {} delegate: contactsDelegate focus: true }
注意:视图不会自动启用裁剪(clip)。如果视图没有被其他对象或屏幕裁剪,则必须设置clip:true才能将超出视图部分裁剪掉。
ListView中的元素布局方式有以下三种:
orientation
控制元素是水平还是垂直布局,该值可以是Qt.Horizontal和Qt.Vertical。
layoutDirection
控制水平方向布局方式,通过Qt.LeftToRight或Qt.RightToLeft控制水平从左到右还是从右到左布局。
verticalLayoutDirevtion
控制垂直方向布局方式,通过ListView.TopToBottom或ListView.BottomToTop来控制垂直从上到下还是从下到上布局。
默认情况下,ListView是垂直布局,并且是从上到下放置。下图显示了ListView可以具有的不同布局方式,具体取决于上面列出的属性值:
默认情况下,垂直ListView将flickableDirection设置为Flickable.Vertical,水平ListView将其设置为Flickable.Horizontal。此外,垂直ListView只计算contentHeight,而水平ListView只计算contentWidth。
从Qt 5.9(Qt Quick 2.9)开始,可以制作一个可以向两个方向滑动的ListView。将flickableDirection设置为Flickable.AutoFlickDirection或Flickable.AutoFlicklfNeeded,并且必须提供所需的contentWidth和contentHeight。
ListView {
width: 180; height: 200
contentWidth: 320
flickableDirection: Flickable.AutoFlickDirection
model: ContactModel {}
delegate: Row {
Text { text: '<b>Name:</b> ' + name; width: 160 }
Text { text: '<b>Number:</b> ' + number; width: 160 }
}
}
元素的Z值确定了它们的与渲染顺序。ListView使用几个不同的默认Z值,具体取决于要创建的项目类型:
属性 | 默认Z值 |
---|---|
delegate | 1 |
footer | 1 |
header | 1 |
highlight | 2 |
section.delegate | 2 |
highlightMoveDuration :1000
highlightMoveVelocity :- 1
默认值为0.
此属性用于允许配置某些UI,而不是性能优化。如果处于性能原因希望在视图外部创建代理,则可能要改用cacheBuffer属性。
highLightRangeMode有效值:
currentIndex:int/font>
currentItem : Item
currentIndex属性保存当前对象的索引
currentItem保存当前对象。
将currentIndex设置为-1将清除高亮显示并将currentItem设置为null。
如果highlightFollowsCurrentItem为true,则设置这两个属性中的任何一个都将平滑滚动ListView,以便当前对象可见。
请注意,当前对象的位置是不准确的,直到在视图中变得可见位置。
add : Transition
此属性指定添加对象到视图时的过渡效果。
例如,以下视图指定了过渡效果:
ListView {
...
add: Transition {
NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
}
}
只要将对象添加到上面视图中,该对象就会在一秒内从位置(100,100)到视图的最终位置(x,y),对这移动过程进行动画处理。过渡仅适用于添加到视图中的新对象。它不适用于被替换的对象,要设置被替换对象的动画,请设置displaced或addDisplaced属性。
ListView {
...
addDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
每当一个对象添加到视图中时,新对象下面的所有对象都会被移动,从而导致它们在视图内向下移动(或者,如果水平放置则横向移动)。当发生这种移动时,对象将按照指定的时间在一秒钟内通过NumberAnimation移动到视图中最终位置(x,y),并将过程进行动画处理。此过渡不适用于已添加到视图中的新对象。
如果一个对象同时通过多种类型的操作进行移动,则不会定义addDisplaced,moveDisplaced或removeDisplaced过渡。此外,如果不根据addDisplaced,moveDisplaced或removeDisplaced操作来指定不同的过渡效果,请考虑设置displaced属性。
注意:此过渡不适用于初始化填充视图或视图模型更改时创建的对象。在这些情况下将应用populate过渡。
cacheBuffer在displayMarginBeginning或displayMarginEnd指定的任何显示边界之外运行。
count : int
此属性保存视图中的对象个数。
currentSection : string
此属性保存当前位于视图头部的部分。
delegate : Component
代理提供一个模板,定义了由视图实例化的每个对象。index是公开可访问的索引属性。
代理中对象和绑定的数量直接影响视图的flick性能。如果可能的话,将不需要正常显示代理的功能放在加载器中,该将在其可以在需要时加载其他组件。
ListView将根据代理中根对象的大小对对象进行布局。
displaced : Transition
此属性指定视图的模型中被替换的对象的过渡效果。
这是便捷的方法,用于指定要应用于通过添加、移动和删除操作替换的所有对象的过渡效果,而不必指定单个addDisplaced,moveDisplaced和removeDisplaced属性。如下示例指定唯一过渡的视图:
ListView {
...
displaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
示例中,在视图中添加、移动或删除任何对象时,其下面的对象都会移动,从而导致它们在视图中向下移动。当发生这种移动时,将按照指定的时间(一秒之)内通过NumberAnimation对对象在视图中向其新的位置(x,y)的移动进行动画处理。
如果视图指定了此通用移动效果以及特定的addDisplaced,moveDisplaced或removeDisplaced过渡效果,则在相关操作发生时,将使用更具体的过渡效果来代替通用过渡效果,前提是尚未禁用更具体的过渡(enabled设置为false)。如果确实禁用了,则改用为通用过渡效果。
effectiveLayoutDirection : enumeration
此属性获取水平列表的有效布局方式。
使用附加属性LayoutMirroring::enabled用于布局时,水平列表的可视布局方向将被镜像。但是,属性layoutDirection将保持不变。
footer : Component
此属性指定用作页脚的组件对象。
为每个视图创建页脚组件的实例。页脚位于视图中所有对象的末尾。
footerItem : Item
此属性获取页脚组件对于的对象。
footerPositioning : enumeration
此属性确定页脚对象的位置。
| 值 | 描述 |
| – | – |
| ListView.InlineFooter | (默认值)页脚位于内容的末尾,并像普通对象一样与内容一起移动 |
| ListView.OverlayFooter | 页脚位于视图的末尾 |
| ListView.PullBackFooter | 页脚位于视图的末尾。可以通过向后移动内容来将页脚推开,然后向前移动内容来将页脚拉回 |
注意: 此属性对页脚的渲染顺序没有影响。例如,如果在使用ListView.OverlayFooter时将页脚显示在代理对象的上方,则应将其Z值设置为大于代理的Z值。
注意:如果footerPositioning未设置为ListView.InlineFooter,则用户无法在页脚中按下并轻弹列表。在任何情况下,页脚对象可以包含对象或事件处理程序,以提供对鼠标或触摸屏输入的自定义处理。
header : Component
此属性指定用于标题的组件对象。
为每个视图创建标题组件的示例。标题位于视图中所有对象的头部。
headerItem : Item
此属性返回标题组件的对象。
headerPositioning : enumeration
此属性确定标题对象的位置。
| 值 | 描述 |
| – | – |
| ListView.InlineHeader | (默认值)标题位于内容开头,并项普通对象一样与内容一起移动。 |
| ListView.OverlayHeader | 标题位于视图的开头 |
| ListView.PullBackHeader | 标题位于视图的开头,可以通过向前移动内容来将标题推开,并通过向后移动内容来将标题拉回。 |
注意:此属性对标题的渲染顺序没有影响。例如,如果在使用ListView.OverlayHeader时标题应显示在代理对象的上方,则其Z值应设置为高于代理的Z值。
注意:如果headerPositioning未设置ListView.InlineHeader,则用户无法按下并轻弹标题中的列表。在任何情况下,标题对象都可以包含项或事件处理程序,以提供对鼠标或触摸输入的自定义处理。
highlight : Component
此属性指定用于高亮显示的组件对象。
为每个列表创建一个高亮组件的实例。除非列表中的highlightFollowsCurrentItem属性为false,否则列表将管理所有组件实例的几何形状,使其与当前项保持一致。
highlightFollowsCurrentItem : bool
此属性指定goal显示是否由视图管理。
如果此属性为true(默认值),则高亮显示将平滑移动以跟随当前对象。否则,高亮不会被视图移动,并且任何移动都必须由高亮实现。
由SpringAnimation定义动作的高亮:
Component { id: highlight Rectangle { width: 180; height: 40 color: "lightsteelblue"; radius: 5 y: list.currentItem.y Behavior on y { SpringAnimation { spring: 3 damping: 0.2 } } } } ListView { id: list width: 180; height: 200 model: ContactModel {} delegate: Text { text: name } highlight: highlight highlightFollowsCurrentItem: false focus: true }
请注意:高亮显示动画还会影响视图的滚动方式。这是因为视图移动以将高亮显示保持在可见范围内。
highlightItem : Item
返回高亮显示组件的对象。
keyNavigationEnabled : bool
此属性指定是否启用列表的按键导航。
如果为true,则用户可以使用键盘浏览视图。对于需要选择性地启用或禁用鼠标和键盘交互的应用程序很有用。
默认情况下,此属性的值绑定到interactive,以确保现有应用程序的行为兼容性。明确设置后,它将不再绑定到interactive属性。
keyNavigationWraps : bool
此属性指定按键导航是否围绕列表。
如果为true,则当前对象选择移至列表末尾的按键导航会自动回绕,并将选择对象移至列表的开头,反之亦然。
默认为false。
layoutDirection : enumeration
此属性指定水平列表的布局方式。
Qt.LeftToRight - (默认值)对象将从左到右进行布局。
Qt.RightToLeft - 对象从右到左布局。
如果布局方向是Qt.Vertical,则该属性无效。
model : model
此属性指定为列表提供数据的模型。
该模型提供了用于在视图中创建对象的数据集。可以使用ListModel,XmlListModel或ObjectModel在QML中直接创建模型,也可以由C++模型类提供。如果使用C++模型类,则它必须是QAbstractItemModel的子类或是简单的列表。
move : Transition
此属性指定对象移动的过渡效果。
如下示例:
ListView {
...
move: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
每当模型执行移动操作时,视图中的各个对象将在一秒钟内以动画形式移动到新的位置。过渡仅适用于模型中作为移动操作主题的对象;它不适用于由于移动操作而引起其下面移动的对象。
ListView {
...
moveDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
每当模型执行移动操作时,该操作的原索引和目标索引之间的对象就会移动,从而导致它们在视图中向上或向下移动。每当发生这种移动时,将按指定的时间(一秒钟)内通过NumberAnimation对对象在视图中向其新的位置(x,y)的移动进行动画处理。
如果一个对象同时通过多种类型的操作进行位移,则不会定义是否应用addDisplaced,moveDisplaced或removeDisplaced过渡。
垂直方向:
ListView {
...
populate: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
初始化视图后,该视图将创建所有必要的对象,然后在一秒钟内将它们设置到最终位置。
但是,当后续滚动视图时,即使在代理变得可见时实例化了代理,填充过渡也不会运行。当模型以新的可见代理的方式更改时,add过渡就能运行。因此,您不应该依赖于populate转换来初始化代理中的属性,因为它并不适用于每个代理。如果您的动画给to属性设置了值,为了有动画效果,还得设置from属性:
ListView {
...
delegate: Rectangle {
opacity: 1 // not necessary because it's the default
}
populate: Transition {
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
}
}
ListView {
...
remove: Transition {
ParallelAnimation {
NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
}
}
}
每当从视图中删除一个对象时,该对象将在一秒钟内动画化到位置(100,100),同时还将其透明度更改为0 。该过渡仅适用于从视图中删除的对象。
请注意,在应用删除多度时,该对象已从模型中删除,对已删除的模型数据的索引引用将无效。
此外,如果已为代理对象设置了delayRemove附加属性,则在delayRemove再次变为false之前,将不应用删除过渡效果。
ListView {
...
removeDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 1000 }
}
}
每当从视图中删除某个对象时,位于其下方的所有对象都将移动,从而使它们在视图内向上移动。当发生这种位移时,将按指定的时间内通过NumberAnimation对对象在视图中向其新的位置(x,y)的移动进行动画处理。此过渡不适用于实际已从视图中删除的对象。
列表中的每个对象都具有名为ListView.section,ListView.previousSection和ListView.nextSection的附加属性。
如下示例,一个ListView显示动物列表,分为几部分。ListView中的每个对象都根据模型对象的“size”属性放置在不同的部分中。sectionHeading代理组件提供了淡蓝色的条,用于标记每个节的开始。
// The delegate for each section header Component { id: sectionHeading Rectangle { width: container.width height: childrenRect.height color: "lightsteelblue" required property string section Text { text: parent.section font.bold: true font.pixelSize: 20 } } } ListView { id: view anchors.top: parent.top anchors.bottom: buttonBar.top width: parent.width model: animalsModel delegate: Text { required property string name text: name font.pixelSize: 18 } section.property: "size" section.criteria: ViewSection.FullString section.delegate: sectionHeading }
注意:ListView添加节是不会自动根据节条件对列表项进行重新排序。如果未按节对模型进行排序,则创建的节可能不是唯一的。即使该节存在于其他位置,不同节之间的每个边界也会创建节标题。
建议亲手实验:
ListView{ id:listView anchors.fill: parent model: 20 snapMode: ListView.SnapOneItem delegate: Rectangle{ width: listView.width height: listView.height color: index % 2 ? "red":"yellow" Label{ id:txt anchors.centerIn: parent font.pointSize: 50 text: index } } }
add()
将对象添加到视图后,离家发送此信号。
如果指定了add过渡效果,则在处理此信号后立即生效。
remove()
在从视图中删除对象之前会发送该信号。
如果指定了remove过渡效果,则在处理此信号后应用过渡效果,前提是delayRemove为false。
Component.onCompleted: positionViewAtEnd()
decrementCurrentIndex()
减少当前索引。如果keyNavigationWraps为true且当前位于开头,则当前索引将换行。如果计数为0则此方法无效。
测试后发现没有什么现象,后续再查找资料理解。
forceLayout()
通常,模型中的更改会按照每帧更新一次。这意味着在内部脚本块中可能会出现模型的更改未更新显示。此方法将强制ListView立即响应模型中的所有更改。
incrementCurrentIndex()
增加当前索引。如果keyNavigationWraps为true且当前位于末尾,则当前索引将换行。
int indexAt(x, real y)
返回在当前坐标(x,y)的可见项的索引。如果在指定的点没有对象,或者该对象不可见,则返回-1。
如果该对象在可见区域外,则无论滚动到视图中时该点是否存在对象,都将返回-1。
Item itemAt(x, real y)
返回当前位置(x,y)的可见项对象。如果指定的点上没有对象或该对象不可见,则返回null。 如果该对象在可见区域外,则无论滚动到视图中时该点是否存在对象,都将返回null。
Item itemAtIndex(index)
返回索引index对应的对象。如果没有该索引的对象(例如该对象尚未被创建),或者因为已将其平移到可见区域外并从缓存中删除,则返回null。
注意:返回值不能存储,因为如果视图释放了该对象,则一旦控制权超出调用范围,它将变为null。
Qt 5.13引入此方法。
positionViewAtIndex(index, PositionMode mode)
定位视图,使索引位于mode指定的位置:
如果将视图定位在索引处会导致在视图的开始或结尾显示空白,则视图将位于边界处。
不建议使用contentX或contentY将视图定位在特定索引处。这是不可靠的,因为从列表的开头删除对象不会导致所有其他项目重新定位,并且视图的实际开始可能会因委托的大小而异。使对象可见的正确方法是使用positionViewAtIndex。
注意:仅应在组件完成后才调用方法。若要在启动时定位视图,应在Component.onCompleted调用此方法。例如,将视图放在末尾:
Component.onCompleted: positionViewAtIndex(count - 1, ListView.Beginning)
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。