QMLのモデルビュー。 パート1：事前作成されたコンポーネントビュー

QMLのModel-Viewに関する一連の記事のこのパートでは、リプレゼンテーションを見ていき、既製のコンポーネントに基づいて作成されたリプレゼンテーションから始めます。



QMLのモデルビュー：

1. QMLのモデルビュー。 パートゼロ、入門
2. QMLのモデルビュー。 パート1：事前作成されたコンポーネントビュー
3. QMLのモデルビュー。 パート2：カスタムビュー
4. QMLのモデルビュー。 パート3：QMLおよびJavaScriptのモデル
5. QMLのモデルビュー。 パート4：C ++モデル

MVCの表現はデータマッピングを提供します。 これは、データの表示方法、最終的にはユーザーに表示される内容を決定するプログラムの一部です。



Qtでのビューの実装には1つの重要な機能があると既に述べました。ここでのビューはコントロールと組み合わされています。 なぜこれが行われるのですか？ グラフィカルインターフェイスでは、多くの場合、同じ要素がデータの表示と変更を担当します。 例は、テーブルプロセッサです。 各セルはデータを表示するだけでなく、その変更にも責任を負います。つまり、プレゼンテーションだけでなく制御の機能も実行します。 したがって、これらを1つの要素に結合するという決定は非常に論理的です。



ここでは、2つの関数を1つの要素に結合すると、柔軟性が失われ、プレゼンテーション自体がより複雑になるという考えが示されています。 そうでもない。 データの表示をカスタマイズし、ユーザー入力を処理する可能性を提供するために、デリゲートの概念が導入されています。











デリゲートは、モデルの1つの要素のデータを表示し、その編集を可能にするコンポーネントです。 デリゲートインスタンスは、モデルの各要素に対して作成され、基本的にはコンテナであるビューに配置されます。 特定の要素のデータを表示および編集する方法を決定するのはデリゲートであり、これによりカスタマイズの大きな機会が得られます。 テーブルプロセッサを使用した上記の例では、スピンボックスまたはドロップダウンリストを使用して、各セルのデータを簡単に編集できます。



QMLでは、デリゲートがすべてのモデルのデータを編集できない可能性があることを除いて、すべてがまったく同じです（モデルデータを編集する可能性はドキュメントに示されていません）。



要約すると、QMLのビューには3つのタスクがあります。

1. モデル内の各アイテムのデリゲートインスタンスを作成する
2. 必要に応じてこれらの要素を配置します。
3. 要素間のナビゲーションを提供します。

1.リストビュー

私の意見では、必要で人気のある概念から概念を知り始め、その上でこれらのコンポーネントのほとんどに特徴的ないくつかの事柄を詳しく見ていきます。



このコンポーネントは、オブジェクトをリストに表示する機能を提供します。 ナビゲーションの問題も解決されます-コンポーネントはマウスとキーボードからのイベントを処理し、マウスまたはタッチスクリーン、マウススクロール、およびキーボードを使用して、ジェスチャーで要素をスクロールできます。

1）シンプルなユースケース

ListView（および他のほとんどのビュー）には、現在のアイテムの概念があります。 現在の要素はcurrentIndexプロパティによって決定され、現在の要素自体はcurrentItemプロパティを介してアクセスできます。 また、各デリゲートにはListView.isCurrentItemプロパティが添付されており、この要素が最新の場合にtrueになります。 これにより、現在の要素を選択して、何らかの形で表示されるようにする機会が与えられます。



さらに、ListView自体が現在のアイテムを強調表示できます。 これを行うには、強調表示するコンポーネントが必要です。 最も単純な場合、色付きの長方形になります。 現在のアイテムを変更すると、ListViewはハイライトを移動します（この動作はカスタマイズできます）。



簡単な例でこれをすべて検討してください。

