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

QtQuick の ListView.onAdd は Attached Signal

Published: 2013-01-06

onAdd のドキュメント ですが、ListView のドキュメントの中の「Attached Signal Documentation」というセクションにあります。

Attached と書いてある場合は、通常のプロパティやシグナルではなく、そのエレメントの子エレメント(や子となる Component)の中に以下ののように書くことになります。

Element.property: value
Element.onSignal: variant = value

ListView.onAdd の場合は ListView の delegate の中で使われることを想定しています。

アイテムが新規に追加された祭の処理を ListView の delegate で行いたい場合に、delegate の中で以下のように記述します。

ListView {
delegate: Item {
ListView.onAdd: { ... }
}
}

ListView の delegate はスクロールの位置に応じて動的に生成/破棄されるため、通常使用する Component.onCompleted は使用できません。

ListView.onAdd を使用した簡単なサンプルは以下のようになります。

import QtQuick 2.0

ListView {
width: 180
height: 360

model: ListModel { id: model }
delegate: Item {
id: delegate
width: ListView.view.width
height: 60
Rectangle {
x: 10; y: 10; width: 60 - 20; height: delegate.height - 20
color: model.color
}
Text { anchors.verticalCenter: parent.verticalCenter; x: 60; text: model.color }

ListView.onAdd: SequentialAnimation {
NumberAnimation { target: delegate; property: 'height'; from: 0; to: delegate.height; duration: 200; easing.type: Easing.InOutQuad }
}
}

Timer {
interval: 500
repeat: true
running: true
onTriggered: {
model.insert(0, {'color': Qt.rgba(Math.random(), Math.random(), Math.random(), 1.0).toString()})
}
}
}