0%

GridView属性说明

继承自 Flickable
相关控件:ListModel ListView

GridView以表格的形式来显示ListModel,XMLListModel或者在C++中继承QAbstractListModel类定制的数据。

本文: https://www.lovejia.win/blog/article/GridView.html
参考原文:http://doc.qt.io/qt-5/qml-qtquick-gridview.html
参考译文:http://blog.csdn.net/vampire_armand/article/details/39232727

属性说明

add : Transition

用于指定item添加到view中的过渡动画。

addDisplaced : Transition

用于指定view中item由于新增item而引起位置改变时应用的过渡动画。

cacheBuffer : int

是否保留视图可视区域之外的item实例。如果值比0大,视图将保存cacheBuffer指定尺寸的item实例。例如,如果一个可视的item是高20像素,GridView有3列,cacheBuffer设置为40。那么会有上两行和下两行的item实例会被保留。即上面保留6个实例,下面保留6个实例。这里所谓的保留,是实例由可视变得不可视。对即将可视的实例来说,就是预先创建。缓冲的item实例异步创建,创建多个帧的实例也是允许的,因此也可以用此来减少滑动时的跳帧。为了提高绘制执行,可视范围外的item不会绘制。

这个属性的默认值依赖于平台,但它常常是比0大的值。负值被忽略。

注意cacheBuffer不是像素缓冲,它仅仅维护item的实例。

设置这个值使列表滚动的更平滑,但更多的消耗内存。它不是创建有效item的替代品,越少的对象绑定在delegate上,视图能滚动的越快。

如果要在可视区域外显示item,使用displayMarginBeginning或displayMarginEnd。

cellHeight : real

栅格每单元的高,默认100

cellWidth : real

栅格每单元的宽,默认100

count : int

GridView内item的数目。

currentIndex : int

当前item的索引。currentItem保存当前item。设置currentIndex为-1,将清除高亮并设置currentItem为空。

如果highlightFollowsCurrentItem为真,设置currentIndex或currentItem将平滑滚动GridView到当前item位置,当前子组件变得可见。

注意,当前item的位置在直到它可见之前,只是近似位置。

currentItem : Item

参见currentIndex。

delegate : Component

delegate提供了一个模板,用以在视图中实例化每个item。索引通过index属性暴露,可被访问。模板中mode的属性,依赖mode的类型,也是可用的。

在delegate中的对象的数量和绑定,直接影响视图上的惯性效果。惯性效果的意思是,手指在触摸屏上滑动,在手指离开触摸屏瞬间,接触点的速度大于0,就产生一个惯性效果。根据组件的属性配置,惯性效果会有不同的减速度,当速度降到0时,惯性效果结束。

一般来说,在Loader组件中不需要添加delegate。

GridView中组件的尺寸由cellHeight和cellWidth决定,它不会被delegate中的根item的尺寸改变。

delegate实例的默认堆顺序是1。

注意:Delegates在需要的时候实例化并可在任何时候被摧毁,所以不要在delegate中保存状态。

displaced : Transition

任何模型操作导致视图中的item失去位置时的一般过渡。

这是一个方便的泛型过渡指定。对于因added、moved或removed操作而失去位置的item,不需要指定个别的addDisplaced、moveDisplaced和removeDisplaced属性,就可以具有过渡效果。
如果视图在指定了这个过渡之外,还指定了特定的addDisplaced、moveDisplaced或removeDisplaced过渡。当相应的操作发生时,如果提供的过渡没有被关闭(通过设置enabled到false),特定的过渡将被应用。如果特定的过渡关闭了,则应用本过渡。

displayMarginBeginning : int

这个属性允许delegates被显示在视图几何的外面。

如果这个值非零,视图将在视图开始之前或结束之后,创建额外的delegates。视图将创建和指定像素尺寸匹配的多个delegates。

例如,如果视图中delegate高为20像素,有3列,同时displayMarginBeginning和displayMarginEnd都设置成40,则在视图中组件之前和之后,各有6个delegate被创建和显示。40除以20等于2行,2行乘以3列等于6个delegate。默认值是0。

