ジャンル不定の日記です。

QML勉強中 (ListView編)

引き続き、QMLの勉強中。

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
}
こんな感じ。

完成するまでインストールはしない方が良さそうなんで、
$ 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関連をやってみる。