QML类型说明-GridView

来源:互联网 发布:讯鸟软件怎么样 编辑:程序博客网 时间:2024/03/29 09:36

GridView

ImportStatement:   import QtQuick 2.2

Inherits:      Flickable

 

Properties

add :Transition

addDisplaced: Transition

cacheBuffer: int

cellHeight :real

cellWidth :real

count : int

currentIndex: int

currentItem: Item

delegate :Component

displaced : Transition

displayMarginBeginning: int

displayMarginEnd: int

effectiveLayoutDirection: enumeration

flow :enumeration

footer :Component

footerItem :Item

header :Component

headerItem :Item

highlight :Component

highlightFollowsCurrentItem: bool

highlightItem: Item

highlightMoveDuration: int

highlightRangeMode: enumeration

keyNavigationWraps: bool

layoutDirection: enumeration

model :model

move :Transition

moveDisplaced: Transition

populate :Transition

preferredHighlightBegin: real

preferredHighlightEnd: real

remove :Transition

removeDisplaced: Transition

snapMode :enumeration

verticalLayoutDirection: enumeration

 

AttachedProperties

delayRemove: bool

isCurrentItem: bool

view :GridView

 

AttachedSignals

add()

remove()

 

Methods

forceLayout()

intindexAt(int x, int y)

ItemitemAt(int x, int y)

moveCurrentIndexDown()

moveCurrentIndexLeft()

moveCurrentIndexRight()

moveCurrentIndexUp()

positionViewAtBeginning()

positionViewAtEnd()

positionViewAtIndex(intindex, PositionMode mode)

 

DetailedDescription

QML内建的模特模型ListModel和XmlListModel,或在C++中继承QAbstractListModel类定制的模特模型都能交付模特数据。GridView可以显示这些数据。

GridView有一个model。model定义了显示的数据。它还有delegate,定义了模特怎样显示。GridView的子组件水平或垂直布局,它继承于Flickable。

ExampleUsage

下面的例子展示了如何在一个文件中定义简单的列表模特模型。

ContactModel.qml:

importQtQuick 2.0

 

ListModel {

 

    ListElement {

        name: "Jim Williams"

        portrait: "pics/portrait.png"

    }

    ListElement {

        name: "John Brown"

        portrait: "pics/portrait.png"

    }

    ListElement {

        name: "Bill Smyth"

        portrait: "pics/portrait.png"

    }

    ListElement {

        name: "Sam Wise"

        portrait: "pics/portrait.png"

    }

}


这个模特模型能作为ContactModel在其他QML文件中引用。更多的信息看QML的模块文档关于创建重用组件部分。

另一个组件使用GridView显示模特数据。下面的例子创建了ContactModel组件作为model,使用Column(包含Image和Text组件)作为delegate。

 

importQtQuick 2.0

 

GridView {

    width: 300; height: 200

 

    model: ContactModel {}

    delegate: Column {

        Image { source: portrait;anchors.horizontalCenter: parent.horizontalCenter }

        Text { text: name;anchors.horizontalCenter: parent.horizontalCenter }

    }

}


view将为model中的每个组件创建delegate定义的显示实例。注意delegate能直接访问模特的name和portrait属性。

下面是改进的栅格显示,delegate作了视觉改善,并做成id为contactDelegate的独立组件。

Rectangle {

    width: 300; height: 200

 

    Component {

        id: contactDelegate

        Item {

            width: grid.cellWidth; height:grid.cellHeight

            Column {

                anchors.fill: parent

                Image { source: portrait;anchors.horizontalCenter: parent.horizontalCenter }

                Text { text: name;anchors.horizontalCenter: parent.horizontalCenter }

            }

        }

    }

 

    GridView {

        id: grid

        anchors.fill: parent

        cellWidth: 80; cellHeight: 80

 

        model: ContactModel {}

        delegate: contactDelegate

        highlight: Rectangle { color:"lightsteelblue"; radius: 5 }

        focus: true

    }

}

使用highlight属性,让当前选择用蓝色矩形高亮化。focus属性设置为真则为这个栅格浏览打开了键盘导航。栅格浏览本身是一个焦点范围(看Quick中的键盘焦点文档获得更多信息)。

Delegates根据需要实例化并可能在任何时候被摧毁,所以不要在其中堡村任何状态。

