Back to Qt.io
Contact Us Blog Download Qt
このページでは

C

ListView QML Type

モデルによって提供されるアイテムのリストビューを提供します。詳細...

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

Flickable

プロパティ

方法

  • int indexAt(real x, real y) (since Qt Quick Ultralite 2.9)
  • var itemAtIndex(int index) (since Qt Quick Ultralite 1.6)
  • positionViewAtIndex(int index, PositionMode mode) (since Qt Quick Ultralite 2.9)

詳細説明

ListViewは、ListModel のような組み込みのQML型から作成されたモデルのデータを表示します。

リストビューには、表示するデータを定義するモデルと、データをどのように表示するかを定義するデリゲートがあります。ListViewのアイテムは水平または垂直にレイアウトされます。ListViewはFlickable を継承しているため、リストビューは本質的にフリック可能です。

注: Qt Quick Ultraliteでは、すべてのデリゲートは同じサイズでなければならず、そのサイズは明示的に指定する必要があります。

使用例

以下の例では、ListViewで使用される単純なリストモデルを定義しています。ここでは、ListViewはデリゲートにTextアイテムを作成します。

Item {
    ListView {
        width: 180; height: 300

        model: ListModel {
            ListElement {
                name: "Bill Smith"
                number: "555 3264"
            }
            ListElement {
                name: "John Brown"
                number: "555 8426"
            }
            ListElement {
                name: "Sam Wise"
                number: "555 0473"
            }
        }

        delegate: Text {
        width: 180
        height: 30
            text: model.name + ": " + model.number
        }
    }
}

ビューはモデルの各項目に対して新しいTextコンポーネントを作成します。デリゲートはモデルの名前と番号のデータに直接アクセスできることに注意してください。

改良された例

改良されたリストビューを以下に示します。デリゲートは視覚的に改善され、別のcontactDelegateコンポーネントに移動しています。

Item {
    Rectangle {
        width: 360; height: 200

        Component {
            id: contactDelegate
            Item {
                width: 360; height: 60
                Column {
                    Text { text: 'Name: ' + model.name }
                    Text { text: 'Number: ' + model.number }
                }
            }
        }

        ListView {
            anchors.fill: parent

            model: ListModel {
                ListElement {
                    name: "Bill Smith"
                    number: "555 3264"
                }
                ListElement {
                    name: "John Brown"
                    number: "555 8426"
                }
                ListElement {
                    name: "Sam Wise"
                    number: "555 0473"
                }
            }

            delegate: contactDelegate
        }
    }
}

デリゲートは必要に応じてインスタンス化され、いつでも破棄することができます。デリゲートはListViewのcontentItemの親になります。状態をデリゲートに保存してはいけません。

レイアウトの例

リストビューのアイテムのレイアウトは、orientation プロパティを使用して制御することができます。この値はQt.HorizontalまたはQt.Verticalのどちらかを指定します。

Item {
    Rectangle {
        width: 360; height: 200

        Component {
            id: contactDelegate
            Item {
                width: 120; height: 200
                Column {
                    Text { text: model.name }
                    Text { text: model.surname }
                    Text { text: "Age: " + model.age }
                }
            }
        }

        ListView {
            anchors.fill: parent
            orientation: Qt.Horizontal

            model: ListModel {
                ListElement {
                    name: "Bill"
                    surname: "Smith"
                    age: "30"
                }
                ListElement {
                    name: "John"
                    surname: "Brown"
                    age: "56"
                }
                ListElement {
                    name: "Sam"
                    surname: "Wise"
                    age: "42"
                }
            }

            delegate: contactDelegate
        }
    }
}

ListView QML TypeおよびModel-View-Delegate パターンも参照してください 。

プロパティ Documentation

count : int [since Qt Quick Ultralite 2.9]

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

このプロパティはQt Quick Ultralite 2.9 で導入された。


currentIndex : int [since Qt Quick Ultralite 2.9]

currentIndex プロパティは現在のアイテムのインデックスを保持します。これを -1 に設定すると、ハイライトが削除されます。

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


delegate : Component

デリゲートは、リストビューによってインスタンス化された各項目を定義するテンプレートを提供します。


highlight : Component [since Qt Quick Ultralite 2.9]

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

各ListView は、ListView によって管理されるハイライトコンポーネントのインスタンスを取得し、現在のアイテムをハイライトします。

注： Qt Quick Ultralite のListView は、Qt Quick と比較して、要素のスタック順が異なります。Qt Quick では、デリゲートのスタック順は 1 で、ハイライトのスタック順は 0 です。ただし、Qt Quick Ultralite では、デリゲートのスタック順の値として0 を使用し、ハイライトのスタック順の値として-1 を使用します。これは、デフォルト（0）以外のz値は余分なストレージを必要とするため、追加のストレージの必要性を回避します。可能な限りデフォルトの積み重ね順序値を維持することで、Qt Quick Ultralite のListView はストレージの使用を最適化します。

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


model : model

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

モデルは、ビューのアイテムを作成するために使用されるデータのセットを提供します。

Qt Quick Ultraliteのモデルとビューも参照してください 。


orientation : Qt::Orientation

このプロパティは、リストの向きを保持します。


spacing : real

このプロパティは、項目間の間隔を保持します。

デフォルト値は 0 です。


メソッドのドキュメント

[since Qt Quick Ultralite 2.9] int indexAt(real x, real y)

x,y の点を含む可視アイテムのインデックスをコンテンツ座標で返す。この関数は、指定された点に項目がない場合、または項目が可視でない場合、-1 を返す。

また、アイテムがListView に存在するかどうかに関わらず、アイテムが可視領域外にある場合は-1 を返す。

このメソッドはQt Quick Ultralite 2.9 で導入された。


[since Qt Quick Ultralite 1.6] var itemAtIndex(int index)

index にあるアイテムを返します。そのインデックスに対応するアイテムがない場合、例えば、そのアイテムがまだ作成されていなかったり、可視領域からパンされてキャッシュから削除された場合は、NULL アイテムが返されます。

このメソッドはQt Quick Ultralite 1.6 で導入されました。


[since Qt Quick Ultralite 2.9] positionViewAtIndex(int index, PositionMode mode)

ListView 内のビューポートを制御することができます。index を以下のmode のいずれかに基づいて設定します：

定数説明
ListView.Beginningアイテムをビューの上部（水平方向の場合は左側）に配置します。
ListView.Centerアイテムをビューの中央に配置します。
ListView.Endビューの一番下（横向きの場合は右）に配置する。
ListView.Visibleビューの中央に配置します。アイテムが部分的に表示されている場合は効果がありません。
ListView.Containアイテム全体をビューに配置します。アイテムがビューより大きい場合、ビューの一番上（横向きの場合は左）に配置されます。

ビューをindex に配置すると、ビューの最初または最後に空のスペースが追加される場合、ビューは境界に配置されます。

注: Qt Quick UltraliteはまだhighlightRangeMode またはsnapMode をサポートしていないため、ListView.SnapPosition モードは効果を持ちません。

このメソッドはQt Quick Ultralite 2.9 で導入されました。


特定の Qt ライセンスの下で利用可能です。
詳細を見る。