QMLのコントロール - ListView

アイテムのインデックスの取得

画面に表示されている現在のアイテムのインデックスを取得する方法は、いくつか存在する。

indexAtメソッド

現在の画面のxy座標を利用する場合、ListViewのindexAtメソッドを使用することができる。

インデックスロール

各デリゲートでは、デリゲートのスコープ内でインデックスロールを使用してインデックスを見つけることもできる。
インデックスロールは、modelで宣言したロールのようなものであり、ListViewにより自動的に割り当てられる。
インデックスロールの詳細は、以下のWebサイトを参照すること。
http://qt-project.org/doc/qt-5/qtquick-modelviewsdata-modelview.html#qml-data-models

 ListView 
 {
    delegate: ColumnLayout
    {
       property int indexOfThisDelegate: index
 
       // ...略
    }
 }

モデル内のアイテムのインデックスを含む特別なインデックスロールも、デリゲートが利用できる。
モデルからアイテムを削除した場合、このインデックスは-1に設定されることに注意する。

currentItemプロパティ

ListViewのcurrentItemプロパティに明示的に値を割り当てて、ListView自身でスクロールできるようにする。

ListViewのcurrentItemプロパティの詳細は、以下のWebサイトを参照すること。
http://qt-project.org/doc/qt-5/qtquick-views-objectmodel-objectmodel-qml.html

右クリックの有効化

ListViewのアイテムを右クリックを有効にするには、delegateのアイテムにMouseAreaコントロールを追加して、
MouseAreaコントロールのacceptedButtonsプロパティにQt.RightButtonを追加する。

以下の例では、ListViewのアイテムを右クリックした時、コンテキストメニューを表示している。

 ListView {
    id: listView
    width: 300
    height: 200
 
    model: ListModel {
        ListElement {
           a: 1
           b: 2
        }
 
        ListElement {
           a: 3
           b: 4
        }
    }
 
    delegate: Rectangle {
       id: rect
       height: parent.height
       left: parent.left
       right: parent.right
       verticalCenter: parent.verticalCenter
 
       MouseArea {
          anchors.fill: parent
          acceptedButtons: Qt.LeftButton | Qt.RightButton
 
          onClicked: {
             if (mouse.button == Qt.LeftButton)
             {  // 左クリック

             }
             else if (mouse.button == Qt.RightButton)
             {  // 右クリック
                contextMenu.popup()
             }
          }
       }
    }
 
    Menu {
       id: contextMenu
 
       MenuItem {
          text: qsTr('Context Menu 1')
       }
 
       MenuItem {
          text: qsTr('Context Menu 2')
       }
    }
 }