このページでは

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内の各アイテムごとにインスタンス化されます。

注: 一般的なQtXMLとは異なり 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
            }
        }
    }
}

楕円形のパスに沿って配置された3つのコンタクト項目を表示するPathView。各項目には、Qtのロゴアイコンと名前が表示されています。

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 を設定して、ビューポートの外側にあるアイテムをクリップしてください。

関連項目: PathListModelListView Qt Quick Ultralite のモデルとビュー、およびC++ データモデル

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

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 を変更すると 、offsetおよびcurrentIndex0 にリセットされます。

ListModel」も参照してください

path : Path

このプロパティには、アイテムのレイアウトに使用されるパスが格納されます。

Path」も参照してください

pathItemCount : int

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

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

preferredHighlightBegin : real

preferredHighlightEnd : real

これらのプロパティは、ビュー内でのハイライト(現在の項目)の優先範囲を設定します。優先値は、0 から1 の範囲内である必要があります。

注:アニメーション およびタッチジェスチャーは現時点ではサポートされていないため、常にデフォルト値のPathView.StrictlyEnforceRange が使用されます。つまり、currentItem が範囲の開始位置となります。

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

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

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

PathView.isCurrentItem : bool [read-only attached]

この添付プロパティは、デリゲートが現在の項目である場合は `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
            }
        }
    }

メソッドのドキュメント

void decrementCurrentIndex()

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

注: このメソッドは、コンポーネントの処理が完了した後にのみ呼び出してください

void incrementCurrentIndex()

現在のインデックスを1増やします。

注: このメソッドは、コンポーネントの処理が完了した後にのみ呼び出してください

特定の Qt ライセンス下で利用可能です。
詳細はこちらをご覧ください。