这个属性允许某些用户界面设置,它不是优化执行性能。如果为了优化执行性能,在视图几何的外面创建delegate实例,使用cacheBuffer属性实现。

displayMarginEnd : int

参见displayMarginBeginning。

effectiveLayoutDirection : enumeration

栅格的有效布局方向。它是只读的。

当为布局使用关联属性LayoutMirroring::enabled时,栅格的可视布局方向被镜像,但layoutDirection保持不变。

flow : enumeration

栅格的流动方向。属性值为:
GridView.FlowLeftToRight(default) -组件从左往右布局,视图垂直滚动
GridView.FlowTopToBottom-组件从顶往底布局,视图水平滚动。

页脚组件。页脚组件的实例在每个视图被创建。页脚位置在视图的底部,所有组件的后面。默认的增加顺序是1。

footerItem : Item

页脚组件的实例。它是所有页脚实例的父。页脚组件的实例在每个视图被创建。页脚位置在视图的底部,所有组件的后面。默认的增加顺序是1。

header : Component

标头组件。标头组件的实例在每个视图被创建。标头的位置在视图的开始,所有组件之前。默认的增加顺序是1。

headerItem : Item

页眉组件的实例。它是所有页眉实例的父,页眉组件的实例在每个视图被创建。页眉的位置在视图的开始,所有组件之前。默认的增加顺序是1。

highlight : Component

用作高亮的item。高亮(突出显示)item的实例被每个视图创建。产生的item的几何形状被视图管理,以期和当前组件在一起突出显示。highlightFollowsCurrentItem属性为假时,highlight不被视图管理。默认增加值是0。

highlightFollowsCurrentItem : bool

highlight是否被视图管理。如果属性为真(默认值)highlight跟随当前组件平滑移动。柔则highlight不被视图移动。任何移动必须被highlight实现。

highlightItem : Item

从highlight组件创建的高亮实例。highlightItem被视图管理,除非highlightFollowsCurrentItem设置为假,默认的增加顺序是0。

highlightMoveDuration : int

highlight的delegate的移动动画持续时间。只有highlightFollowsCurrentItem设置为真,这个属性才有效,默认持续时间是150ms。

highlightRangeMode : enumeration

这些属性定义了当前item在视图中突显的首选范围。preferredHighlightBegin的值一定比preferredHighlightEnd的值小。

当视图滚动时,这些属性影响当前item的位置。例如,如果视图滚动时,当前item应该呆在视图的中间,设置preferredHighlightBegin和preferredHighlightEnd的值为中间item的顶部和底部的坐标。如果当前item被程序改动,视图将自动滚动,如此以使当前组件在视图的中央。此外,无论highlight是否存在,当前item的索引都会存在。

keyNavigationWraps : bool

栅格是否封装导航键。

如果为真,导航键将移动当前item选择越过视图的一端而不是封装成环,移动选择到视图的另一端。默认导航键不封装。

layoutDirection : enumeration

栅格布局的方向。可能的值为:
Qt.LeftToRight(default) -组件将从左上角开始。流方向依赖于GridView::flow属性。
Qt.RightToLeft-组将将从顶部,右边角开始流。流方向依赖GridView::flow属性。
注意:如果GridView::flow被设置成GridView.FlowLeftToRight,并不会与layoutDirection设置成Qt.RightToLeft产生困惑。GridView.FlowLeftToRightflow仅仅表示流是水平方向的。水平方向从左往右还是从右向左,由layoutDirection决定。

model : model

提供栅格显示数据的模特模型。模特提供用来在视图中创建实例的设置数据。模特模型能在QML中用ListModel、XmlListModel或VisualItemModel直接创建,也可以由C++model类提供。如果C++model类被使用,它必须是QAbstractItemModel的子类或一个简单的列表。

move : Transition

由于在视图的model中做移动操作的视图中的组件所应用的过渡。

moveDisplaced : Transition

这个属性是过渡,应用于在视图中那些因为移动失去位置的模特实例。

