GridView QML Type

モデルが提供する項目のグリッドビューを指定するためのものです。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

• add : Transition
• addDisplaced : Transition
• cacheBuffer : int
• cellHeight : real
• cellWidth : real
• count : int
• currentIndex : int
• currentItem : Item
• delegate : Component
• delegateModelAccess : enumeration (since 6.10)
• displaced : Transition
• displayMarginBeginning : int (since QtQuick 2.3)
• displayMarginEnd : int (since QtQuick 2.3)
• effectiveLayoutDirection : enumeration
• flow : enumeration
• footer : Component
• footerItem : Item
• header : Component
• headerItem : Item
• highlight : Component
• highlightFollowsCurrentItem : bool
• highlightItem : Item
• highlightMoveDuration : int
• highlightRangeMode : enumeration
• keyNavigationEnabled : bool
• keyNavigationWraps : bool
• layoutDirection : enumeration
• model : model
• move : Transition
• moveDisplaced : Transition
• populate : Transition
• preferredHighlightBegin : real
• preferredHighlightEnd : real
• remove : Transition
• removeDisplaced : Transition
• reuseItems : bool
• snapMode : enumeration
• verticalLayoutDirection : enumeration

関連するプロパティ

• delayRemove : bool
• isCurrentItem : bool
• view : GridView

添付の信号

• add()
• pooled()
• remove()
• reused()

方法

• void forceLayout()
• int indexAt(real x, real y)
• Item itemAt(real x, real y)
• Item itemAtIndex(int index)
• void moveCurrentIndexDown()
• void moveCurrentIndexLeft()
• void moveCurrentIndexRight()
• void moveCurrentIndexUp()
• void positionViewAtBeginning()
• void positionViewAtEnd()
• void positionViewAtIndex(int index, PositionMode mode)

詳細な説明

GridViewは、ListModel やXmlListModel といった組み込みのQML型から作成されたモデル、あるいはQAbstractListModel を継承するC++で定義されたカスタムモデルクラスからのデータを表示します。

GridViewには、表示するデータを定義するmodel と、データの表示方法を定義するdelegate があります。GridView内のアイテムは、水平方向または垂直方向に配置されます。GridViewはFlickable を継承しているため、GridViewは本質的にフリック操作が可能です。

使用例

以下の例は、ContactModel.qml というファイルに定義された単純なリストモデルの定義を示しています：

import QtQuick

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"
    }
}

このモデルは、他のQMLファイルからContactModel として参照できます。このような再利用可能なコンポーネントの作成に関する詳細については、「QMLモジュール」を参照してください。

別のコンポーネントでは、このモデルデータをGridViewに表示できます。次の例では、モデルとしてContactModel コンポーネントを作成し、デリゲートとしてColumn （Image およびText の項目を含む）を作成しています。

import QtQuick

GridView {
    width: 300; height: 200

    model: ContactModel {}
    delegate: Column {
        Image { source: portrait; anchors.horizontalCenter: parent.horizontalCenter }
        Text { text: name; anchors.horizontalCenter: parent.horizontalCenter }
    }
}

このビューは、モデル内の各項目に対して新しいデリゲートを作成します。なお、デリゲートはモデルのname およびportrait のデータに直接アクセスできる点に注意してください。

改良されたグリッドビューを以下に示します。デリゲートは視覚的に改善され、独立した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 プロパティを使用して青いRectangle で強調表示され、focus はtrue に設定され、グリッドビューでのキーボードナビゲーションが可能になっています。グリッドビュー自体はフォーカススコープです（詳細については、 Qt Quick の「Keyboard Focus」を参照してください）。

デリゲートは必要に応じてインスタンス化され、いつでも破棄される可能性があります。デリゲートには状態を保存してはなりません。

GridViewは、デリゲートのルートアイテムに、GridView.isCurrentItem などのいくつかのプロパティをアタッチします。次の例では、ルートデリゲートアイテムはこのアタッチされたプロパティにGridView.isCurrentItem として直接アクセスできますが、子contactInfo オブジェクトはこのプロパティを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
}

GridView のレイアウト

GridView 内の項目のレイアウトは、以下のプロパティによって制御できます。