GridView能关联大量的属性到delegate的跟item。例如GridView.isCurrentItem。在下面的例子中,delegate的根item能直接访问关联的属性,而根item下面的子组件就需要用wrapper.GridView.isCurrentItem来访问该属性。

GridView {

    width: 300; height: 200

    cellWidth: 80; cellHeight: 80

 

    Component {

        id: contactsDelegate

        Rectangle {

            id: wrapper

            width: 80

            height: 80

            color: GridView.isCurrentItem ?"black" : "red"

            Text {

                id: contactInfo

                text: name + ": " +number

                color:wrapper.GridView.isCurrentItem ? "red" : "black"

            }

        }

    }

 

    model: ContactModel {}

    delegate: contactsDelegate

    focus: true

}

注意:视图组件不自动设置clip属性。如果没有其他的item或屏幕剪切视图,应当设置clip属性为真,以使内容不会被部分或全部出现在视图的外面。

 

GridViewlayouts

在GridView中布局子组件能被下面的属性控制:

flow - 控制子组件是从左到右(作为行系列)或从顶到底(作为列系列)。这个值能被设置成GridView.FlowLeftToRight或GridView.FlowTopToBottom。

layoutDirection-控制水平布局方向。子组件是从视图的左边布局到右边或反之。这个值能被设置成Qt.LeftToRight或Qt.RightToLeft。

verticalLayoutDirection-控制垂直布局方向是从视图的顶部到底部或反之。这个值能被设置成GridView.TopToBottom或GridView.BottomToTop。

默认的,GridView的flow是左往右流动,水平从左往右布局,垂直从顶往底布局。

这些属性能联合以产生不同的布局效果,像下表展示的那样。第一行是flow值为GridView.FlowLeftToRight时,不同的水平和垂直布局联合的效果(指定layoutDirection和verticalLayoutDirection)。同样的,第二行是flow值为GridView.FlowTopToBottom时,联合不同的水平和垂直布局的效果。

 GridViews with GridView.FlowLeftToRight flow(H) Left to right (V) Top to bottom

(H) Right to left (V) Top to bottom

(H) Left to right (V)Bottom to top

(H) Right to left (V)Bottom to top

GridViews with GridView.FlowTopToBottom flow(H) Left to right (V) Top to bottom

(H) Right to left (V) Top to bottom

(H) Left to right (V)Bottom to top

(H) Right to left (V)Bottom to top


同时参阅QML数据模型、ListView、PathView和Quick示例代码Views部分。

 

PropertyDocumentation

add :Transition

添加组件到视图的过渡。

例如,下面为add指定过渡:

GridView {

    ...

    add: Transition {

        NumberAnimation { properties:"x,y"; from: 100; duration: 1000 }

    }

}

当添加子组件到视图。将在视图上出现开始于(100,100),终结与(x,y)的长达1秒的动画。这个过渡仅仅应用于加入视图的新组件。因添加组件而失去位置的组件,不会应用此动画。想动画失去位置的组件,设置displaced或addDisplaced属性。

关于怎样使用视图过渡的更详细信息和示例,参阅ViewTransition文档。

注意:这个过渡不应用于视图初始化填充就创建的组件。当视图的model属性改变时(换一个model而不是在原model上增加删除),这个过渡也不被应用。在这些情况下,populate属性指定的过渡被应用。另外,不要使用动画来推高组件的高度,这会促使组件在错误的位置显示。替代的,高能在delegate中的onAdd处理中被动画化。同时参阅addDisplaced、populate和ViewTransition。

 

addDisplaced: Transition

因为添加其它组件而失去位置的组件使用的过渡。

下面是指定该过渡的例子:

GridView {

    ...

    addDisplaced: Transition {

        NumberAnimation { properties:"x,y"; duration: 1000 }

    }

}

每当添加组件到视图,视图中新组件下面的所有组件都将失去位置,向下移动(如果水平方向,则是侧面)。此时失去位置发生,组件需要移动到新位置。上面的例子是用动画处理这种移动。1秒的NumberAnimation动画让组件平滑的移动到新位置。

这个过渡不应用在添加到视图的新组件上,add属性处理添加的新组件的动画。

如果组件是因为多个操作类型失去位置,不管addDisplaced、moveDisplaced和removeDisplaced是否定义,addDisplaced没有定义过渡将被应用。另外,如果我们不需要为add、move、remove操作指定不同的过渡,考虑使用displaced属性替代。

