继承自 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-组件从顶往底布局,视图水平滚动。
footer : Component
页脚组件。页脚组件的实例在每个视图被创建。页脚位置在视图的底部,所有组件的后面。默认的增加顺序是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 | Item { |