この記事は Qt Blog の "Table View with Qt Quick” を翻訳したものです。
執筆: Jens Bache-Wiig 2011年5月26日
Qt Quick をデスクトップで使われている場合には、既に ListView の限界を感じているかもしれません。ListView はフリックで操作できるアイテムの一覧を表示するための便利な機能です。しかし、ほとんどのデスクトップアプリケーションでは、プレイリストやアルバムの一覧の表示などのように現在できること以上のことが要求されるでしょう。これが Qt Quick Desktop Components の大きな制限だということを痛感したので、こういう機能が追加されたらいいなぁというものを ListView の上に作ってみました。
そしてその成果が TableView です。以下のような感じになります。
動作しているところは こちらの動画 で見ることができます。Mac、Windows、KDE と、他のプラットフォームでのスクリーンショットも撮ってみました。マックを常用している方は、テーブルのヘッダがスクロールバーの上部にまできちんと表示されていることに気づくかもしれません。
この TableView は ListModel や XmlListModel のような Qt Quick でサポートされている既存のモデルを使用して動かせるように設計されています。しかし、１次元の ListModel にはカラムの概念が無いため、カラムとプロパティのマッピングが必要です。このため、このビューに使用するモデルは以下のようになります。
ListModel {
id: dataModel
ListElement { title:"Image title"; credit:"some author"; source:"http:/..." }
ListElement { title:"Another title"; credit:"some author"; source:"http:/..." }
}
それからテーブルビューを作成する方法です。
TableView {
model: dataModel
TableColumn {
property: "title"
caption: "Title"
width: 120
}
TableColumn {
property: "credit"
caption: "Credit"
width: 120
}
TableColumn {
property: "source"
caption: "Image source"
width: 200
}
}
順序と幅のプロパティはビューの初期設定に過ぎないことを注意してください。ユーザーは自由にカラムのサイズを変更したり、カラムの順番を変更することができます。一見マッピングは１カラムにつき１つに制限されているように見えます。しかし、ListElement をネストさせることで１つのアイテムにつき、１つ以上のプロパティを使用することができるようになっています。
ListElement { firstColumn: ListElement { description: "Bananas"; color: "yellow" } }
デフォルトでは TableView はそれぞれのアイテムのテキストを表示するような簡単なデリゲートを提供します。
しかし、Qt Quick の本当に素晴らしいところは簡単にこれをカスタマイズできるところです。これは rowDelegate、itemDelegate、headerDelegate を上書きすることで実現できます。例えば、簡単な編集可能なアイテム表示にしたい場合にはこんな感じでできるでしょう。
itemDelegate:
TextInput {
text: itemValue
onAccepted: model.setProperty(rowIndex, itemProperty, text)
}
まだこれで全てに対応できるわけではありません。既知の問題として、キーボードでのナビゲーションが制限されていることと、複数選択があります。普通の Qt 4.7 の上でこれら以外には特に問題はなく動作しますので、以下のリポジトリをクローンして今日からでも遊んでみてください。
http://qt.gitorious.org/qt-components/desktop