关于怎样使用视图过渡的更详细信息和示例,参阅ViewTransition文档。

.注意:这个过渡不应用于视图初始化填充就创建的组件。当视图的model属性改变时(换一个model而不是在原model上增加删除),这个过渡也不被应用。在这些情况下,populate属性指定的过渡被应用。

 

cacheBuffer: int

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

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

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

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

如果要操作显示外面的delegate,使用displayMarginBeginning或displayMarginEnd。

 

cellHeight :real

栅格每单元的高,默认100

 

cellWidth :real

栅格每单元的宽,默认100

 

count : int

GridView内子组件的数目。

 

currentIndex: int

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

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

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

 

currentItem: Item

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

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

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

 

delegate :Component

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

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

如果可能,在需要的时候加载组件的Loader中放置功能对delegate的一般显示是不需要的。

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

delegate实例的默认堆顺序是1。(就是一个一个增加?需要试验验证)

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

 

displaced :Transition

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

这是一个方便的泛型过渡指定。对于因added、moved或removed操作而失去位置的组件,不需要指定个别的addDisplaced、moveDisplaced和removeDisplaced属性,就可以具有过渡效果。

下面是指定失去位置过渡的例子:

GridView {

    ...

    displaced: Transition {

        NumberAnimation { properties:"x,y"; duration: 1000 }

    }

}

当任何视图上的组件出现added、moved或removed操作,在它之下的所有组件都失去位置,触发在视图上向下移动(如果水平方向,则向边上移动)。此时触发1秒组件移动到新位置的NumberAnimation动画。

如果视图指定了这个过渡之外,还指定了特定的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

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

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

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

这个属性允许某些用户界面设置,它不是执行的优化。如果我们希望因执行原因,,在视图几何的外面创建delegate实例,使用cacheBuffer属性替代。

 

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

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

 

highlightFollowsCurrentItem: bool

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

下面是highlight被SpringAnimation定义运动的代码:

Component {

    id: highlight

    Rectangle {

        width: view.cellWidth; height:view.cellHeight

        color: "lightsteelblue";radius: 5

        x: view.currentItem.x

        y: view.currentItem.y

        Behavior on x { SpringAnimation {spring: 3; damping: 0.2 } }

        Behavior on y { SpringAnimation {spring: 3; damping: 0.2 } }

    }

}

 

GridView {

    id: view

    width: 300; height: 200

    cellWidth: 80; cellHeight: 80

 

    model: ContactModel {}

    delegate: Column {

        Image { source: portrait; anchors.horizontalCenter:parent.horizontalCenter }

        Text { text: name;anchors.horizontalCenter: parent.horizontalCenter }

    }

 

    highlight: highlight

    highlightFollowsCurrentItem: false

    focus: true

}

 

highlightItem: Item

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

 

highlightMoveDuration: int

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

 

highlightRangeMode: enumeration

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

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

译者注:当水平滚动时,preferredHighlightBegin为高亮距离视图左边的值,当前组件也跟随高亮运动。如果没有滚动发生,高亮根据当前组件移动。当垂直滚动时,preferredHighlightBegin为距离视图顶部的值。preferredHighlightEnd的值推荐根据栅格单元的尺寸设置。它是高亮尾部距离视图左边(水平滚动)或顶部(垂直滚动)的值。

highlightRangeMode的有效值为:

GridView.ApplyRange-视图企图维护highlight处于范围内。但是highlight能在视图的底部或鼠标交互时移动到范围的外面。

GridView.StrictlyEnforceRange-highlight只能在范围内移动,只有当键盘或鼠标行为促使当前组件改变时,highlight才能移动到范围的外面。

GridView.NoHighlightRange-没有highlight范围,这是默认值。

 

keyNavigationWraps: bool

栅格是否封装导航键。

如果为真,导航键将移动当前组件选择越过视图的一端而不是封装成环,移动选择到视图的另一端。默认导航键不封装。(这里需要使用试验测试具体效果,看理解是否正确)

 

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中做移动操作的视图中的组件所应用的过渡。

例如像下面这样指定过渡:

GridView {

    ...

    move: Transition {

        NumberAnimation { properties:"x,y"; duration: 1000 }

    }

}