• flow - アイテムが左から右へ（一連の行として）流れるか、上から下へ（一連の列として）流れるかを制御します。この値は、GridView.FlowLeftToRight または GridView.FlowTopToBottom のいずれかです。
• layoutDirection - 水平方向のレイアウト方向を制御します。つまり、アイテムがビューの左側から右側へ配置されるか、その逆かを指定します。この値は、Qt.LeftToRight または Qt.RightToLeft のいずれかです。
• verticalLayoutDirection - 垂直方向のレイアウト方向を制御します。つまり、アイテムがビューの上部から下部に向かって配置されるか、その逆になるかを指定します。この値は、GridView.TopToBottom または GridView.BottomToTop のいずれかです。

デフォルトでは、GridViewは左から右へ流れ、アイテムは水平方向に左から右へ、垂直方向に上から下へと配置されます。

これらのプロパティを組み合わせることで、以下の表に示すように、さまざまなレイアウトを作成できます。1行目のGridViewはすべて、flow の値がGridView.FlowLeftToRightですが、水平および垂直の配置方向（それぞれlayoutDirection およびverticalLayoutDirection で指定）の組み合わせが異なります。 同様に、下の2行目のGridViewはすべて、flow の値がGridView.FlowTopToBottomに設定されていますが、水平および垂直のレイアウト方向の異なる組み合わせを使用して、アイテムをさまざまな方法で配置しています。

関連項目： QML データモデル、ListView 、PathView 、およびQt Quick 例 - ビュー。

プロパティのドキュメント

add : Transition

このプロパティは、ビューに追加されるアイテムに適用されるトランジションを指定します。

たとえば、次のようなビューでは、そのようなトランジションが指定されています。

GridView {
    ...
    add: Transition {
        NumberAnimation { properties: "x,y"; from: 100; duration: 1000 }
    }
}

上記のビューにアイテムが追加されるたびに、そのアイテムは (100,100) の位置から、ビュー内の最終的な x,y 位置まで、1 秒かけてアニメーション表示されます。 このトランジションは、ビューに追加された新しいアイテムにのみ適用され、新しいアイテムの追加によって押し出された下位のアイテムには適用されません。押し出されたアイテムにアニメーションを適用するには、displaced またはaddDisplaced プロパティを設定してください。

ビュー遷移の使用方法に関する詳細や例については、『ViewTransition 』のドキュメントを参照してください。

addDisplaced 、populate 、およびViewTransitionも参照してください 。

addDisplaced : Transition

このプロパティは、ビューへの他の項目の追加によって位置がずれてしまったビュー内の項目に適用されるトランジションを保持します。

たとえば、次のようなビューでは、そのような遷移が指定されています：

