PathView QML Type
モデルから提供されたアイテムをパス上に並べます。詳細...
Import Statement: | import QtQuick |
Inherits: |
付属プロパティ
- cacheItemCount : int
- count : int
- currentIndex : int
- currentItem : Item
- delegate : Component
- dragMargin : real
- dragging : bool
- flickDeceleration : real
- flicking : bool
- highlight : Component
- highlightItem : Item
- highlightMoveDuration : int
- highlightRangeMode : enumeration
- interactive : bool
- maximumFlickVelocity : real
- model : model
- movementDirection : enumeration
- moving : bool
- offset : real
- path : Path
- pathItemCount : int
- preferredHighlightBegin : real
- preferredHighlightEnd : real
- snapMode : enumeration
付属プロパティ
- isCurrentItem : bool
- onPath : bool
- view : PathView
シグナル
メソッド
- decrementCurrentIndex()
- incrementCurrentIndex()
- int indexAt(real x, real y)
- Item itemAt(real x, real y)
- Item itemAtIndex(int index)
- positionViewAtIndex(int index, PositionMode mode)
詳細説明
PathViewは、ListModel やXmlListModel のような組み込みの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 は自動的にキーボードナビゲーションを扱いません。これは、ナビゲーションのために使用するキーがパスの形状に依存するからです。ナビゲーシ ョ ンは、focus
をtrue
に設定 し 、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 Data Models,ListView,GridView,Qt Quick Examples - Viewsも参照してください 。
プロパティの説明
highlightRangeMode : enumeration |
preferredHighlightBegin : real |
preferredHighlightEnd : real |
これらのプロパティは、ビュー内のハイライト(現在のアイテム)の優先範囲を設定します。優先値は0
から1
の範囲でなければなりません。
highlightRangeMode
の有効な値は次のとおりです:
定数 | 説明 |
---|---|
PathView.NoHighlightRange | 範囲が適用されない:ハイライトはビュー内で自由に移動します。 |
PathView.ApplyRange | ビューはハイライトを範囲内に維持しようとしますが、パスの端やマウス操作によってハイライトが範囲外に移動することがあります。 |
PathView.StrictlyEnforceRange | ハイライトが範囲外に移動することはありません。これは、キーボードやマウス操作によってハイライトが範囲外に移動する場合、現在のアイテムが変更されることを意味します。 |
デフォルト値はPathView.StrictlyEnforceRangeです。
ハイライト範囲を定義することは、ビューが移動したときに現在のアイテムがどこに終わるかに影響を与える正しい方法です。例えば、現在選択されているアイテムがパスの中央に来るようにしたい場合、ハイライト範囲を0.5,0.5に設定し、highlightRangeMode PathView.StrictlyEnforceRangeに設定します。そうすると、パスがスクロールするとき、現在選択されているアイテムはその位置のアイテムになります。これは、現在選択されているアイテムが変更されるときにも適用されます - それは優先ハイライト範囲内にスクロールされます。さらに、現在のアイテムのインデックスの動作は、ハイライトの有無にかかわらず発生します。
注意: 有効な範囲には、preferredHighlightEnd
がpreferredHighlightBegin
以上であることが必要です。
cacheItemCount : int |
このプロパティは、パスからキャッシュするアイテムの最大数を保持します。
例えば、20個のアイテムを含むモデルを持つPathView 、pathItemCount が 10、cacheItemCount が 4 の場合、最大14個のアイテムが作成され、10個がパス上に表示され、4個が不可視でキャッシュされます。
キャッシュされたデリゲートは非同期に作成されるため、複数のフレームにまたがって作成することができ、フレームをスキップする可能性を減らすことができます。
注意: このプロパティを設定することは、効率的なデリゲートを作成する代わりになるものではありません。メモリ使用量が増える代わりに、スクロール動作の滑らかさが向上します。デリゲート内のオブジェクトとバインディングが少ないほど、ビューのスクロールは速くなります。cacheItemCount を設定することは、デリゲートの読み込みが遅いことに起因する問題を先送りするだけであり、このシナリオの解決策ではないことを認識することが重要です。
pathItemCountも参照してください 。
count : int |
このプロパティは、モデル内のアイテムの数を保持します。
currentIndex : int |
このプロパティは、現在のアイテムのインデックスを保持します。
currentItem : Item |
このプロパティは、ビュー内の現在の項目を保持します。
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 |
このプロパティは、ユーザがビューをドラッグすることによってビューが現在移動しているかどうかを保持します。
flickDeceleration : real |
このプロパティは、フリックが減速する速度を保持します。
デフォルトは 100 です。
flicking : bool |
このプロパティは、ユーザがビューをフリックすることによってビューが現在移動しているかどうかを保持します。
highlight : Component |
このプロパティは、ハイライトとして使用するコンポーネントを保持します。
ハイライトコンポーネントのインスタンスは、ビューごとに作成されます。生成されたコンポーネントのインスタンスのジオメトリは、現在のアイテムに合わせてビューによって管理されます。
以下の例は、簡単なハイライトの作り方を示しています。PathView.onPath attached プロパティを使用して、パスからフリックするとハイライトが非表示になるようにしています。
Component { Rectangle { visible: PathView.onPath // ... } }
highlightItem とhighlightRangeModeも参照して ください。
highlightItem : Item |
highlightMoveDuration : int |
このプロパティは、ハイライトデリゲートの移動アニメーション時間を保持します。
highlightRangeMode が StrictlyEnforceRange の場合、このプロパティはアイテムがパスに沿って移動する速度を決定します。
持続時間のデフォルト値は300msです。
interactive : bool |
maximumFlickVelocity : real |
このプロパティは、ユーザがビューをフリックできるおおよその最大速度をピクセル/秒で保持します。
デフォルト値はプラットフォーム依存です。
model : model |
このプロパティは、ビューのデータを提供するモデルを保持します。
モデルは、ビューの項目を作成するために使用されるデータのセットを提供します。大きなデータセットや動的なデータセットの場合、モデルは通常C++のモデルオブジェクトによって提供されます。また、ListModel 型を用いて、QMLで直接モデルを作成することもできます。
注意: モデルを変更すると、オフセットとcurrentIndex が0にリセットされます。
データモデル」も参照してください 。
movementDirection : enumeration |
このプロパティは、現在のインデックスを設定する際のアイテムの移動方向を決定します。指定できる値は以下の通りです:
定数 | 説明 |
---|---|
PathView.Shortest | (デフォルト) アイテムは、Negative またはPositive のいずれか、最も移動の少ない方向に移動します。 |
PathView.Negative | アイテムは目的地に向かって後方に移動する。 |
PathView.Positive | アイテムは目的地に向かって前方に移動する。 |
たとえば、モデル内に 5 つのアイテムがあり、currentIndex が0
であるとします。currentIndex が2
に設定されている場合、 の移動方向に移動します、
- に設定された場合、
Positive
の移動方向は以下の順番になる:0, 1, 2 Negative
の移動方向は以下の順番になります:0, 5, 4, 3, 2Shortest
の移動方向は、Positive
と同じ順番になります。
注: このプロパティは、incrementCurrentIndex() とdecrementCurrentIndex() の移動には影響しません。
moving : bool |
このプロパティは、ユーザがビューをドラッグまたはフリックすることによって、ビューが現在移動しているかどうかを保持します。
offset : real |
オフセットは、アイテムが初期位置からパスに沿ってどのくらい離れているかを指定します。これは、0
からモデル内のアイテムの数までの実数である。
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 |
この 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 |
このアタッチされたプロパティは、アイテムが現在パス上にあるかどうかを保持する。
pathItemCount が設定されている場合、いくつかのアイテムがインスタンス化されていても、現在パス上にあるとはみなされない可能性がある。通常、これらのアイテムは不可視に設定されるなどする:
Component { Rectangle { visible: PathView.onPath // ... } }
これは、デリゲートの各インスタンスにアタッチされます。
PathView.view : PathView |
このアタッチされたプロパティは、このデリゲートのインスタンスを管理するビューを保持します。
デリゲートの各インスタンスにアタッチされます。
シグナルの説明
dragEnded() |
このシグナルは、ユーザがビューのドラッグを止めた時に発行されます。
タッチ/マウスボタンが離された時点でドラッグの速度が十分であれば、フリックが開始されます。
注意: 対応するハンドラはonDragEnded
です。
dragStarted() |
このシグナルは、ユーザーインタラクションによってビューがドラッグされ始めると発行されます。
注: 対応するハンドラはonDragStarted
です。
flickEnded() |
このシグナルは、フリックによってビューの移動が停止したときに発行されます。
注: 対応するハンドラはonFlickEnded
です。
flickStarted() |
このシグナルは、ビューがフリックされたときに発行されます。フリックは、マウスまたはタッチが離された時点から開始されます。
注: 対応するハンドラはonFlickStarted
です。
movementEnded() |
このシグナルは、ユーザーインタラクションによってビューの移動が停止したときに発行されます。フリックが生成された場合、フリックが停止するとこのシグナルが発行されます。フリックが生成されなかった場合、このシグナルはユーザーがドラッグを止めた時、つまりマウスやタッチを離した時に発行されます。
注: 対応するハンドラはonMovementEnded
です。
movementStarted() |
このシグナルは、ユーザーインタラクションによってビューが動き始めたときに発行されます。
注意: 対応するハンドラはonMovementStarted
です。
メソッドの説明
decrementCurrentIndex() |
現在のインデックスをデクリメントします。
注意: メソッドはコンポーネントが完了した後にのみ呼び出されるべきです。
incrementCurrentIndex() |
現在のインデックスをインクリメントします。
注意: メソッドは、Component が完了した後にのみ呼び出す必要があります。
x,y の点を含むアイテムのインデックスをコンテンツ座標で返す。指定された点に項目がない場合は、-1 が返される。
注意:メソッドは、Componentが完了した後にのみ呼び出されるべきである。
コンテンツ座標で点x,y を含むアイテムを返す。指定された点に項目がない場合は null が返される。
注意:メソッドは、Component が完了した後にのみ呼び出す必要があります。
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)
本ドキュメントに含まれる文書の著作権は、それぞれの所有者に帰属します。 ここで提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。