このページでは

C

PathView QML Type

モデル内のアイテムをパス上にレイアウトします。詳細...

Import Statement: import QtQuick
Since: Qt Quick Ultralite 2.12
Inherits:

Item

プロパティ

付属物件

方法

詳細説明

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

ビューは、表示されるデータを定義するmodel プロパティと、データの表示方法を定義するdelegate プロパティを持ちます。delegate は PathView の各項目に対してインスタンス化されます。

注: Qt のメインストリームとは異なり、Qt Quick Ultralite は、フリックやスワイプジェスチャを使用したパスに沿ったアイテムの移動をサポートしていません。PathView のcurrentIndex プロパティを変更するには、ボタンを使用します。

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

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

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

Rectangle {
    PathView {
        model: model1
        // Note, pathItemCount should be set to a value larger than 0
        pathItemCount: 3
        path: Path {
            startX: 120; startY: 100
            PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
            PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
        }
        delegate: Item {
            id: wrapper
            height: 100
            width: 100
            required property string icon
            required property string name
            required property int index
            readonly property bool isCurrent: PathView.isCurrentItem

            opacity: isCurrent ? 1 : 0.5
            // Note: to keep the current item on top of the others change the z value
            z: isCurrent ? 1 : 0

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }

            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
                anchors.bottom: parent.bottom
            }
        }
    }
}

PathViewは、ナビゲーションキーがパスの形状に依存するため、自動的にキーボードナビゲーションを処理しません。代わりに、decrementCurrentIndex またはincrementCurrentIndex のいずれかで現在のインデックスを変更することによって、PathView 内の項目をナビゲートするためにボタンを使用します。

PathView {
    // ...
    Button {
        text: "Previous"
        onClicked: pathView.decrementCurrentIndex()
    }
    Button {
        text: "Next"
        onClicked: pathView.incrementCurrentIndex()
    }
    // the Keys.* with the focus property is not supported in \QUL
    // focus: true
    // Keys.onLeftPressed: decrementCurrentIndex()
    // Keys.onRightPressed: incrementCurrentIndex()
}

Qt Quick Ultraliteはいつでもデリゲートをインスタンス化し、破棄します。

Qt Quick Ultraliteはデリゲートに固定サイズを静的に割り当てますが、pathItemCount プロパティを使用してサイズを定義できます。サイズは0より大きい値であるべきで、これはパス上にいつでも表示できるアイテムの最大数を表します。モデルのアイテム数がpathItemCount より少ない場合、PathView はそれに応じてデリゲート数を調整します。

PathView は、デリゲートのルートアイテムにPathView.isCurrentItem プロパティをアタッチします。次の例では、ルートのデリゲート項目はPathView.isCurrentItem として添付されたプロパティに直接アクセスできますが、子のnameText オブジェクトはプロパティにアクセスするために追加の修飾子が必要です。

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 + (wrapper.PathView.isCurrentItem ? " (current)" : "")
            font.pointSize: 16
        }
    }
}

重要な考慮事項

  • PathView.isCurrentItem Qt Quick Ultralite はまだ をサポートしていません。highlightItem
  • PathView は自動的にクリップを有効にしません。ビューが他のアイテムやスクリーンによってクリップされていない場合、ビューポートの外にあるアイテムをクリップするには、clip: trueを設定します。

Path,ListModel,ListView, Qt Quick Ultraliteのモデルとビュー、およびC++データモデルも参照してください

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

preferredHighlightBegin : real

preferredHighlightEnd : real

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

注: アニメーションとタッチ ジェスチャーはまだサポートされていないため、デフォルトのPathView.StrictlyEnforceRange が常に使用されます。つまり、currentItem が範囲の最初になります。

ハイライト範囲を定義して、ビューが移動したときに現在のアイテムが終了する場所を制御します。例えば、現在選択されているアイテムをパスの中央に配置したい場合、ハイライト範囲を0.5,0.5 に設定します。

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


count : int

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


currentIndex : int

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


delegate : Component

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

注: PathView は、ルートのサイズに基づいて項目をレイアウトします。

以下はデリゲートの例です:

        delegate: Item {
            id: wrapper
            height: 100
            width: 100
            required property string icon
            required property string name
            required property int index
            readonly property bool isCurrent: PathView.isCurrentItem

            opacity: isCurrent ? 1 : 0.5
            // Note: to keep the current item on top of the others change the z value
            z: isCurrent ? 1 : 0

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }

            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
                anchors.bottom: parent.bottom
            }
        }
    }

model : model

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

このモデルは、ビューの項目を作成するために使用されるデータのセットを提供します。大規模なデータセットや動的なデータセットには C++ モデルを使用し、単純なデータセットにはListModel 型に基づく QML モデルを使用します。

注意: model を変更すると、オフセットがリセットされ、currentIndex0 になります。

ListModelも参照してください


path : Path

このプロパティは、アイテムのレイアウトに使用されるパスを保持します。

Pathも参照して ください。


pathItemCount : int

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

Qt Quick Ultraliteはこれを使用して、デリゲートを静的に割り当てることもできます。モデルのアイテム数がpathItemCount より少ない場合にのみ、必要な数のデリゲートインスタンスを使用します。


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

PathView.isCurrentItem : bool [read-only]

このアタッチド・プロパティは、デリゲートが現在のアイテムの場合はtrue 、そうでない場合はfalse になります。デリゲートの各インスタンスにアタッチされます。

カレント項目とは、PathViewcurrentIndex プロパティと同じインデックスを持つデリゲート項目である。

このプロパティを使用して、カレント項目の外観を調整することができます。

        delegate: Item {
            id: wrapper
            height: 100
            width: 100
            required property string icon
            required property string name
            required property int index
            readonly property bool isCurrent: PathView.isCurrentItem

            opacity: isCurrent ? 1 : 0.5
            // Note: to keep the current item on top of the others change the z value
            z: isCurrent ? 1 : 0

            Image {
                anchors.horizontalCenter: nameText.horizontalCenter
                width: 64; height: 64
                source: wrapper.icon
            }

            Text {
                id: nameText
                text: wrapper.name
                font.pointSize: 16
                anchors.bottom: parent.bottom
            }
        }
    }

メソッドの説明

decrementCurrentIndex()

現在のインデックスを減らします。

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


incrementCurrentIndex()

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

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


特定の Qt ライセンスの下で利用可能です。
詳細はこちら。