PathView QML Type

モデルが提供するアイテムをパス上に並べます。詳細...

Import Statement: import QtQuick
Inherits:

Item

プロパティ

付属物件

信号

方法

詳細説明

PathViewは、ListModelXmlListModel のような組み込みのQML型、あるいはQAbstractListModel を継承したC++で定義されたカスタムモデルクラスから作成されたモデルのデータを表示します。

ビューは、表示されるデータを定義するmodel と、データの表示方法を定義するdelegate を持ちます。delegate は、path 上の各項目ごとにインスタンス化されます。項目をフリックして、パスに沿って移動させることができます。

た と えば、 フ ァ イ ルContactModel.qml に以下の よ う な単純な リ ス ト モデルが定義 さ れてい る と し ます:

import QtQuick

ListModel {
    ListElement {
        name: "Bill Jones"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "Jane Doe"
        icon: "pics/qtlogo.png"
    }
    ListElement {
        name: "John Smith"
        icon: "pics/qtlogo.png"
    }
}

このデータはこのようにPathViewとして表現することができます:

import QtQuick

Rectangle {
    width: 240; height: 200

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

    PathView {
        anchors.fill: parent
        model: ContactModel {}
        delegate: delegate
        path: Path {
            startX: 120; startY: 100
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
    }
}

(上の例では、PathAttribute を使用して、アイテムのスケーリングと回転に伴う不透明度の変更を行っていることに注意してください。こ の追加 コ ー ド はPathAttribute の文書で見る こ と がで き ます)。

PathView は自動的にキーボードナビゲーションを扱いません。これは、ナビゲーションのために使用するキーがパスの形状に依存するからです。ナビゲーシ ョ ンは、focustrue に設定 し 、decrementCurrentIndex () やincrementCurrentIndex () を呼び出す こ と に よ っ て、 簡単 に追加す る こ と がで き ます:

PathView {
    // ...
    focus: true
    Keys.onLeftPressed: decrementCurrentIndex()
    Keys.onRightPressed: incrementCurrentIndex()
}

パスビュー自体がフォーカススコープです(詳しくは Qt Quick のキーボードフォーカスを参照してください)。

デリゲートは必要に応じてインスタンス化され、いつでも破棄することができます。デ リ ゲー ト に状態を格納す る べ き ではあ り ませ

PathViewは、デリゲートのルートアイテムに、例えばPathView.isCurrentItem のように、多くのプロパティをアタッチします。次の例では、ルートのデリゲート項目は、このアタッチされたプロパティにPathView.isCurrentItem として直接アクセスすることができますが、子のnameText オブジェクトは、このプロパティをwrapper.PathView.isCurrentItem として参照する必要があります。

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

ビューは自動的にクリップを有効にしないことに注意してください。ビューが他のアイテムやスクリーンによってクリップされていない場合、ビューの外にあるアイテムをきれいにクリップするには、clip: trueを設定する必要があります。

Path,QML データモデル,ListView,GridView,Qt Quick 例 - ビューも参照して ください。

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

highlightRangeMode : enumeration

preferredHighlightBegin : real

preferredHighlightEnd : real

これらのプロパティは、ビュー内のハイライト(現在のアイテム)の優先範囲を設定します。優先値は0 から1 の範囲でなければなりません。

highlightRangeMode

定数説明
PathView.NoHighlightRange範囲が適用されない:ハイライトはビュー内で自由に動きます。
PathView.ApplyRangeビューはハイライトを範囲内に維持しようとしますが、パスの端やマウス操作によってハイライトが範囲外に移動することがあります。
PathView.StrictlyEnforceRangeハイライトが範囲外に移動することはありません。これは、キーボードやマウス操作によってハイライトが範囲外に移動する場合、現在のアイテムが変更されることを意味します。

デフォルト値はPathView.StrictlyEnforceRangeです。

ハイライト範囲を定義することは、ビューが移動したときに現在のアイテムがどこに終わるかに影響を与える正しい方法です。例えば、現在選択されているアイテムがパスの中央に来るようにしたい場合、ハイライト範囲を0.5,0.5に設定し、highlightRangeMode PathView.StrictlyEnforceRangeに設定します。そうすると、パスがスクロールするとき、現在選択されているアイテムはその位置のアイテムになります。これは、現在選択されているアイテムが変更されるときにも適用されます - それは優先ハイライト範囲内にスクロールされます。さらに、現在のアイテムのインデックスの動作は、ハイライトの有無にかかわらず発生します。

注意: 有効な範囲には、preferredHighlightEndpreferredHighlightBegin 以上であることが必要です。


cacheItemCount : int

このプロパティは、パスからキャッシュするアイテムの最大数を保持します。

例えば、20 個のアイテムを含むモデルを持つPathView で、pathItemCount が 10、cacheItemCount が 4 の場合、最大 14 個のアイテムが作成され、パス上に 10 個の可視アイテムと 4 個の不可視アイテムがキャッシュされます。

キャッシュされたデリゲートは非同期に作成されるため、複数のフレームにまたがって作成することができ、フレームをスキップする可能性を減らすことができます。

注意: このプロパティを設定することは、効率的なデリゲートの作成に取って代わるものではありません。メモリ使用量が増える代わりに、スクロール動作の滑らかさが向上します。デリゲート内のオブジェクトとバインディングが少ないほど、ビューのスクロールは速くなります。cacheItemCount を設定することは、デリゲートの読み込みが遅いことに起因する問題を先送りするだけであり、このシナリオの解決策ではないことを認識することが重要です。

pathItemCountも参照してください


count : int [read-only]

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


currentIndex : int

このプロパティは、現在のアイテムのインデックスを保持します。


currentItem : Item [read-only]

このプロパティは、ビュー内の現在の項目を保持します。


delegate : Component

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

デリゲート内のオブジェクトとバインディングの数は、pathItemCount が指定された場合のビューのフリックパフォーマンスに直接影響します。可能な限り、デリゲートの通常の表示に必要のない機能は、必要なときに追加のコンポーネントをロードできるLoader に配置してください。

PathView は、デリゲート内のルートアイテムのサイズに基づいてアイテムをレイアウトすることに注意してください。

デリゲートの例を示します:

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

dragMargin : real

このプロパティは、マウスドラッグを開始するパスからの最大距離を保持します。

デフォルトでは、パスはアイテムをクリックすることによってのみドラッグすることができます。dragMargin が 0 より大きい場合、ドラッグはパスの dragMargin ピクセル以内でクリックすることで開始できます。


dragging : bool [read-only]

このプロパティは、ユーザがビューをドラッグすることによってビューが現在移動しているかどうかを保持します。


flickDeceleration : real

このプロパティは、フリックが減速する速度を保持します。

デフォルトは 100 です。


flicking : bool [read-only]

このプロパティは、ユーザがビューをフリックすることによってビューが現在移動しているかどうかを保持します。


highlight : Component

このプロパティは、ハイライトとして使用するコンポーネントを保持します。

ハイライトコンポーネントのインスタンスは、ビューごとに作成されます。生成されたコンポーネントのインスタンスのジオメトリは、現在のアイテムに合わせてビューによって管理されます。

以下の例は、簡単なハイライトの作り方を示しています。PathView.onPath attached プロパティを使用して、パスからフリックするとハイライトが非表示になるようにしています。

Component {
    Rectangle {
        visible: PathView.onPath
        // ...
    }
}

highlightItemhighlightRangeModeも参照して ください。


highlightItem : Item [read-only]

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

highlightも参照して ください。


highlightMoveDuration : int

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

highlightRangeMode が StrictlyEnforceRange の場合、このプロパティはアイテムがパスに沿って移動する速度を決定します。

持続時間のデフォルト値は300msです。


interactive : bool

インタラクティブでないPathView をユーザーがドラッグまたはフリックすることはできません。

このプロパティは、一時的にフリックを無効にするのに便利です。これにより、PathView'の子との特別なインタラクションが可能になります。


maximumFlickVelocity : real

このプロパティは、ユーザーがビューをフリックできるおおよその最大速度をピクセル/秒で保持します。

デフォルト値はプラットフォーム依存です。


model : model

このプロパティは、ビューのデータを提供するモデルを保持します。

モデルは、ビューのアイテムを作成するために使用されるデータのセットを提供します。大規模または動的なデータセットの場合、モデルは通常C++モデルオブジェクトによって提供されます。また、ListModel 型を用いて、QMLで直接モデルを作成することもできます。

注意: モデルを変更すると、オフセットとcurrentIndex が0にリセットされます。

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


movementDirection : enumeration

このプロパティは、現在のインデックスを設定する際のアイテムの移動方向を決定します。指定できる値は以下の通りです:

定数説明
PathView.Shortest(デフォルト) アイテムは、Negative またはPositive のいずれか、最も移動の少ない方向に移動します。
PathView.Negativeアイテムは目的地に向かって後方に移動する。
PathView.Positiveアイテムは目的地に向かって前方に移動する。

たとえば、モデル内に 5 つのアイテムがあり、currentIndex0 であるとします。currentIndex2 に設定されている場合、 の移動方向に移動します、

  • に設定された場合、Positive の移動方向は以下の順番になる:0, 1, 2
  • Negative の移動方向は以下の順番になります:0, 5, 4, 3, 2
  • Shortest の移動方向は、Positive と同じ順番になります。

注: このプロパティは、incrementCurrentIndex() とdecrementCurrentIndex() の移動には影響しません。


moving : bool [read-only]

このプロパティは、ユーザがビューをドラッグまたはフリックすることによって、ビューが現在移動しているかどうかを保持します。


offset : real

オフセットは、アイテムが初期位置からパスに沿ってどのくらい離れているかを指定します。これは、0 からモデル内のアイテムの数までの実数である。


path : Path

このプロパティは、アイテムのレイアウトに使用されるパスを保持します。詳細については、Path のドキュメントを参照してください。


pathItemCount : int

このプロパティは、パス上に常に表示されるアイテムの数を保持します。

pathItemCount を undefined に設定すると、パス上のすべてのアイテムが表示されます。


snapMode : enumeration

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

定数説明
PathView.NoSnap(デフォルト) アイテムはパスの任意の位置で停止します。
PathView.SnapToItemアイテムは、preferredHighlightBegin に整列したアイテムで落ち着きます。
PathView.SnapOneItemアイテムがpreferredHighlightBegin に最も近いアイテムから1つ以上離れない。このモードは、特に 1 ページずつ移動するのに便利です。

snapMode currentIndexビューの移動に合わせて を更新するには、 を に設定します(デフォルトは )。currentIndex highlightRangeMode PathView.StrictlyEnforceRange PathView

highlightRangeModeも参照してください


Attached プロパティの説明

PathView.isCurrentItem : bool [read-only]

この Attached プロパティは、このデリゲートが現在のアイテムの場合は true、そうでない場合は false になります。

このプロパティは、デリゲートの各インスタンスにアタッチされます。

このプロパティを使用して、現在のアイテムの外観を調整することができます。

    Component {
        id: delegate
        Column {
            id: wrapper

            required property url icon
            required property string name

            opacity: PathView.isCurrentItem ? 1 : 0.5

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }
            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
            }
        }
    }