import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "lightgreen" text: "second" } ListElement { color: "orchid" text: "third" } ListElement { color: "tomato" text: "fourth" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel clip: true highlight: Rectangle { color: "skyblue" } highlightFollowsCurrentItem: true delegate: Item { id: listDelegate property var view: ListView.view property var isCurrent: ListView.isCurrentItem width: view.width height: 40 Rectangle { anchors.margins: 5 anchors.fill: parent radius: height / 2 color: model.color border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "%1%2".arg(model.text).arg(isCurrent ? " *" : "") } MouseArea { anchors.fill: parent onClicked: view.currentIndex = model.index } } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デリゲートで添付プロパティListView.isCurrentItemを使用して、このアイテムが現在のものであるかどうかを判断し、現在のアイテムのテキストに加えてアスタリスク（*）を表示します。 要素をクリックすることで、それ自体を最新に設定できるように、ListViewオブジェクトにアクセスする必要があり、ListView.viewプロパティを使用して取得します。 ここでは、このプロパティはデモンストレーションに使用されますが、使用する必要はなく、このオブジェクトに直接アクセスできます。 このオブジェクトは既にデリゲートのスコープ内にあります。 ただし、デリゲートが別のqml-fileで定義されている場合、ListViewオブジェクトはデリゲートのスコープ内に含まれなくなり、このプロパティにアクセスできます。



バックライトとして、単純な色付きの長方形が使用されます。 そのサイズはListViewによって設定され、それ自体が現在のアイテムの後ろに移動します。



プログラムを起動することで、マウスクリックで現在の要素を変更し、バックライトがその背後でどのように移動するかを確認できます。











デリゲートの添付プロパティの可視性に関するもう1つの重要なポイント。 モデルデータとは異なり、添付プロパティはデリゲート自体でのみ有効であり、その子オブジェクトでは有効ではありません。 つまり Text要素でListView.isCurrentItemを使用することはできません。 この機能は、添付プロパティ自体がオブジェクトに表示され、それらにアクセスするときにエラーが発生しないことを考えると、明らかではない場合があります。 たとえば、MouseAreaのクリックのハンドラーを次のように置き換えることができます。

 onClicked: console.log(ListView.isCurrentItem)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、現在の要素であっても、すべての要素で偽を生成します。



デリゲートの子要素からアクセスするには、IDを介してデリゲートのスコープを明示的に指定する必要があります。 listDelegate.ListView.isCurrentItemを使用するか、isCurrentプロパティを使用した例で行われているように、これに中間プロパティを使用します。



最初の方法は、追加のプロパティが作成されないという点で優れています。 デリゲートの実装を別のQMLファイルに移動する場合は、2番目の方法を使用する必要があります。 たとえば、ListDelegate.qmlファイルに配置すると、次のコードを記述できます。

 ListView { delegate: ListDelegate { isCurrent: ListView.isCurrentItem } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これにより、デリゲートコードを変更せずに、デリゲートの実装をListViewにバインドして表示を変更することはできません（たとえば、Repeater + Column）。



ListViewでは、すべての要素の最初と最後に表示される追加の要素を指定できます。 これを行うには、ヘッダーとフッターのプロパティを使用します。 前の例を次の要素で補足します。

 header: Rectangle { width: view.width height: 40 border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "Header" } } footer: Rectangle { width: view.width height: 40 border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "Footer" } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、次のような結果が得られます。

2）セクション

ListViewでは、アイテムをグループに分割し、各グループに独自のタイトルを付けることができます。 これを行うには、モデルからどのロールをグループへの分割に使用するかを選択し、これらのグループの見出しのデリゲートを定義します。



次の例でこれを考慮してください。

 import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { type: "bird" text: "penguin" } ListElement { type: "bird" text: "raven" } ListElement { type: "reptile" text: "lizard" } ListElement { type: "reptile" text: "turtle" } ListElement { type: "reptile" text: "crocodile" } } ListView { id: view anchors.margins: 10 anchors.fill: parent spacing: 10 model: dataModel clip: true section.property: "type" section.delegate: Rectangle { width: view.width height: 40 color: "lightgreen" Text { anchors.centerIn: parent renderType: Text.NativeRendering font.bold: true text: section } } delegate: Rectangle { width: view.width height: 40 border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: model.text } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

グループ化のタイプフィールドを指定します。 したがって、このフィールドの同じ値を持つすべての要素が1つのグループに結合されます。 グループが、最初の文字が一致する要素（アドレス帳など）を結合することを確認できます。 これを行うには、section.criteriaプロパティをViewSection.FirstCharacterに設定する必要があります。



プログラムを実行すると、次の結果が得られます。

3）パフォーマンスについて

ListViewは、モデルのすべての要素のデリゲートインスタンスを作成するのではなく、表示されている要素のみを作成することに注意してください。 表示部分を移動するとき（つまり、スクロールするとき）、ListViewはそれらをその場で作成します。それらは表示領域に落ち、この領域から消えるときに削除されます。 したがって、デリゲートはできるだけ軽くする必要があります。そうしないと、スクロール要素が遅くなります。



ListViewは、現在表示されている領域だけでなく、ある程度の余裕を持って項目を作成できます。 この領域のオブジェクトは、インターフェイスの操作を妨げないように非同期に作成されます。 したがって、そのような要素が多ければ多いほど、スクロールラグは少なくなりますが、メモリ消費も増加します。 そのような要素の数は、特別なパラメーターcacheBufferによって制御されます。 オブジェクトが作成される可視部分の境界を超えた領域のサイズをピクセル単位で決定します。 追加のオブジェクトがいくつ作成されるかを理解するには、この値を高さ（またはListViewが水平配置の場合は幅）で除算し、この値が2つあるため、この値を2倍する必要があります。



Qtの5番目のバージョンでしばらく作業した後、なんとかして4番目のバージョンでプロジェクトを組み立てて立ち上げました。 そして、スクロール要素が大幅に遅れていることに気付きました。 少し掘り下げてみると、Qt 5.0ではcacheBufferがデフォルトで320に設定されており、Qt 4.8では0に設定されています。キャッシュのサイズを大きくすると、スクロールが著しくスムーズになります。 しかし、それはさらに顕著であり、5番目のバージョンでは、彼らは加速の良い仕事をしました-4番目のバージョンと比較して、違いは肉眼で見ることができます。



デフォルトのバッファサイズはプラットフォームごとに異なる可能性があるため、ここで示した数値に頼るのではなく、例として挙げただけです。



上記に基づいて、パフォーマンスに関して2つの結論を出すことができます。

• バインディングの最小数で、最も軽量のデリゲートを作成する必要があります（特にバインディングの複雑なJavaScript式の場合）。
• スクロールに問題がある場合は、バッファのサイズを試してみる価値があります。

2. GridView

このコンポーネントはListViewに似ていますが、アイテムをグリッドに配置できます。 グリッドは、左から右に1行ずつ埋められます（デフォルト）。 したがって、要素が少ない場合、最後に空のスペースがあります。



GridViewを使用するためのわずかに適合した最初の例：

 import QtQuick 2.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "lightgreen" text: "second" } ListElement { color: "orchid" text: "third" } ListElement { color: "tomato" text: "fourth" } } GridView { id: view anchors.margins: 10 anchors.fill: parent cellHeight: 100 cellWidth: cellHeight model: dataModel clip: true highlight: Rectangle { color: "skyblue" } delegate: Item { property var view: GridView.view property var isCurrent: GridView.isCurrentItem height: view.cellHeight width: view.cellWidth Rectangle { anchors.margins: 5 anchors.fill: parent color: model.color border { color: "black" width: 1 } Text { anchors.centerIn: parent renderType: Text.NativeRendering text: "%1%2".arg(model.text).arg(isCurrent ? " *" : "") } MouseArea { anchors.fill: parent onClicked: view.currentIndex = model.index } } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ListViewとは異なり、スペーシングプロパティはありません。 代わりに、cellHeightとcellWidthを使用してセルサイズを設定します。 要素がセルより小さい場合、インデントがあります。 もっと-彼らはお互いにフィットします:)



プログラムの結果：











グリッドを使用して要素を配置する可能性とスペースがないことに加えて、このコンポーネントにはリストビューとは別の違いがあります。セクションはありません。 それ以外の場合、ListViewについて述べたことはすべてGridViewに当てはまります。

3. TableView

一部のデータは、テーブルに最も便利に表示されます。 これを行うために、QtはQTableViewクラスを使用します。 QMLでは、QtQuick Controlsモジュールの登場により、データのテーブルビューを作成するための既製のコンポーネントが登場しました。



モデルはまだリストの形式である必要があることをすぐに言わなければなりません。 1つのモデル要素はテーブル行に対応し、列のデータは要素のロールから取得されます。 そこで実際のC ++テーブルモデルを渡します。 QAbstractTableModelから派生したクラスは失敗します-最初の列のみが表示されます。



TableViewオブジェクトの定義では、各列にどの列を使用し、モデルデータのどのロールを使用するかを指定します。



例を考えてみましょう。

 import QtQuick 2.0 import QtQuick.Controls 1.0 Rectangle { width: 360 height: 360 ListModel { id: dataModel ListElement { color: "orange" text: "first" } ListElement { color: "lightgreen" text: "second" } ListElement { color: "orchid" text: "third" } ListElement { color: "tomato" text: "fourth" } } TableView { id: view anchors.margins: 10 anchors.fill: parent model: dataModel clip: true TableViewColumn { width: 100 title: "Color" role: "color" } TableViewColumn { width: 100 title: "Text" role: "text" } itemDelegate: Item { Text { anchors.centerIn: parent renderType: Text.NativeRendering text: styleData.value } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デリゲートのモデルデータに関する1つの重要な機能。 QtQuick Controlsのコンポーネントの外観はQtQuick Controls Stylesのスタイルを使用して設定され、デフォルトのスタイルはコンポーネントが現在のプラットフォームにネイティブに見えるようにするために使用されます。 本質的に、これらのコンポーネントはモデルと表現を組み合わせ、スタイルはデリゲートです。 スタイルモデルのデータは、styleDataプロパティを使用して利用できます。 TableViewでは、デリゲートはスタイルで同様の方法で使用され、そのデータはstyleDataオブジェクトを介してアクセスできます。



その結果、次の表が得られます。











この例では、テーブル内のすべてのセルのデリゲートを設定するitemDelegateプロパティを使用しています。 一部の列でデータを少し異なって表示する必要がある場合はどうすればよいですか？ この特定の列がTableViewColumnで定義されている場合、デリゲートを設定できます。 たとえば、最初の列では、色がテキストで表示されます。 代わりに、この色でセルを塗りましょう。

 TableViewColumn { width: 100 title: "Color" role: "color" delegate: Rectangle { color: styleData.value } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、色付きのセルが得られます。











行全体に対して、デリゲート（rowDelegateプロパティ）もあります。 これにより、列の高さ、背景色などをカスタマイズできます。

TableViewを使用すると、純粋なQMLでテーブルを作成し、ネイティブのように表示することができますが、同時に外観を柔軟にカスタマイズできます。 このようなコンポーネントは、QMLインターフェイスを備えたデスクトッププログラムを作成するのに非常に役立ちます。 しかし、デスクトップコンポーネントのように見える機能にもかかわらず、TableViewは純粋なテーブルモデルでは機能せず、リストに表示されているデータのみを処理できます。

結論

主に表現の実装に焦点を合わせたQMLには強力な機能がありますが、同時にこのための非常にシンプルなツールがあります。 標準コンポーネントの中には、作業の大部分を占める既製のビューがあり、ユーザーはモデルとデリゲートのみを提供できます。



多くのビューのデリゲートのインスタンスは、その場で作成および削除されるため、パフォーマンスを向上させ、それに応じてアニメーションをスムーズにするには、できるだけ簡単にするようにしてください。