GridView {
    ...
    addDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

上記のビューにアイテムが追加されるたびに、新しいアイテムの下にあるすべてのアイテムが押し出され、ビュー内で下方向（横向きの場合は横方向）に移動します。 この位置ずれが発生すると、指定どおり、ビュー内の新しい x、y 位置への項目の移動は、1 秒間にわたる「NumberAnimation 」によってアニメーション化されます。このトランジションは、ビューに追加された新しい項目には適用されません。追加された項目をアニメーション化するには、add プロパティを設定してください。

アイテムが複数の種類の操作によって同時に変位された場合、addDisplaced、moveDisplaced 、またはremoveDisplaced のいずれのトランジションが適用されるかは定義されていません。また、アイテムがadd、move、またはremove操作によって変位されたかどうかに応じて異なるトランジションを指定する必要がない場合は、代わりにdisplaced プロパティを設定することを検討してください。

ビュー遷移の使用方法に関する詳細や例については、ViewTransition のドキュメントを参照してください。

関連項目： displaced 、add 、populate 、およびViewTransition 。

cacheBuffer : int

このプロパティは、デリゲートがビューの表示領域の外側でも保持されるかどうかを決定します。

この値が 0 より大きい場合、ビューは、指定されたバッファ内に収まる限り、任意の数のデリゲートをインスタンス化したまま保持することができます。 たとえば、垂直ビューでデリゲートの高さが 20 ピクセル、列数が 3 列、cacheBuffer が 40 に設定されている場合、表示領域の上下に最大 6 個ずつ、合計 12 個のデリゲートが作成・保持される可能性があります。 バッファリングされたデリゲートは非同期で作成されるため、複数のフレームにわたって作成が行われ、フレームスキップの可能性が低減されます。描画パフォーマンスを向上させるため、表示領域外のデリゲートは描画されません。

このプロパティのデフォルト値はプラットフォームに依存しますが、通常は 0 より大きい値になります。負の値は無視されます。

cacheBuffer はピクセルバッファではなく、インスタンス化された追加のデリゲートのみを保持するものであることに注意してください。

cacheBufferは、displayMarginBeginning やdisplayMarginEnd で指定された表示マージンの外側で動作します。

これらのプロパティは、グリッド内の各セルの幅と高さを保持します。

デフォルトのセルサイズは 100×100 です。

count : int [read-only]

このプロパティは、モデル内の項目の数を保持します。

currentIndex プロパティには現在の項目のインデックスが、currentItem には現在の項目が格納されています。currentIndex を -1 に設定すると、ハイライトが解除され、currentItem が null に設定されます。

highlightFollowsCurrentItem がtrue の場合、これらのプロパティのいずれかを設定すると、GridView がスムーズにスクロールされ、現在の項目が表示されるようになります。

なお、現在の項目の位置は、ビュー内に表示されるまではおおよその位置に過ぎない場合があることに注意してください。

delegate : Component

デリゲートは、ビューによってインスタンス化される各項目を定義するテンプレートを提供します。インデックスは、index というアクセス可能なプロパティとして公開されます。また、データモデルのタイプに応じて、モデルのプロパティも利用可能です。

デリゲート内のオブジェクト数およびバインディング数は、ビューのフリッキング性能に直接影響します。可能な限り、デリゲートの通常の表示には必要のない機能は、必要に応じて追加のコンポーネントをロードできるLoader 内に配置してください。

GridView のアイテムサイズは、cellHeight およびcellWidth によって決定されます。デリゲート内のルートアイテムのサイズに基づいてアイテムのサイズが変更されることはありません。

デリゲートインスタンスのデフォルトのstacking order は1 です。

delegateModelAccess : enumeration [since 6.10]

このプロパティは、デリゲートがモデルにアクセスする方法を決定します。

デフォルトは `DelegateModel.Qt5ReadWrite` です。

このプロパティは Qt 6.10 で導入されました。

「 Qt Quick におけるモデルとビュー #モデルデータの変更」も参照してください 。

displaced : Transition

このプロパティは、ビューに影響を与えるいかなるモデル操作によっても位置が変更されたアイテムに適用される、汎用的な遷移を保持します。

これは、add、move、remove操作によって位置がずらされたアイテムに対して汎用的な遷移を指定する際の利便性を高めるものであり、個々のaddDisplaced 、moveDisplaced 、removeDisplaced プロパティを指定する必要がありません。例えば、以下は位置ずれ遷移を指定したビューの例です：

GridView {
    ...
    displaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

上記のビュー内でアイテムが追加、移動、または削除されると、その下にあるアイテムは位置がずれて、ビュー内で下方向（水平配置の場合は横方向）に移動します。この位置ずれが発生すると、指定どおり、アイテムがビュー内の新しい x、y 座標へ移動する過程が、1 秒間にわたって `NumberAnimation ` によってアニメーション化されます。

ビューがこの汎用的な「displaced」トランジションに加え、特定のaddDisplaced 、moveDisplaced 、またはremoveDisplaced トランジションを指定している場合、関連する操作が発生した際には、より具体的なトランジションが無効化されていない限り（enabled をfalseに設定していない限り）、汎用的な「displaced」トランジションの代わりに、より具体的なトランジションが使用されます。もし無効化されている場合は、代わりに汎用的な「displaced」トランジションが適用されます。

ビュー遷移の使用方法に関する詳細や例については、『ViewTransition 』のドキュメントを参照してください。

関連項目： addDisplaced 、moveDisplaced 、removeDisplaced 、およびViewTransition 。

このプロパティを設定すると、デリゲートをビューのジオメトリの外側に表示できるようになります。

この値が 0 以外の場合、ビューはビューの開始前または終了後に追加のデリゲートを作成します。ビューは、指定されたピクセルサイズに収まる限り、可能な限り多くのデリゲートを作成します。

たとえば、縦方向のビューで、デリゲートの高さが 20 ピクセル、列数が 3 列、displayMarginBeginning およびdisplayMarginEnd が両方とも 40 に設定されている場合、上部に 6 個、下部に 6 個のデリゲートが作成され、表示されます。

デフォルト値は 0 です。

このプロパティは、特定の UI 構成を可能にするためのものであり、パフォーマンスの最適化を目的としたものではありません。パフォーマンス上の理由から、ビューのジオメトリの外部にデリゲートを作成したい場合は、代わりにcacheBuffer プロパティを使用することをお勧めします。

これらのプロパティは、QtQuick 2.3 で導入されました。

effectiveLayoutDirection : enumeration [read-only]

このプロパティは、グリッドの実際のレイアウト方向を保持します。

ロケールレイアウト用に添付プロパティ `LayoutMirroring::enabled ` を使用する場合、グリッドの視覚的なレイアウト方向は反転します。ただし、プロパティ `layoutDirection ` の値は変更されません。

「 GridView::layoutDirection 」および「LayoutMirroring 」も参照してください 。

flow : enumeration

このプロパティは、グリッドのフローを保持します。

取り得る値：

footer : Component

このプロパティには、フッターとして使用するコンポーネントが格納されます。

各ビューに対して、フッターコンポーネントのインスタンスが作成されます。フッターは、ビューの最後、すべての項目の後に配置されます。フッターのデフォルトのstacking order は1 です。

「 header 」および「footerItem 」も参照してください 。

footerItem : Item [read-only]

ここには、footer コンポーネントから作成されたフッター項目が格納されます。

各ビューに対して、フッターコンポーネントのインスタンスが作成されます。フッターは、ビュー内のすべての項目の後に配置されます。フッターのデフォルトのstacking order は1 です。

「 footer 」および「headerItem 」も参照してください 。

header : Component

このプロパティには、ヘッダーとして使用するコンポーネントが格納されます。

各ビューに対して、ヘッダーコンポーネントのインスタンスが作成されます。ヘッダーは、ビューの先頭、どの項目よりも前に配置されます。ヘッダーのデフォルトのstacking order は1 です。

「 footer 」および「headerItem 」も参照してください 。

headerItem : Item [read-only]

ここには、header コンポーネントから作成されたヘッダー項目が格納されます。

各ビューに対して、ヘッダーコンポーネントのインスタンスが作成されます。ヘッダーは、ビューの先頭、他のアイテムよりも前に配置されます。ヘッダーのデフォルトのstacking order は1 です。

「 header 」および「footerItem 」も参照してください 。

highlight : Component

このプロパティには、ハイライトとして使用するコンポーネントが格納されます。

各ビューに対して、ハイライトコンポーネントのインスタンスが作成されます。highlightFollowsCurrentItem プロパティがfalseでない限り、生成されたコンポーネントインスタンスのジオメトリは、現在の項目に追従するようにビューによって管理されます。ハイライト項目のデフォルトのstacking order は0 です。

「 highlightItem 」および「highlightFollowsCurrentItem 」も参照してください 。

highlightFollowsCurrentItem : bool

このプロパティは、ハイライトがビューによって管理されるかどうかを設定します。

このプロパティが true（デフォルト値）の場合、ハイライトは現在の項目を追従するように滑らかに移動します。それ以外の場合、ハイライトはビューによって移動されず、移動処理はハイライト側で実装する必要があります。

以下は、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 [read-only]

highlight コンポーネントから作成されたハイライトアイテムを保持します。

highlightFollowsCurrentItem がfalseに設定されていない限り、highlightItemはビューによって管理されます。ハイライト項目のデフォルトのstacking order は0 です。

「 highlight 」および「highlightFollowsCurrentItem 」も参照してください 。

highlightMoveDuration : int

このプロパティは、ハイライトデリゲートの移動アニメーションの持続時間を保持します。

highlightFollowsCurrentItem このプロパティが有効になるには、trueに設定する必要があります。

このプロパティのデフォルト値は 150ms です。

「highlightFollowsCurrentItem」も参照してください 。

これらのプロパティは、ビュー内での（現在の項目に対する）ハイライトの推奨範囲を定義します。preferredHighlightBegin の値は、preferredHighlightEnd の値よりも小さくなければなりません。

これらのプロパティは、ビューがスクロールされた際の現在の項目の位置に影響を与えます。たとえば、スクロール時に現在選択されている項目をビューの中央に留めておきたい場合は、preferredHighlightBegin およびpreferredHighlightEnd の値を、中央の項目が位置する場所の上端および下端の座標に設定します。currentItem がプログラムによって変更された場合、現在の項目がビューの中央に来るようにビューが自動的にスクロールされます。さらに、ハイライトの有無にかかわらず、現在の項目インデックスに対するこの動作が行われます。

highlightRangeMode の有効な値は次のとおりです：

keyNavigationEnabled : bool

このプロパティは、グリッドのキーナビゲーションが有効かどうかを示します。

このプロパティの値が `true` の場合、ユーザーはキーボードを使用してビューを操作できます。これは、マウスやキーボードによる操作を選択的に有効または無効にする必要があるアプリケーションで役立ちます。

デフォルトでは、既存のアプリケーションとの動作互換性を確保するため、このプロパティの値は `interactive ` にバインドされています。明示的に設定された場合、このプロパティは `interactive` プロパティへのバインドを解除します。

「interactive」も参照してください 。

keyNavigationWraps : bool

このプロパティは、グリッドがキー操作によるナビゲーションで折り返しを行うかどうかを指定します

これが true の場合、現在の項目の選択位置がビューの一方の端を越えてしまうようなキーナビゲーション操作が行われた際、選択位置はビューの反対側の端へと折り返して移動します。

デフォルトでは、キーによるナビゲーションはループしません。

layoutDirection : enumeration

このプロパティは、グリッドのレイアウト方向を指定します。

取り得る値：

注：GridView::flow がGridView.FlowLeftToRightに設定されている場合、GridView::layoutDirectionがQt.RightToLeftに設定されている場合と混同しないでください。GridView.FlowLeftToRightのフロー値は、単にフローが水平であることを示すだけです。

GridView::effectiveLayoutDirection およびGridView::verticalLayoutDirectionも参照してください 。

model : model

このプロパティには、グリッドにデータを供給するモデルが格納されます。

このモデルは、ビュー内のアイテムを作成するために使用されるデータセットを提供します。モデルは、ListModel 、DelegateModel 、ObjectModel を使用して QML 内で直接作成することも、C++ モデルクラスによって提供されることもあります。C++ モデルクラスを使用する場合、そのクラスはQAbstractItemModel のサブクラスであるか、単純なリストでなければなりません。

「データモデル」も参照してください 。

move : Transition

このプロパティは、ビューのmodel で実行される移動操作によって移動されるビュー内の項目に適用される遷移を保持します。

たとえば、次のようなビューでは、そのような遷移が指定されています。

GridView {
    ...
    move: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

model が特定のインデックスセットを移動させる移動操作を実行するたびに、ビュー内の対応するアイテムは、1秒かけてビュー内の新しい位置へとアニメーションで移動します。 この遷移は、モデル内の移動操作の対象となっているアイテムにのみ適用され、移動操作によって位置がずれたそれらの下にあるアイテムには適用されません。位置がずれたアイテムにアニメーションを適用するには、displaced またはmoveDisplaced プロパティを設定してください。

ビュートランジションの使用方法に関する詳細や例については、『ViewTransition 』のドキュメントを参照してください。

「 moveDisplaced 」および「ViewTransition 」も参照してください 。

moveDisplaced : Transition

このプロパティは、ビューのmodel で移動操作によって位置が変更されたアイテムに適用される遷移を保持します。

たとえば、次のようなビューでは、そのような遷移が指定されています。

GridView {
    ...
    moveDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

model が特定のインデックス範囲を移動させる操作を実行するたびに、その移動操作の開始インデックスと終了インデックスの間に位置するアイテムがずらされ、ビュー内で上方向または下方向（水平方向の場合は横方向）に移動します。 この変位が発生すると、指定どおり、アイテムがビュー内の新しい x、y 位置へ移動する様子が、NumberAnimation によって 1 秒かけてアニメーション化されます。この遷移は、移動操作の実際の対象となるアイテムには適用されません。移動されたアイテムをアニメーション化するには、move プロパティを設定してください。

1つのアイテムが同時に複数の種類の操作によって移動される場合、addDisplaced 、moveDisplaced、またはremoveDisplaced のどのトランジションが適用されるかは定義されていません。また、アイテムがadd、move、removeのいずれの操作によって移動されるかによって異なるトランジションを指定する必要がない場合は、代わりにdisplaced プロパティを設定することを検討してください。

ビュートランジションの使用方法に関する詳細や例については、ViewTransition のドキュメントを参照してください。

「 displaced 」、「move 」、および「ViewTransition 」も参照してください 。

populate : Transition

このプロパティは、ビュー用に最初に作成されるアイテムに適用されるトランジションを保持します。

これは、以下の場合に作成されるすべてのアイテムに適用されます。

• ビューが最初に作成されたとき
• ビューのmodel が変更され、表示されるデリゲートが完全に置き換えられる場合
• ビューのmodel がreset であり、かつモデルがQAbstractItemModel のサブクラスである場合

たとえば、次のようなビューでは、このような遷移が指定されています：

GridView {
    ...
    populate: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

ビューが初期化されると、ビューはビューに必要なすべてのアイテムを作成し、1秒かけてそれらをビュー内の正しい位置にアニメーションで配置します。

しかし、その後ビューをスクロールしても、デリゲートは表示されるにつれてインスタンス化されるものの、「populate」遷移は実行されません。モデルが変更され、新しいデリゲートが表示されるようになった場合、実行されるのは「add 」遷移です。したがって、デリゲートのプロパティを初期化するために「populate 」遷移に依存すべきではありません。なぜなら、この遷移はすべてのデリゲートに適用されるわけではないからです。 アニメーションでプロパティのto 値を設定する場合、そのプロパティは初期状態でto 値を持つ必要があり、アニメーションの対象となる場合は、アニメーションによってfrom 値が設定されるようにする必要があります：

GridView {
    ...
    delegate: Rectangle {
        opacity: 1 // not necessary because it's the default; but don't set 0
        ...
    }
    populate: Transition {
        NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
    }
}

ビュートランジションの使用方法に関する詳細や例については、ViewTransition のドキュメントを参照してください。

「 add 」および「ViewTransition 」も参照してください 。

remove : Transition

このプロパティは、ビューから削除されるアイテムに適用される遷移を指定します。

たとえば、次のようなビューでは、そのような遷移が指定されています。

GridView {
    ...
    remove: Transition {
        ParallelAnimation {
            NumberAnimation { property: "opacity"; to: 0; duration: 1000 }
            NumberAnimation { properties: "x,y"; to: 100; duration: 1000 }
        }
    }
}

上記のビューからアイテムが削除されるたびに、そのアイテムは1秒かけて位置(100,100)へ移動するアニメーションが再生され、同時に不透明度も0に変更されます。 このトランジションは、ビューから削除されたアイテムにのみ適用され、その削除によって位置がずれた下位のアイテムには適用されません。位置がずれたアイテムにアニメーションを適用するには、displaced またはremoveDisplaced プロパティを設定してください。

なお、トランジションが適用される時点では、そのアイテムはすでにモデルから削除されているため、削除されたインデックスのモデルデータへの参照はすべて無効になります。

さらに、デリゲート アイテムに対して `delayRemove ` 付属プロパティが設定されている場合、delayRemove が再び `false` になるまで、削除トランジションは適用されません。

ビュー遷移の使用方法の詳細および例については、「ViewTransition 」のドキュメントを参照してください。

「 removeDisplaced 」および「ViewTransition 」も参照してください 。

removeDisplaced : Transition

このプロパティは、ビュー内の他のアイテムが削除されたことにより位置がずれたアイテムに適用されるトランジションを保持します。

たとえば、次のようなビューでは、そのような遷移が指定されています：

GridView {
    ...
    removeDisplaced: Transition {
        NumberAnimation { properties: "x,y"; duration: 1000 }
    }
}

上記のビューからアイテムが削除されるたびに、その下にあるすべてのアイテムが位置をずらされ、ビュー内で上方向（水平方向の場合は横方向）に移動します。 この位置ずれが発生すると、指定どおり、ビュー内の新しい x, y 位置への項目の移動は、NumberAnimation によって 1 秒かけてアニメーション化されます。この遷移は、実際にビューから削除された項目には適用されません。削除された項目をアニメーション化するには、remove プロパティを設定してください。

アイテムが複数の種類の操作によって同時に変位された場合、addDisplaced 、moveDisplaced 、またはremoveDisplacedのどのトランジションが適用されるかは定義されていません。また、アイテムが追加、移動、削除のいずれの操作によって変位されたかによって異なるトランジションを指定する必要がない場合は、代わりにdisplaced プロパティを設定することを検討してください。

ビュートランジションの使用方法に関する詳細や例については、ViewTransition のドキュメントを参照してください。

「 displaced 」、「remove 」、および「ViewTransition 」も参照してください 。

reuseItems : bool

このプロパティを使用すると、delegate からインスタンス化されたアイテムを再利用できます。false に設定すると、現在プールされているアイテムはすべて破棄されます。

このプロパティのデフォルト値は `false ` です。

「 Reusing items 」、「pooled()」、および「reused()」も参照してください 。

snapMode : enumeration

このプロパティは、ドラッグやフリックの後にビューのスクロールがどのように落ち着くかを決定します。設定可能な値は次のとおりです。

verticalLayoutDirection : enumeration

このプロパティは、グリッドの垂直方向のレイアウト方向を指定します。

指定可能な値：

関連項目： GridView::layoutDirection 。

関連するプロパティのドキュメント

GridView.delayRemove : bool [attached]

このアタッチメントプロパティは、デリゲートが破棄可能かどうかを示すものです。これはデリゲートの各インスタンスにアタッチされています。デフォルト値は false です。

アニメーションが完了するまで、項目の破棄を遅らせる必要がある場合があります。以下の例示のデリゲートは、項目がリストから削除される前に、アニメーションが確実に完了するようにします。

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 }
        }
    }
}

remove の遷移が指定されている場合、delayRemoveがfalse に返されるまで、その遷移は適用されません。

GridView.isCurrentItem : bool [read-only attached]

この添付プロパティは、このデリゲートが現在の項目である場合に true を返し、そうでない場合は false を返します。

このプロパティは、デリゲートの各インスタンスに紐付けられています。

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
}