PathView.onPath : bool [read-only]

このアタッチされたプロパティは、アイテムが現在パス上にあるかどうかを保持する。

pathItemCount が設定されている場合、いくつかのアイテムがインスタンス化されていても、現在パス上にあるとはみなされない可能性がある。通常、これらのアイテムは不可視に設定されるなどする:

Component {
    Rectangle {
        visible: PathView.onPath
        // ...
    }
}

これは、デリゲートの各インスタンスにアタッチされます。


PathView.view : PathView [read-only]

このアタッチされたプロパティは、このデリゲートのインスタンスを管理するビューを保持します。

デリゲートの各インスタンスにアタッチされます。


シグナルの説明

dragEnded()

このシグナルは、ユーザがビューのドラッグを止めた時に発行されます。

タッチ/マウスボタンが離された時点でドラッグの速度が十分であれば、フリックが開始されます。

注意: 対応するハンドラはonDragEnded です。


dragStarted()

このシグナルは、ユーザーインタラクションによってビューがドラッグされ始めると発行されます。

注: 対応するハンドラはonDragStarted です。


flickEnded()

このシグナルは、フリックによってビューの移動が停止したときに発行されます。

注: 対応するハンドラはonFlickEnded です。


flickStarted()

このシグナルは、ビューがフリックされたときに発行されます。フリックは、マウスまたはタッチが離された時点から開始されます。