每当模型执行移动操作,移动模特到特定的索引,在视图中的响应模特的组件实例就以持续1秒的动画移动到新位置。过度仅仅应用于进行移动操作的主题模型模特实例,不应用于因为移动失去位置的模型模特实例。如果要动画失去位置的模特实例,设置displaced或moveDisplaced属性。

 

moveDisplaced: Transition

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

下面是指定这个过度的方式示例:

GridView {

    ...

    moveDisplaced: Transition {

        NumberAnimation { properties:"x,y"; duration: 1000 }

    }

}

每当模特的实例执行移动操作到指定的索引,在移动的源索引和目的索引之间的模特实例就会失去位置。它们会在视图中朝上或朝下(如果水平方向,则是超边上)移动。当这种情况发生,模特实例将使用NumberAnimation的一秒动画移动到新位置。这个过渡不会应用到移动操作的主题模特实例,移动那个实例,设置move属性。

如果模特实例同时因多个操作类型失去位置,无论addDisplaced、moveDisplaced或removeDisplaced过渡是否定义,moveDisplace没有定义过渡将被应用。另外,如果我们不需要为add、move、remove操作指定不同的过渡,考虑使用displaced属性替代。

 

populate :Transition

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

它在下面的时候应用到所有的模型模特实例:

1、视图第一次创建。

2、改变视图的模特模型。注意这是改成另一个模特模型的意思。

3、视图模特模型被复位。模特模型需要是QAbstractItemModel子类。

下面是指定这个过渡的例子:

GridView {

    ...

    populate: Transition {

        NumberAnimation { properties:"x,y"; duration: 1000 }

    }

}

当视图被初始化时,视图将创建所有需要显示的模特的实例。这些实例通过填充过渡出现在屏幕上,上面指定的是NumberAnimation动画,它持续1秒时间,实例平滑的抵达目标位置。

 

preferredHighlightBegin: real

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

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

译者注:当水平滚动时,preferredHighlightBegin为高亮距离视图左边的值,当前组件也跟随高亮运动。如果没有滚动发生,高亮根据当前组件移动。当垂直滚动时,preferredHighlightBegin为距离视图顶部的值。preferredHighlightEnd的值推荐根据栅格单元的尺寸设置。它是高亮尾部距离视图左边(水平滚动)或顶部(垂直滚动)的值。

highlightRangeMode的有效值为:

GridView.ApplyRange-视图企图维护highlight处于范围内。但是highlight能在视图的底部或鼠标交互时移动到范围的外面。

GridView.StrictlyEnforceRange-highlight只能在范围内移动,只有当键盘或鼠标行为促使当前组件改变时,highlight才能移动到范围的外面。

GridView.NoHighlightRange-没有highlight范围,这是默认值。

 

preferredHighlightEnd: real

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

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

译者注:当水平滚动时,preferredHighlightBegin为高亮距离视图左边的值,当前组件也跟随高亮运动。如果没有滚动发生,高亮根据当前组件移动。当垂直滚动时,preferredHighlightBegin为距离视图顶部的值。preferredHighlightEnd的值推荐根据栅格单元的尺寸设置。它是高亮尾部距离视图左边(水平滚动)或顶部(垂直滚动)的值。

highlightRangeMode的有效值为:

GridView.ApplyRange-视图企图维护highlight处于范围内。但是highlight能在视图的底部或鼠标交互时移动到范围的外面。

GridView.StrictlyEnforceRange-highlight只能在范围内移动,只有当键盘或鼠标行为促使当前组件改变时,highlight才能移动到范围的外面。

GridView.NoHighlightRange-没有highlight范围,这是默认值。

 

remove :Transition

这个过渡用在组件从视图中移除。下面的例子展示了如何指定移除过渡:

GridView {

    ...

    remove: Transition {

        ParallelAnimation {

            NumberAnimation { property:"opacity"; to: 0; duration: 1000 }

            NumberAnimation { properties:"x,y"; to: 100; duration: 1000 }

        }

    }

}

每当组件从视图中移除,这个组件将触发过渡动画,动画持续一秒,移动到(100,100)位置,并渐渐变得透明。过渡仅仅用于被移除的组件。因为移除而失去位置的组件,不应用这个过渡。动画那些组件,使用displaced或removeDisplaced属性。