GridView.view : GridView [read-only attached]

この添付プロパティには、このデリゲートインスタンスを管理するビューが格納されています。

これは、各デリゲートインスタンスに加え、ヘッダー、フッター、およびハイライトデリゲートにもアタッチされています。

アタッチされたシグナルのドキュメント

[attached] add()

この添付のシグナルは、アイテムがビューに追加された直後に発火します。

[attached] pooled()

このシグナルは、アイテムが再利用プールに追加された後に発火します。これを利用して、アイテム内で進行中のタイマーやアニメーションを一時停止したり、再利用できないリソースを解放したりすることができます。

このシグナルは、reuseItems プロパティがtrue の場合にのみ発火します。

関連項目： Reusing items 、reuseItems 、およびreused()。

[attached] remove()

このシグナルは、アイテムがビューから削除される直前に発火します。

削除遷移が指定されている場合、delayRemove がfalseである限り、このシグナルが処理された後にその遷移が適用されます。

[attached] reused()

このシグナルは、アイテムが再利用された後に発火します。この時点で、アイテムはプールから取り出されてコンテンツビュー内に配置され、index やrow などのモデルプロパティが更新されています。

モデルによって提供されていないその他のプロパティは、アイテムが再利用されても変更されません。デリゲート内に状態を保存することは避けるべきですが、やむを得ず保存する場合は、このシグナルを受信した際にその状態を手動でリセットしてください。