populate : Transition

在视图创建时,用来填充模型模特实例的动画。

它在下面的时候应用到所有的模型模特实例:
1、视图第一次创建。
2、改变视图的模特模型。注意这是改成另一个模特模型的意思。
3、视图模特模型被复位。模特模型需要是QAbstractItemModel子类。

preferredHighlightBegin : real

这些属性定义了当前组件在视图中突显的首选范围。preferredHighlightBegin的值一定比preferredHighlightEnd的值小。

当视图滚动时,这些属性影响当前组件的位置。例如,如果视图滚动时,当前组件应该呆在视图的中间,设置preferredHighlightBegin和preferredHighlightEnd的值为中间组件的顶部和底部的坐标。如果当前组件被程序改动,视图将自动滚动,如此以使当前组件在视图的中央。此外,无论highlight是否存在,当前组件索引的行为将发生。

preferredHighlightEnd : real

参考preferredHighlightBegin

remove : Transition

这个过渡用在组件从视图中移除。

removeDisplaced : Transition

这是为视图中因为移除而失去位置的组件指定的过渡。

snapMode : enumeration

视图将如何跟随拖或挥滚动。它的值是下面这些:
GridView.NoSnap(default) - 视图停止在可见区域的任何位置。
GridView.SnapToRow- 视图停止后,视图的开始为行(当flow为GridView.FlowTopToBottom时,是列)对齐的位置。
GridView.SnapOneRow- 视图不会落在超过一行(当flow为GridView.FlowTopToBottom时,是列)的位置。即使鼠标按钮释放时,从一页的第一个可见行离开,视图也回到一页的第一个可见行。这个模式最常用于一次移动一页。

verticalLayoutDirection : enumeration

栅格的垂直布局方向。可能的值如下:
GridView.TopToBottom(default) -组件从视图的顶部往视图的底部布局。
GridView.BottomToTop-组件从视图的底部往视图的顶部布局。

其他属性

delayRemove: bool

这个关联属性保存delegate实例是否可以被摧毁。它关联到delegate的每一个实例上。默认为假。我们有时(例如销毁)需要推迟组件实例的摧毁以确保动画完成。

isCurrentItem: bool

如果是当前组件实例为真。否色为假。这个属性关联到每个delegate实例。

view :GridView

保存管理这个delegate实例的视图。它关联到delegate组件,也关联到header,footer和highlight这些组件。

信号说明

add()

在组件加入视图之后,立刻发射这个关联信号。

remove()

在组件移出视图之前,立刻发射这个信号。如果移除过渡被指定,过渡应用在这个信号被处理之后。注意delayRemove需要为假。

方法说明

forceLayout()

底层模型发生变化而GridView没有捕捉到时,使用一帧画面处理模型的变化。这个方法让GridView立刻响应模型未完成的变化。
注意,这个方法仅仅在组件完成之后,才能被调用。

int indexAt(real x, real y)

包含坐标(x,y)的可见的组件的索引。如果没有组件在该坐标上,或该坐标的组件不可见,返回-1。如果组件在可见区域之外滚动入视图时,无论组件是否在该坐标存在,都返回-1。
注意,这个方法仅仅在组件完成之后,才能被调用。

Item itemAt(real x, real y)

包含坐标(x,y)的可见的组件。如果没有组件在坐标上或组件不可见,返回空。当组件滚入视图时,如果组件在可见区域之外,返回空,不管组件是否将存在于该坐标。
注意,这个方法仅仅在组件完成之后,才能被调用。

moveCurrentIndexDown()

在视图中向下移动当前索引。如果当前组件实例在端点,且keyNavigationWraps为真,当前索引将缠绕成环。如果count是0,这个方法没有影响。注意,这个方法仅仅在组件完成之后,才能被调用。

moveCurrentIndexLeft()

在视图中向左移动当前索引。如果当前组件实例在端点,且keyNavigationWraps为真,当前索引将缠绕成环。如果count是0,这个方法没有影响。注意,这个方法仅仅在组件完成之后,才能被调用。

