Qt 5 の未来は明るいブログ

ListView の最初と最後をつなげて表示する

Published: 2013-01-23 / Last modified: 2013-01-23

QtQuick 2.0 の ListView で、ListView で最後のアイテムから最初のアイテムにキーでジャンプ のようにすると最初から最後にジャンプをすることができることは分かりましたが、表示的には連続していません。

残念ながら ListView 自体にはこのような機能は実装されていないのですが、PathView を使うことでほぼ同様の機能を簡単に実現することができます。

import QtQuick 2.0

Rectangle {
width: 150; height: 200
color: "white"

ListModel {
id: appModel
ListElement { name: "Music"; icon: "pics/AudioPlayer_48.png" }
ListElement { name: "Movies"; icon: "pics/VideoPlayer_48.png" }
ListElement { name: "Camera"; icon: "pics/Camera_48.png" }
ListElement { name: "Calendar"; icon: "pics/DateBook_48.png" }
ListElement { name: "Messaging"; icon: "pics/EMail_48.png" }
ListElement { name: "Todo List"; icon: "pics/TodoList_48.png" }
ListElement { name: "Contacts"; icon: "pics/AddressBook_48.png" }
}

Component {
id: appDelegate
Item {
id: wrapper
width: view.width; height: view.height / view.pathItemCount

Image {
id: icon
anchors { verticalCenter: parent.verticalCenter; left: parent.left; margins: 4 }
width: wrapper.height - 8
height: width
source: model.icon
}
Text {
anchors { verticalCenter: parent.verticalCenter; left: icon.right; right: parent.right; margins: 4 }
text: model.name
}
}
}

Component {
id: appHighlight
Rectangle { width: view.width; height: view.height / view.pathItemCount; color: "lightsteelblue" }
}

PathView {
id: view
anchors.fill: parent
highlight: appHighlight
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
focus: true
model: appModel
delegate: appDelegate
path: Path {
startX: view.width / 2; startY: 0
PathLine { x: view.width / 2; y: view.height}
}
pathItemCount: 5 // must be odd

Behavior on offset { SmoothedAnimation { velocity: 10 } }
Keys.onUpPressed: offset = Math.round(offset + 1)
Keys.onDownPressed: offset = Math.round(offset - 1)
}
}

PathView の pathPathLine を使用して直線で定義し、view 内に表示されるアイテムの数を pathItemCount というプロパティを使用して調整しています。

キーでの操作は PathView のキー操作が期待した動作と異なる を参照してください。

Trend