このシグナルは、アイテムが最初に作成されたときではなく、アイテムが再利用されたときに発火します。

このシグナルは、reuseItems プロパティがtrue の場合にのみ発火します。

Reusing items 、reuseItems 、およびpooled()も参照してください 。

メソッドのドキュメント

void forceLayout()

モデルの変更に対する反応は、通常、1フレームにつき1回のみバッチ処理されるようになっています。つまり、スクリプトブロック内では、基盤となるモデルが変更されているにもかかわらず、GridView がまだその変更を反映していない可能性があるということです。

このメソッドは、GridView に対し、モデルにおける未処理の変更に直ちに対応するよう強制します。

注：このメソッドは、Componentが処理を完了した後にのみ呼び出す必要があります。

int indexAt(real x, real y)

content item 座標系において、点x 、y を含む、表示されているアイテムのインデックスを返します。指定された点にアイテムが存在しない場合、またはアイテムが表示されていない場合は、-1が返されます。

アイテムが表示領域外にある場合、スクロールによってその位置が画面内に表示されるようになるかどうかに関わらず、-1が返されます。

GridView {
    id: view
    MouseArea {
        anchors.fill: parent
        onClicked: (mouse) => {
            let posInGridView = Qt.point(mouse.x, mouse.y)
            let posInContentItem = mapToItem(view.contentItem, posInGridView)
            let index = view.indexAt(posInContentItem.x, posInContentItem.y)
        }
    }
}