注意过渡应用的时间,已经从模特模型中删除的组件实例和为了移除索引引用的模特数据不应用这个过渡。附加的,如果delayRemove关联属性被设置到delegate组件,移除过渡将不会被应用,直到delayRemove再次为假。

 

removeDisplaced: Transition

这是为视图中因为移除而失去位置的组件指定的过渡。下面的例子展示了这个属性的指定:

GridView {

    ...

    removeDisplaced: Transition {

        NumberAnimation { properties:"x,y"; duration: 1000 }

    }

}

每当视图中的组件实例被移除,移除组件下的所有组件实例失去位置,它们将在视图中向上(或边上,如果是水平方向)移动。位移发生时,组件使用持续1秒的NumberAnimation动画移动到指定的新位置。这个过渡不应用到视图中实际被移除的组件上,动画移除组件实例,使用remove属性。

如果组件因为多种操作同时发生而失去位置。组件将认为addDisplaced、moveDisplaced或removeDisplaced未定义。另外,如果我们不需要为add、move、remove操作指定不同的过渡,考虑使用displaced属性替代。

 

snapMode :enumeration

视图将如何跟随拖或挥滚动。它的值是下面这些:

GridView.NoSnap(default) - 视图停止在可见区域的任何位置。

GridView.SnapToRow- 视图停止后,视图的开始为行(当flow为GridView.FlowTopToBottom时,是列)对齐的位置。

GridView.SnapOneRow- 视图不会落在超过一行(当flow为GridView.FlowTopToBottom时,是列)的位置。即使鼠标按钮释放时,从一页的第一个可见行离开,视图也回到一页的第一个可见行。这个模式最常用于一次移动一页。

 

verticalLayoutDirection: enumeration

栅格的垂直布局方向。可能的值如下:

GridView.TopToBottom(default) -组件从视图的顶部往视图的底部布局。

GridView.BottomToTop-组件从视图的底部往视图的顶部布局。

 

AttachedProperty Documentation

.delayRemove: bool

这个关联属性保存delegate实例是否可以被摧毁。它关联到delegate的每一个实例上。默认为假。我们有时需要推迟组件实例的摧毁以确保动画完成。下面的例子展示了如何确定在组件实例被移除前动画完成。

Component {

    id: delegate

    Item {

        GridView.onRemove: SequentialAnimation{

            PropertyAction { target: wrapper;property: "GridView.delayRemove"; value: true }

            NumberAnimation { target: wrapper;property: "scale"; to: 0; duration: 250; easing.type:Easing.InOutQuad }

            PropertyAction { target: wrapper;property: "GridView.delayRemove"; value: false }

        }

    }

}

如果移除过渡被指定,直到delayRemove被设置为假之前,它都不会被应用。

 

.isCurrentItem: bool

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

 

.view :GridView

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

GridView {

    width: 300; height: 200

    cellWidth: 80; cellHeight: 80

 

    Component {

        id: contactsDelegate

        Rectangle {

            id: wrapper

            width: 80

            height: 80

            color: GridView.isCurrentItem ?"black" : "red"

            Text {

                id: contactInfo

                text: name + ": " +number

                color:wrapper.GridView.isCurrentItem ? "red" : "black"

            }

        }

    }

 

    model: ContactModel {}

    delegate: contactsDelegate

    focus: true

}

 

AttachedSignal Documentation

add()

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

 

remove()

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

 

MethodDocumentation

forceLayout()

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

 

intindexAt(int x, int y)

包含坐标(x,y)的可见的组件的索引。如果没有组件在该坐标上,或该坐标的组件不可见,返回-1。如果组件在可见区域之外滚动入视图时,无论组件是否在该坐标存在,也返回-1。

注意,这个方法仅仅在组件完成之后,才能被调用。

 

ItemitemAt(int x, int 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()

视图开始或结束的位置,包含了页眉或页脚。不推荐使用contentX和contentY去定位特定索引的视图,这是不可靠的。因为从列表的开始移除组件不会促使其他所有的组件响应,并且视图实际开始可能因为delegates的尺寸变的不同。

注意,这个方法仅仅在组件完成后能被调用。在启动时定位视图,应使用Component.onCompleted调用这个方法。例如启动是定位视图末端:

Component.onCompleted:positionViewAtEnd()。

 

positionViewAtIndex(intindex, 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页。这就是将视图移动的方法。
0 0
原创粉丝点击