moveCurrentIndexRight()

在视图中向右移动当前索引。如果当前组件实例在端点,且keyNavigationWraps为真,当前索引将缠绕成环。如果count是0,这个方法没有影响。注意,这个方法仅仅在组件完成之后,才能被调用。

moveCurrentIndexUp()

在视图中向上移动当前索引。如果当前组件实例在端点,且keyNavigationWraps为真,当前索引将缠绕成环。如果count是0,这个方法没有影响。注意,这个方法仅仅在组件完成之后,才能被调用。

positionViewAtBeginning()

视图开始或结束的位置,包含了页眉或页脚。不推荐使用contentX和contentY去定位特定索引的视图,这是不可靠的。因为从列表的开始移除组件不会促使其他所有的组件响应,并且视图实际开始可能因为delegates的尺寸变的不同。
注意,这个方法仅仅在组件完成后能被调用。在启动时定位视图,应使用Component.onCompleted调用这个方法。例如启动时定位视图末端:
Component.onCompleted:positionViewAtEnd()。

positionViewAtEnd()

参见positionViewAtBeginning()

positionViewAtIndex(int index, PositionMode mode)

用指定的索引,指定模式定位视图。
GridView.Beginning- 视图的组件实例顶部(水平方向是左边)的位置
GridView.Center- 视图的组件实例中心的位置。
GridView.End-视图的组件实例底部(水平方向则是右边)的位置
GridView.Visible- 如果组件的任何部分可见,没有动作,否则带它入视图。
GridView.Contain- 确保整个组件实例可见,如果item太大,尺寸超过视图,它将定位在视图的顶部(水平方向是左边)。
GridView.SnapPosition- 定位视图到preferredHighlightBegin的组件。这个模式仅仅当highlightRangeMode是StrictlyEnforceRange或snapping经由snapMode打开时有效。
如果使用index定位视图时,在视图的开始或结束产生空白的现实。视图将定位到边界。适用contentX和contentY定位特定索引的视图是不推荐的。因为它不可靠。移除视图开始的组件不会出事其他的全部组件被重定位。带组件到视图的正确方式是使用positionViewAtIndex。
注意:本方法应该在组件完成后调用。在启动时定位视图,使用Component.onCompleted。例如设为视图的顶部。
Component.onCompleted:positionViewAtIndex(count - 1, GridView.Beginning)
译者:想象一下我们的GridView中有100个子组件,分4列显示,那么有25行。我们的屏幕很小,只能显示5行,那么我们需要将所有的子组件分5页显示。当前我们显示第1页,但我们希望显示第4页。如何做?我们应该将视图移动到第4页。这就是将视图移动的方法。

功能简述

该控件以栅格的形式平铺显示item,可以用在资源管理器,表情盒子等地方
支持滚动效果,添加页眉页脚等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Item {
id:gridtest
ListModel{
id:griddata
ListElement {
name: "Jim Williams"
bkcolor: "#ff0000"
}
ListElement {
name: "John Brown"
bkcolor: "#ffff00"
}
ListElement {
name: "Bill Smyth"
bkcolor: "#00ff00"
}
ListElement {
name: "Sam Wise"
bkcolor: "#00ffff"
}
}

GridView {
anchors.fill: parent
model: griddata
footer: griddata
keyNavigationWraps:ture
LayoutMirroring.enabled: true
add: Transition {
NumberAnimation { properties: "x,y"; from: 100; duration: 200 }
}
addDisplaced: Transition {
NumberAnimation { properties: "x,y"; duration: 200 }
}
cellHeight:100
cellWidth:100
delegate: Rectangle {
height: GridView.view.cellHeight
width: GridView.view.cellWidth
color: bkcolor
Text { text: name; anchors.centerIn: parent }
MouseArea{
anchors.fill: parent
onClicked: {
griddata.insert(2,{"name":"texttest","bkcolor":"#0000ff"});
}
}
}
}
}
------本文结束    感谢阅读------
你打赏你的,我分享我的!