注：メソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。

itemAtも参照してください 。

Item itemAt(real x, real y)

content item 座標系において、点x 、y を含む表示中のアイテムを返します。指定された点にアイテムが存在しない場合、またはそのアイテムが表示されていない場合は、nullが返されます。

アイテムが表示領域外にある場合、スクロールによってその位置が視野内に入った際にアイテムが存在するかどうかに関わらず、nullが返されます。

注：メソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。

indexAtも参照してください 。

Item itemAtIndex(int index)

index に対応するアイテムを返します。そのインデックスに対応するアイテムが存在しない場合（例えば、まだ作成されていない場合や、画面外へスクロールされてキャッシュから削除された場合など）、nullが返されます。

注：このメソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。また、ビューがそのアイテムを解放した場合、呼び出しスコープから制御が外れるやいなや返り値が null になる可能性があるため、返り値を保存してはいけません。

void moveCurrentIndexDown()

currentIndex をビュー内で1つ下の項目に移動します。keyNavigationWraps がtrueで、かつ現在末尾にある場合、現在のインデックスはループバックします。count が0の場合、このメソッドは効果を持ちません。

注：メソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。

void moveCurrentIndexLeft()

currentIndex をビュー内で1項目分左に移動します。keyNavigationWraps がtrueで、かつ現在末尾にある場合、現在のインデックスはループバックします。count が0の場合、このメソッドは効果を持ちません。