注: 対応するハンドラはonFlickStarted です。


movementEnded()

このシグナルは、ユーザーインタラクションによってビューの移動が停止したときに発行されます。フリックが生成された場合、フリックが停止するとこのシグナルが発行されます。フリックが生成されなかった場合、このシグナルはユーザーがドラッグを止めた時、つまりマウスやタッチを離した時に発行されます。

注: 対応するハンドラはonMovementEnded です。


movementStarted()

このシグナルは、ユーザーインタラクションによってビューが動き始めたときに発行されます。

注意: 対応するハンドラはonMovementStarted です。


メソッドの説明

decrementCurrentIndex()

現在のインデックスをデクリメントします。

注意: メソッドはコンポーネントが完了した後にのみ呼び出されるべきです。


incrementCurrentIndex()

現在のインデックスをインクリメントします。

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


intindexAt(realx, realy)

x,y の点を含む項目のインデックスを内容座標で返す。指定されたポイントにアイテムがない場合は、-1 が返される。

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


Item itemAt(real x, real y)

コンテンツ座標で点x,y を含むアイテムを返す。指定された点に項目がない場合は null が返される。

注意:メソッドは、Component が完了した後にのみ呼び出す必要があります。


Item itemAtIndex(int index)

index のアイテムを返します。そのインデックスのアイテムがまだ作成されていない、または可視領域からパンされてキャッシュから削除されているなどの理由で存在しない場合は、null が返されます。

注意:このメソッドは、Componentが完了した後にのみ呼び出す必要があります。ビューがそのアイテムを解放した場合、制御が呼び出し元のスコープから外れるとすぐに null になる可能性があるため、返される値も保存しないでください。


positionViewAtIndex(int index, PositionMode mode)

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

定数説明
PathView.Beginningアイテムの位置をパスの先頭に配置する。
PathView.Centerパスの中央にアイテムを配置する。
PathView.Endアイテムをパスの終端に配置します。
PathView.Containアイテムがパス上に配置されていることを確認する。
PathView.SnapPositionアイテムをpreferredHighlightBegin に配置する。このモードは、highlightRangeMode が StrictlyEnforceRange であるか、snapMode によってスナップが有効になっている場合にのみ有効です。

注意:メソッドは、コンポーネントが完了した後にのみ呼び出す必要があります。起動時にビューを配置するには、このメソッドを Component.onCompleted で呼び出す必要があります。例えば、最後にビューを配置する場合:

Component.onCompleted: positionViewAtIndex(count - 1, PathView.End)

© 2025 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.