QML勉強中 (ListView編)
引き続き、QMLの勉強中。
Plasma5にしてRSSニュースリーダーがないから自分で作っちゃおうと思ってるわけなんだが、
RSS（等のFeed）をHTTPで取ってきてリスト表示って感じになると思うんで、リストの表示方法。
ListViewってのを使えばリストが表示できるようなんだが、書き方がたくさんあってリファレンスが難解・・・
まあ、なんとなくわかった。
main.qml
完成するまでインストールはしない方が良さそうなんで、
ListViewにmodelとdelegateを指定する必要がある様で、
modelがリストのデータ。
delegateがカラムの表示方法定義。
って感じなのかな。
delegateにはComponent型のオブジェクトをidで渡してる。
Component型はただ定義してidを使って再利用するためのオブジェクトぽい。
なので、これはComponent型のオブジェクトを別途定義せずとも、delegateの指定部分に直接Row型オブジェクトを書いちゃってもいいみたい。
Row型は子を水平方向に並べて表示するオブジェクトで、spacingでカラム間を空けられるのでリストの行に良さそう。
modelに指定するのはmodel型オブジェクトのようで、テキストを表示するリストの場合はListModelが基本ぽいんだが、
オブジェクトではなく数値を渡すなんてこともでき、数値を指定した場合は指定数分の行ができ、delegateで指定したComponentの方で、indexって名前の変数でカウントできるぽい。
今回はListModelの子のListElementでlとrを定義して、Componentの方でrは*2してる。
lの方は"で囲んで文字型みたいにしたが、定義の際に型を指定しなければ文字型と数値型は同じぽい。
lの方を*2した場合も*2された。
目的のことをやるにはリストを動的更新しなければいけないが、
QML内にJavaScriptを書けるようなんで、JavaScriptからmodelにclear()とかappend()できるぽい。
なので、次はJavaScript関連をやってみる。
Plasma5にしてRSSニュースリーダーがないから自分で作っちゃおうと思ってるわけなんだが、
RSS（等のFeed）をHTTPで取ってきてリスト表示って感じになると思うんで、リストの表示方法。
ListViewってのを使えばリストが表示できるようなんだが、書き方がたくさんあってリファレンスが難解・・・
まあ、なんとなくわかった。
main.qml
import QtQuick 2.0
ListView{
ListModel{
id:model
ListElement{
l:"1"
r:1
}
ListElement{
l:"2"
r:2
}
ListElement{
l:"3"
r:3
}
}
Component{
id:component
Row{
spacing:10
Text{text:l}
Text{text:r*2}
}
}
model:model
delegate:component
}
こんな感じ。ListView{
ListModel{
id:model
ListElement{
l:"1"
r:1
}
ListElement{
l:"2"
r:2
}
ListElement{
l:"3"
r:3
}
}
Component{
id:component
Row{
spacing:10
Text{text:l}
Text{text:r*2}
}
}
model:model
delegate:component
}
完成するまでインストールはしない方が良さそうなんで、
$ qmlscene main.qml
でテスト実行。ListViewにmodelとdelegateを指定する必要がある様で、
modelがリストのデータ。
delegateがカラムの表示方法定義。
って感じなのかな。
delegateにはComponent型のオブジェクトをidで渡してる。
Component型はただ定義してidを使って再利用するためのオブジェクトぽい。
なので、これはComponent型のオブジェクトを別途定義せずとも、delegateの指定部分に直接Row型オブジェクトを書いちゃってもいいみたい。
Row型は子を水平方向に並べて表示するオブジェクトで、spacingでカラム間を空けられるのでリストの行に良さそう。
modelに指定するのはmodel型オブジェクトのようで、テキストを表示するリストの場合はListModelが基本ぽいんだが、
オブジェクトではなく数値を渡すなんてこともでき、数値を指定した場合は指定数分の行ができ、delegateで指定したComponentの方で、indexって名前の変数でカウントできるぽい。
今回はListModelの子のListElementでlとrを定義して、Componentの方でrは*2してる。
lの方は"で囲んで文字型みたいにしたが、定義の際に型を指定しなければ文字型と数値型は同じぽい。
lの方を*2した場合も*2された。
目的のことをやるにはリストを動的更新しなければいけないが、
QML内にJavaScriptを書けるようなんで、JavaScriptからmodelにclear()とかappend()できるぽい。
なので、次はJavaScript関連をやってみる。