注：メソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。

void moveCurrentIndexRight()

currentIndex をビュー内で1項目分右に移動します。keyNavigationWraps がtrueで、かつ現在末尾にある場合、現在のインデックスはループバックします。count が0の場合、このメソッドは効果を持ちません。

注：メソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。

void moveCurrentIndexUp()

currentIndex をビュー内で1つ上に移動します。keyNavigationWraps がtrueで、かつ現在末尾にある場合、現在のインデックスはループバックします。count が0の場合、このメソッドは効果を持ちません。

注: メソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。

ヘッダーやフッターの位置を考慮して、ビューを先頭または末尾に配置します。

contentX やcontentY を使用してビューを特定のインデックスに配置することは推奨されません。リストの先頭から項目を削除しても、他のすべての項目の位置が再配置されるわけではないこと、またデリゲートのサイズによってビューの実際の開始位置が変動する可能性があるため、この方法は信頼性が低いからです。

注：メソッドは、Componentが完了した後にのみ呼び出す必要があります。起動時にビューを配置するには、Component.onCompleted からこのメソッドを呼び出す必要があります。たとえば、起動時にビューを末尾に配置するには：

Component.onCompleted: positionViewAtEnd()

void positionViewAtIndex(int index, PositionMode mode)

index がmode で指定された位置に来るようにビューを配置します：

ビューをインデックスに配置することで、ビューの先頭または末尾に空白が表示されることになる場合、ビューは境界に配置されます。

contentX やcontentY を使用してビューを特定のインデックスに配置することは推奨されません。ビューの先頭から項目を削除しても、他のすべての項目の位置が再配置されるわけではないため、この方法は信頼性が低いからです。項目をビュー内に表示させる正しい方法は、positionViewAtIndex を使用することです。

注：このメソッドは、コンポーネントの処理が完了した後にのみ呼び出す必要があります。起動時にビューの位置を調整するには、Component.onCompleted からこのメソッドを呼び出す必要があります。たとえば、ビューを末尾に配置するには：

Component.onCompleted: positionViewAtIndex(count - 1, GridView.Beginning)