ベストQtクイックトリック：コンポーネント

QMLは、コンポーネントと呼ばれるコードを破壊する便利な方法を提供します。 後で再利用できるコンポーネントを作成する最も簡単な方法は、メインQMLファイルの作業ディレクトリに新しいファイルを追加することです。



Example.qml：

import QtQuick 1.0 Rectangle { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

main.qml：

 import QtQuick 1.0 Example { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

また、コンポーネントはモジュールとしてパッケージ化でき（Qtコンポーネントはそのようなモジュールです）、プラグインとして公開できます。 この投稿では、コンポーネントを使用して、クリーンで保守しやすいQMLコードを記述します。

新しいコンポーネントの作成

最初の例は、追加のコンポーネントを作成する単純さを示したので、それらを使用することを恐れないでください。



再利用可能なコードを主な目標にしないでください。 実装の詳細をカプセル化し、コンポーネントの分離を削減するよう努めます。 コンポーネントは小さくなければなりません。 これらのルールに従うと、後で再利用できるコードに自動的に到達します。



この単純なアナログ時計の例を見てみましょう。



ダウンロード例 / オンラインで見る

main.qml：

 import QtQuick 1.0 //      . Rectangle { id: root width: 320 height: 320 property variant now: new Date() Timer { id: clockUpdater interval: 1000 //     running: true repeat: true onTriggered: { root.now = new Date() } } Clock { id: clock anchors.centerIn: parent hours: root.now.getHours() minutes: root.now.getMinutes() seconds: root.now.getSeconds() } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Clock.qml：

 import QtQuick 1.0 //  ,   ,   . Rectangle { id: root width: 262 //   height: 262 //   // public: property int hours: 0 property int minutes: 0 property int seconds: 0 // private: Item { id: impl Image { id: face source: "images/face.png" Image { id: shorthand source: "images/shorthand.png" smooth: true rotation: root.hours * 30 } Image { id: longhand source: "images/longhand.png" smooth: true rotation: root.minutes * 6 } Image { id: thinhand source: "images/thinhand.png" smooth: true rotation: root.seconds * 6 } Image { id: center source: "images/knob.png" } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードにはClockコンポーネントが含まれており、起動時に以下のスクリーンショットに示すようなコンポーネントが表示されます。 アプリケーションで一度使用されるという事実にもかかわらず、メインファイルから選択することは理にかなっています。







まず、main.qmlファイルに残っているロジックをシンプルかつ理解しやすくします。Clockコンポーネントの時間、分、秒を更新するタイマーは、機能を追加する場合にmain.qmlで確認する必要があるすべてです。



第二に、Clockコンポーネントはウィンドウ内での独自の位置について心配することはできません。 ClockコンポーネントをN回使用するRow要素があるとします。 anchor.fill：親コードがClockコンポーネントのルート要素にあった場合、Row要素でそのインスタンスを使用できませんでした。各Clockインスタンスは、width_row / Nではなくwidth_row全体を占有します。これがQMLがほとんどのアンカー（アンカー）Row要素に配置された要素内。 Clockコンポーネントを再利用可能なままにしておきたい場合、将来の使用について多くの仮定を立てるべきではありません。 要約すると、コンポーネントのルート要素には、その親へのアンカーを含めたり、厳密に定義されたレイアウトマネージャーを使用したりしないでください。



同時に、Clockコンポーネントはその長さと幅に固定値を設定します。 セマンティックの観点から、これらはデフォルトでのコンポーネントの次元です。 インスタンスのサイズは必要に応じて変更できるため、コンポーネントの使用は制限されません。 寸法がゼロのコンポーネントは不可視要素と見なされるため、デフォルトで寸法をゼロ以外に設定すると、愚かなエラーが回避されます。



また、構成要素の作成や実装の詳細のカプセル化など、それほど明白ではない他の美徳もあります。



単純な要素ElementA、ElementB、およびElementCから複合要素（ComposedElementと呼びましょう）を作成すると、要素に新しいプロパティとアクションを簡単に追加できます。 ElementA、ElementB、またはElementCを変更することなく、ComposedElementに新しいElementDおよびElementE要素を追加できます。 私たちの単純な要素は互いに分離されているため、要素の1つが突然変更された場合、単に破壊することはできません。



コンポーネントは、C ++およびJavaクラスで行われるように、パブリック部分とプライベート部分に分割できます。 コンポーネントのパブリックAPIは、ルート要素（コンポーネントによって継承されたプロパティを含む）で定義されたすべてのプロパティとメソッドの合計です。 これは、そのようなプロパティを変更でき、そのようなメソッドをコンポーネントのユーザーが呼び出すことができることを意味します。



（ルートではなく）ネストされた要素で定義されたプロパティまたはメソッドは、完全にプライベートなAPIと見なすことができます。 これにより、実装の詳細をカプセル化することができ、開発者がコンポーネントを作成するときに最終的に当たり前になるはずです。



カプセル化の利点を証明するために、Clock.qmlから内部要素「impl」を削除し、アプリケーションを再度実行できます（たとえば、「$ qmiviewer main.qml」を使用）。 ClockパブリックコンポーネントAPIは変更されていないため、新しいエラーは表示されません。 これは、「impl」を自由に変更できることを意味し、そのような変更によるサードパーティの影響が他のコンポーネントに現れないことを知っています。



このアイデアを拡張して、Clock.qmlに「impl」の任意の要素を状況に応じて動的にロードさせることもできます。 これにより、QMLのポリモーフィズムの概念が導入されます。 このようなメカニズムの実装は、演習として読者に任されています。



各コンポーネントに適切に設計された最小限のパブリックAPIがある場合、特定の実装ではなく、インターフェイスの開発に集中できます。

コンポーネントの再利用

Clock.qmlコンポーネントを実際に再利用できるかどうかを確認します。 世界時間を表示する時計を作成するのに最適です。 この場合、それらに秒針は必要ありません。 Clock.qmlの動作をわずかに変更して、値がゼロ未満の場合に後者が時間、分、または秒を表示しないようにすることができます。 id = thinhandのImage要素の場合、visibleプロパティを秒数に関連付けることができます。

 visible: root.seconds > -1
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

パブリックAPIは変更しませんでした。 また、アナログ時計で秒に負の値を使用しても意味がありません。 したがって、この変更はClockコンポーネントを使用する既存のアプリケーションの動作に影響を与えないと確信しています。



世界時計の例では、とりわけ、地元の天気情報を表示できます。 利用可能な天気サービスAPIの1つとXmlListModelを併用すると、APIからデータを宣言的に取得できます。 以前は時計の時刻を更新するためだけに使用されていたタイマーが、1時間に1回気象データを更新するために使用されるようになりました。 XmlListModelデータリフレッシュ関数に接続するリフレッシュ信号の入力方法に注目してください。



変更された例では、3つの都市の世界時計と現地の天気情報が表示されます。







Clockコンポーネントは簡単に統合できます。 秒針をオフにし、特定の都市のオフセットとともに時間値にUTCを使用しました。 これは、Clockが単純なインターフェイス要素として設計されているため機能しました。 コンポーネント内にタイマーがある場合（コンポーネントのプロパティとして時間、分、秒を変更する代わりに）、これは作業を非常に複雑にします。 残念ながら、main.qmlのサイズは大幅に増加しました。 Repeater要素は、utcOffsetsおよびcitys配列と同様に、プロジェクトの複雑さの一因となりました。



ダウンロード例 / オンラインで見る

main.qml：

 Rectangle { ... property variant cities: ["Berlin", "Helsinki", "San Francisco"] property variant utcOffsets: [1, 2, -8] property variant now: new Date() signal refresh() Timer { ... property int hours onTriggered: { hours = root.now.getHours() root.now = new Date() //      : if (hours != root.now.getHours()) { root.refresh() } } } Row { anchors.horizontalCenter: parent.horizontalCenter Repeater { model: root.cities //           . Rectangle { id: current width: 262 //   height: 320 //   property string city: cities[index] property int utcOffset: utcOffsets[index] XmlListModel { id: cityQuery ... } ListView { model: cityQuery anchors.fill: parent delegate: Item { Clock { id: clock anchors.left: parent.left anchors.top: parent.top // ,  UTC      , //     : hours: root.now.getUTCHours() + current.utcOffset + 24 minutes: root.now.getMinutes() seconds: -1 } Row { ... Image { id: icon source: "http://www.google.com" + model.iconUrl } Text { id: label text: current.city + ", "+ model.temperature + "°C\n" + model.humidity + "\n" + model.windCondition } } } } } } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちの目標は、main.qmlを理解しやすくすることです。 同時に、Clock.qmlを不必要に複雑にしたくないのは、この場合、単純なアナログ時計として使用するのが難しいからです。 そのため、気象データと時計コンポーネントの収集で構成される新しいコンポーネントを作成しました。 タイマー、更新ロジック、XmlListModel、およびクロック統合が含まれています。 ここでutcOffsetsとcitys配列を直接設定する代わりに、WeatherWorldClockコンポーネントの新しいパブリックプロパティを追加します。

 // public: property string city: "" property int utcOffset: 0
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらの配列とRepeaterをmain.qmlから削除できます。



ダウンロード例 / オンラインで見る

main.qml：

 import QtQuick 1.0 //       . Rectangle { id: root width: 786 height: 320 Row { id: cities anchors.fill: parent anchors.horizontalCenter: parent.horizontalCenter WeatherWorldClock { city: "Berlin" utcOffset: 1 } WeatherWorldClock { city: "Helsinki" utcOffset: 2 } WeatherWorldClock { city: "San Francisco" utcOffset: -8 } } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

WeatherWorldClockコンポーネントは、main.qmlの変更から分離されています。 任意のファイルでそのプロパティを補足および変更でき、何かがうまくいかなくなる心配はありません。 WeatherWorldClockが複雑すぎてサポートできない場合、より多くのコンポーネントに分割できます。 そのため、アプリケーションのメインロジックが非常にシンプルに見えることが非常に重要です。WeatherWorldClockコンポーネントを初期化し、都市とそのUTCオフセットを指定します。 以上です！

おわりに

この記事では、コンポーネントを使用し、オブジェクト指向設計のよく知られている原則を適用して、開発中の複雑なサンプルのコードの純度と一貫性を維持する方法を示しました。 ある時点で（例に天気を表示する機能を追加したとき）、コンポーネントの監視を停止したため、アプリケーションロジックはさらに複雑になりました。 このような簡単な方法で、QMLコードの清潔さと順序を維持することは重大な仕事であり、開発者からの規律が必要であることが実証されました。