English French [qt-devnet.developpez.com] 日本語

QML の ListView で列(Column)を作る方法

その列のデータの幅に応じたサイズの複数の列を、ListView に作る方法の一つを説明します。

通常、ListView 内の Row 要素は以下のように表示されます。

Row 要素では幅を設定しながら各列を作成することができます。

文字列の幅の取得

QML にはフォントメトリックスはありません。しかし、JavaScript で Text 要素を動的に生成することで、文字列の幅を取得することができます。

列の幅は JavaScript でモデルから計算し、モデルの要素名を鍵としてマップに保存します。ListView のデリゲート(delegate)でその幅を用います。

ListView のデモ用の簡単な UI です。Rectangle 要素は単にコンテナとして使われていて、各行で表示するのと同じ色を設定してます。columnWidths プロパティにはデリゲートで利用する各列の幅を計算した結果を格納します。

Text 要素の最大幅を計算するための簡単な JavaScript 関数です。各列の全てのデータで最大幅を計算し、結果を列の名前を鍵としたマップに格納して返します。

ListView のデリゲートです。list(main.qml) の columnWidths を使って、各列の幅を設定します。

インターネット・ムービー・データベース( http://www.imdb.com )から取得した情報をモデルにしたものです。