Qt Quick における重要な概念 - 位置決め

QMLのビジュアルアイテムは様々な方法で配置することができます。位置決めに関連する最も重要な概念はアンカーです。アンカーは相対的な位置決めの一形態であり、アイテムを特定の境界で互いに固定(アタッチ)することができます。その他、絶対位置決め、座標バインディングによる位置決め、ポジショナー、レイアウトなどがあります。

手動位置決め

アイテムは手動で配置することができる。ユーザーインターフェースが静的なものであれば、手動による位置決めが最も効率的です。

どのようなユーザー・インターフェースでも、ビジュアル・タイプはスクリーン座標の特定の位置に存在します。流動的にアニメーションする動的なユーザーインターフェースはQt Quickの主な焦点ですが、静的に位置決めされたユーザーインターフェースもまだ有効な選択肢です。さらに、これらのタイプの位置が変更されない場合、後続のセクションで説明する動的な位置決め方法を使用するよりも、手動で位置を指定する方がパフォーマンスが高くなることがよくあります。

Qt Quickでは、すべてのビジュアル・オブジェクトはQt Quickビジュアル・キャンバスが提供する座標系内に配置されます。このドキュメントで説明されているように、ビジュアルオブジェクトの x 座標と y 座標は、ビジュアルオブジェクトの親の座標からの相対座標で、左上隅の座標は (0, 0) です。

従って、次の例では2つの矩形を手動で配置して表示します:

コード例レイアウト結果
import QtQuick 2.0

Item {
    width: 200
    height: 200

    Rectangle {
        x: 50
        y: 50
        width: 100
        height: 100
        color: "green"
     }

     Rectangle {
        x: 100
        y: 100
        width: 50
        height: 50
        color: "yellow"
     }
}

バインディングによる位置決め

アイテムは、ビジュアル キャンバス内の位置に関連付けられたプロパティにバインド式を割り当てて配置することもできます。このタイプの位置決めは最もダイナミックですが、この方法でアイテムを位置決めする場合、若干のパフォーマンスコストが発生します。

ビジュアルオブジェクトの位置と寸法は、プロパティバインディングで設定することもできます。これには、バインディングの依存関係が変化すると値が自動的に更新されるという利点があります。例えば、あるRectangleの幅は、その隣のRectangleの幅に依存するかもしれません。

バインディングは非常に柔軟で直感的なダイナミックレイアウトの作成方法を提供しますが、パフォーマンスが犠牲になることに注意する必要があります。

アンカー

アンカーは、アイテムの1つ以上のアンカーポイント(境界)を、もう一方のアンカーポイントに取り付けることで、アイテムを他のアイテムの隣接または内側に配置することを可能にします。これらのアンカーは、一方のアイテムの寸法や位置が変わっても残るので、非常にダイナミックなユーザー・インターフェースを可能にする。

ビジュアル・オブジェクトは、さまざまなアンカー・ポイント(より正確にはアンカー・ライン)を持っていると考えることができる。つまり、オブジェクトが変更されると、それにアンカーされている他のオブジェクトも自動的に調整され、アンカーが維持されます。

Qt Quick はトップレベルのコンセプトとしてアンカーを提供します。このトピックに関する詳細な情報は、アンカーを使った位置決めについてのドキュメントを参照してください。

一般的に、アンカーベースのレイアウトは、バインディングベースのレイアウトよりもはるかにパフォーマンスが高いことに注意してください。原始的な」アンカー・レイアウトとは、アンカー(オブジェクトの入れ子を含む)のみを使用して位置を決定するものであり、「汚染された」アンカー・レイアウトとは、アンカーとバインディング(位置に関連する[x,y]プロパティ、または寸法に関連する[width,height]プロパティ)の両方を使用して位置を決定するものです。

ポジショナー

Qt Quickには、いくつかの組み込みのポジショナーも用意されています。多くのユースケースにおいて、使用する最良のポジショナは単純なグリッド、行、列であり、Qt Quick は、可能な限り最も効率的な方法でこれらのフォーメーションに子を配置するアイテムを提供します。定義済みのポジショナーの利用方法については、アイテムのポジショナーの種類に関するドキュメントを参照してください。

レイアウト

Qt 5.1 から、Qt Quick Layoutsモジュールを使って、Qt Quick のアイテムをユーザーインターフェイスに配置することができるようになりました。ポジショナとは異なり、Qt Quick Layouts の型は、宣言的なインターフェイスでアイテムの位置とサイズの両方を管理します。これらはリサイズ可能なユーザーインターフェイスに適しています。

右から左へのサポート

言語の記述形式の方向性は、ユーザーインターフェースの視覚的な型をどのように配置するかに大きな影響を与えることがよくあります。Qt Quick は、右から左へのテキストレイアウトだけでなく、定義済みのレイアウトを通して、型の右から左への配置をサポートしています。

このトピックの詳細については、Qt Quickの右から左へのサポートに関するドキュメントを参照してください。

©2024 The Qt Company Ltd. ここに含まれるドキュメントの著作権はそれぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。