Item.layer.format

2025-06-06

通常、QMLのItemは直接ウィンドウに描画されます。しかし、layer.enabled: trueを設定することで、そのItemとその全ての子孫をオフスクリーンサーフェスに描画し、そのサーフェスをテクスチャとしてウィンドウに描画するという、いわゆる「レイヤー化」を行うことができます。

このlayer.formatプロパティは、このオフスクリーンサーフェスがどのようなピクセルフォーマットを持つべきかを指定します。これにより、テクスチャの品質やメモリ使用量を制御できます。指定できる値は、Qt.rgba8888（デフォルト、8ビットRGBA）やQt.rgb565（16ビットRGB）などの列挙型です。

Item.layer.format を使用する主な理由

色深度の制御
アプリケーションの要件に応じて、より高い色深度（例: Qt.rgba8888）や低い色深度（例: Qt.rgb565）を選択できます。
視覚効果の実現
レイヤーをオフスクリーンに描画することで、layer.effectプロパティを使って様々なグラフィカルエフェクトを適用できます。このエフェクトの品質や互換性は、使用するフォーマットに影響されることがあります。
パフォーマンスの最適化
特定のフォーマットを指定することで、GPUのメモリ帯域幅や描画処理を最適化できる場合があります。例えば、アルファチャネルが不要な場合はQt.rgb565を選択することでメモリ使用量を削減できます。

レイヤーは視覚効果には便利ですが、多くの場合、効果が必要な期間だけ有効にし、不要になったら無効にすることが推奨されます。
レイヤーを使用するItemは、通常のレンダリング時にバッチ処理されない場合があります。これにより、多くのレイヤー化されたItemがあるシーンではパフォーマンスの問題が発生する可能性があります。
layer.enabledをtrueに設定すると、GPUメモリが追加で割り当てられます（幅 × 高さ × 4バイト）。大きなレイヤーを使用する場合は、メモリ消費に注意が必要です。

よくあるエラーと問題

- 症状
  レイヤー化したアイテムが期待通りに表示されない、一部が欠ける、色の問題が発生する、アンチエイリアシングが効かないなど。
- 原因
  - formatの選択が不適切（例: アルファチャンネルが必要なのにQt.rgb565を使用）。
  - GPUドライバーの問題や互換性の問題。
  - layer.effectとの組み合わせで問題が発生している。
  - layer.sourceRectやlayer.textureSizeの設定ミス。
- トラブルシューティング
  - formatの確認
    まずはQt.rgba8888（デフォルト）を使用し、問題が解決するか確認します。これで解決するなら、選択したフォーマットがアプリケーションの要件に合っていない可能性が高いです。
  - GPUドライバーの更新
    古い、またはバグのあるGPUドライバーが原因であることがあります。最新のドライバーに更新してみてください。
  - layer.effectの一時的な無効化
    エフェクトが原因で問題が発生している可能性があるので、一度無効にして確認します。
  - layer.sourceRectとlayer.textureSizeの確認
    これらのプロパティが意図しない領域やサイズを指定している場合、表示の乱れにつながります。
パフォーマンスの低下
- 症状
  アプリケーションの動作が重くなる、フレームレートが大幅に低下する。
- 原因
  - 不必要なレイヤー化
    layer.enabled: trueは、描画にオーバーヘッドを追加します。特に、多数のアイテムを不必要にレイヤー化するとパフォーマンスが低下します。
  - 巨大なレイヤー
    Itemのサイズが大きいほど、オフスクリーンサーフェスのメモリ使用量が増加し、描画コストも上がります。
  - 頻繁なレイヤーの再描画
    Itemのプロパティが頻繁に変わると、レイヤーが再描画される回数が増え、パフォーマンスに影響します。
  - layer.formatがGPUに最適ではない
    特定のハードウェアでは、特定のフォーマットが他のフォーマットよりも効率的に処理される場合があります。
- トラブルシューティング
  - 本当にレイヤーが必要か再検討
    レイヤー化は、複雑なエフェクトやキャッシュに有効ですが、単純な描画には不要な場合が多いです。本当に必要な場合にのみ使用するように見直します。
  - レイヤーの有効期間の最適化
    エフェクトを適用する間だけlayer.enabledをtrueにし、それ以外はfalseに戻すことで、リソースの消費を抑えられます。
  - レイヤーのサイズを最小限に
    Item全体ではなく、実際にレイヤー化が必要な部分のみを子Itemとしてレイヤー化することを検討します。
  - QML Profilerの使用
    Qt CreatorのQML Profilerを使用して、パフォーマンスボトルネックを特定します。どこで時間がかかっているか（GPU、CPU、描画コマンドなど）を可視化できます。
  - QT_QUICK_SCENEGRAPH_DEBUG=1環境変数
    Qt Quickのシーングラフのデバッグ情報を出力し、何がレンダリングされているか、バッチ処理されているかなどを確認できます。
メモリ使用量の増加
- 症状
  アプリケーションのメモリ消費が予想以上に多い、特に長時間実行すると顕著になる。
- 原因
  - 前述の「巨大なレイヤー」や「多数のレイヤー」が主な原因です。オフスクリーンサーフェスはGPUメモリを消費します。
- トラブルシューティング
  - QML Profiler
    メモリ使用量のプロファイリング機能を使用し、どのItemがどれだけのメモリを消費しているかを調べます。
  - レイヤー化の最適化
    パフォーマンスの項目と同様に、不必要なレイヤーを削減し、サイズを最小限に抑えます。
互換性の問題 (特に古いGPUや組み込みシステム)
- 症状
  特定の環境でのみクラッシュする、描画が完全に崩れる、特定のformatが機能しない。
- 原因
  - 特定のlayer.formatが、その環境のOpenGL/GPUドライバでサポートされていない。
  - ハードウェアがレイヤー化に十分なリソースを提供できない。
- トラブルシューティング
  - 異なるformatを試す
    まずは標準的なQt.rgba8888を試します。
  - OpenGL ES 2.0 (GLES2) の使用
    組み込みシステムでは、より軽量なOpenGL ES 2.0をQtが使用するように設定（例: QQuickWindow::setGraphicsApi(QSGRendererInterface::OpenGLRhi)など）することで、互換性が向上する場合があります。
  - ソフトウェアレンダリングの検討
    最終手段として、GPUアクセラレーションを諦めてQT_OPENGL=softwareなどの環境変数を設定し、ソフトウェアレンダリングに切り替えることもできます。ただし、これはパフォーマンスが大幅に低下します。
  - Qtのバージョンアップ
    特定のQtのバージョンでバグがある場合があるため、最新の安定版に更新することで問題が解決することもあります。

コミュニティとフォーラム
QtのフォーラムやStack Overflowなどで、同様の問題が報告されていないか検索してみるのも有効です。
ドキュメントの確認
使用しているQtのバージョンに対応するItem.layer.formatの公式ドキュメントを再確認し、指定可能な値や使用上の注意点を参照します。
シンプルな例で再現
問題を切り分けるために、問題のItemとそのlayer設定だけを持つ非常にシンプルなQMLファイルを作成し、そこで問題が再現するかどうかを確認します。
コンソール出力の確認
Qtアプリケーションは、QMLのエラーや警告をコンソールに出力します。Item.layer.formatに関連する警告（例: "Invalid value for enum"）がないか確認してください。

基本的なレイヤー化とデフォルトフォーマット (QML)

まずは、最も基本的なレイヤー化の例です。layer.format を指定しない場合、Qt Quick はプラットフォームに最適なデフォルトフォーマット（通常は Qt.rgba8888）を使用します。

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: "Layer Format Example"

    Rectangle {
        id: myLayeredRectangle
        width: 200
        height: 200
        color: "lightblue"
        anchors.centerIn: parent

        // レイヤーを有効にする
        layer.enabled: true
        // layer.format は指定しないので、デフォルトが使用される

        Text {
            text: "Layered Text"
            anchors.centerIn: parent
            font.pixelSize: 24
            color: "darkblue"
        }

        // レイヤー化されたアイテムが回転するアニメーション
        rotation: 0
        SequentialAnimation on rotation {
            loops: Animation.Infinite
            NumberAnimation { from: 0; to: 360; duration: 5000 }
        }
    }
}

この例では、myLayeredRectangle はその内容（Textアイテム）をオフスクリーンに描画し、その結果が回転アニメーションとして表示されます。layer.format が指定されていないため、Qt はデフォルトのRGBAフォーマットを使用します。これは通常、透明度（アルファチャンネル）を完全にサポートします。

特定のフォーマットを指定する (QML)

アルファチャンネルが不要な場合や、メモリ使用量を削減したい場合に、異なるフォーマットを指定できます。例えば、Qt.rgb565 は16ビットRGBフォーマットで、アルファチャンネルを持ちません。

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: "Layer Format Example - RGB565"

    Rectangle {
        id: myLayeredRectangle
        width: 200
        height: 200
        color: "lightblue"
        anchors.centerIn: parent

        layer.enabled: true
        // アルファチャンネルなしの16ビットRGBフォーマットを指定
        layer.format: Qt.rgb565 // Qt.rgba8888, Qt.rgb888, Qt.rgba4444 なども選択可能

        Text {
            text: "No Alpha Layer"
            anchors.centerIn: parent
            font.pixelSize: 24
            color: "darkblue"
        }

        // 半透明のRectangleを子として追加してみる
        // layer.format が Qt.rgb565 の場合、この透明度は正しく描画されない
        Rectangle {
            width: 100
            height: 100
            color: "red"
            opacity: 0.5 // このopacityは無視されるか、不適切に描画される
            anchors.centerIn: parent
            rotation: 45
        }

        rotation: 0
        SequentialAnimation on rotation {
            loops: Animation.Infinite
            NumberAnimation { from: 0; to: 360; duration: 5000 }
        }
    }

    // 比較用に、レイヤー化されていない同じアイテム
    Rectangle {
        width: 200
        height: 200
        color: "lightgreen"
        anchors.left: myLayeredRectangle.right
        anchors.leftMargin: 50
        anchors.verticalCenter: parent.verticalCenter

        Text {
            text: "Non-Layered"
            anchors.centerIn: parent
            font.pixelSize: 24
            color: "darkgreen"
        }

        Rectangle {
            width: 100
            height: 100
            color: "red"
            opacity: 0.5 // こちらは正しく半透明に描画される
            anchors.centerIn: parent
            rotation: 45
        }
    }
}

この例では、myLayeredRectangle は Qt.rgb565 を使用しているため、子要素の赤い半透明の四角形が正しく半透明にならないことに注目してください。これは、オフスクリーンサーフェスがアルファチャンネルをサポートしていないためです。非レイヤー化された右側の四角形は、期待通りに半透明に表示されます。

layer.effect と組み合わせる (QML)

layer.format は、layer.effect と組み合わせて使用されることが多いです。エフェクトは通常、テクスチャ上で動作するため、テクスチャのフォーマットがエフェクトの結果に影響を与える可能性があります。

// main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtGraphicalEffects 1.15 // エフェクトモジュールをインポート

Window {
    width: 640
    height: 480
    visible: true
    title: "Layer Format with Effect"

    Rectangle {
        id: myLayeredRectangle
        width: 300
        height: 300
        color: "lightblue"
        anchors.centerIn: parent

        layer.enabled: true
        layer.format: Qt.rgba8888 // エフェクトのためにアルファチャンネルが必要な場合が多い

        // レイヤーにぼかしエフェクトを適用
        layer.effect: GaussianBlur {
            radius: 10 // ぼかしの半径
            anchors.fill: parent
        }

        Text {
            text: "Blurred Layer"
            anchors.centerIn: parent
            font.pixelSize: 40
            color: "darkblue"
            width: parent.width - 20
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
        }

        // 赤い四角形もレイヤー化されてぼかされる
        Rectangle {
            width: 150
            height: 150
            color: "red"
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            opacity: 0.7
        }

        rotation: 0
        SequentialAnimation on rotation {
            loops: Animation.Infinite
            NumberAnimation { from: 0; to: 360; duration: 5000 }
        }
    }
}

この例では、myLayeredRectangle とその全ての子要素がオフスクリーンのQt.rgba8888テクスチャに描画され、そのテクスチャ全体にGaussianBlurエフェクトが適用されます。この場合、ぼかしエフェクトが正しく機能するためにアルファチャンネルが必要なため、Qt.rgba8888を選択することが重要です。

C++ から直接 Item.layer.format を設定するAPIは通常ありませんが、QQuickWindow や QQuickView のレンダリング設定を通じて、間接的に影響を与えることは可能です。

例えば、QQuickWindow::setDefaultAlphaBuffer() や QQuickWindow::setGraphicsApi() などを使用することで、QMLシーングラフ全体のデフォルトのバッファフォーマットやグラフィックスAPIを変更できます。これにより、個々の Item.layer.format が指定されていない場合のデフォルトの動作や、レンダリング環境そのものに影響を与えることができます。

main.cpp の例 (デフォルトのアルファバッファ設定)

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickWindow> // QQuickWindow をインクルード

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    // デフォルトのアルファバッファを有効にする（明示的にRGBAフォーマットを推奨）
    // 通常はデフォルトで有効ですが、古いシステムや組み込みシステムで問題がある場合に役立つ
    QQuickWindow::setDefaultAlphaBuffer(true);

    // あるいは、特定のグラフィックスAPIを強制する
    // QQuickWindow::setGraphicsApi(QSGRendererInterface::OpenGL); // OpenGLを使用
    // QQuickWindow::setGraphicsApi(QSGRendererInterface::OpenGLES); // OpenGL ESを使用

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/my_qml_app/main.qml"_qs); // QMLファイルのパス
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

このC++コードは、QMLアプリケーション全体でデフォルトでアルファバッファが使用されるように設定します。もしQML側でlayer.formatが明示的にQt.rgb565のようなアルファチャンネルのないフォーマットに設定されていれば、その設定が優先されます。しかし、layer.formatが指定されていない場合は、このC++の設定が影響を与えることになります。

ここでは、Item.layer.formatの代替となるプログラミング手法をいくつか紹介します。

Item.layer.enabled を賢く使う

これは直接の代替ではありませんが、Item.layer.format の前提となる Item.layer.enabled を適切に管理することが、多くのパフォーマンス問題や描画問題の解決に繋がります。

代替策
- 必要な時だけレイヤーを有効化
  アニメーションやエフェクトを適用する間だけlayer.enabled: trueにし、終わったらfalseに戻します。
- 小さいアイテムに限定
  大きいアイテム全体をレイヤー化するのではなく、特定のエフェクトが必要な部分のみを子アイテムとして切り出し、それをレイヤー化します。
- QMLの最適化
  レイヤー化する前に、QMLの描画が効率的であることを確認します（例えば、Clipプロパティを適切に使用する、不必要な再描画を避けるなど）。
問題
不必要なレイヤー化によるパフォーマンス低下やメモリ消費。

Qt Quick のデフォルトレンダリングに頼る

多くの場合、Qt Quickのデフォルトのレンダリングパイプラインは非常に最適化されており、手動でlayer.formatを調整する必要はありません。

代替策
- QMLの構造を見直す
  Itemの階層構造、anchorsの使い方、opacityやclippingの使用方法などを見直し、Qt Quickのバッチ処理が最大限に活用されるように設計します。
- Qt Quick Scene Graphの知識
  Qt Quickが内部でどのようにレンダリングされているかを理解することで、パフォーマンスボトルネックを回避できます。例えば、Itemが視覚的に重なっている場合や、opacityが1.0以外の場合には、バッチ処理されずに個別に描画されることがあります。
- GPUドライバーの更新
  デフォルトのレンダリングはGPUドライバーに大きく依存します。最新の安定版ドライバーを使用することで、多くの場合パフォーマンスや安定性が向上します。
問題
デフォルトのレンダリングで描画品質やパフォーマンスに不満がある。

ShaderEffect や ShaderEffectSource を直接使う

Item.layer.format と layer.effect の組み合わせは便利ですが、より高度なカスタムエフェクトや特定のフォーマットでの入出力を制御したい場合、ShaderEffect や ShaderEffectSource を直接使用することを検討します。

代替策

ShaderEffectSource
任意のQML Itemツリーをオフスクリーンテクスチャにレンダリングし、そのテクスチャをShaderEffectの入力として使用できます。ShaderEffectSourceにはsourceFormatプロパティがあり、ここで出力テクスチャのフォーマットをItem.layer.formatと同様に細かく制御できます。

import QtQuick 2.15
import QtGraphicalEffects 1.15 // ShaderEffectSource はここに含まれる

// ...
Item {
    id: contentToEffect
    width: 200
    height: 200
    // ... レイヤー化したいコンテンツ ...
}

ShaderEffectSource {
    source: contentToEffect
    // ここでフォーマットを制御できる
    sourceFormat: ShaderEffectSource.RGBA8 // RGBA8, RGB8, RGB565 など
    width: contentToEffect.width
    height: contentToEffect.height
    // ... このソースをShaderEffectの入力として使用 ...
    ShaderEffect {
        property var sourceTexture: parent.texture
        // カスタムシェーダーコード
        fragmentShader: "..."
    }
}

ShaderEffect
ShaderEffectSourceと組み合わせることで、任意のテクスチャを直接入力として受け取り、カスタムシェーダーでピクセル単位の操作を行うことができます。これにより、Item.layer.formatではできないような、より複雑なフォーマット変換やピクセル操作が可能になります。

問題
layer.effectで提供されるエフェクトでは不十分。カスタムシェーダーでより細かい制御が必要。

QQuickFramebufferObject を C++ で使用する

非常に低レベルで、C++側からOpenGLのフレームバッファオブジェクト（FBO）を直接操作する必要がある場合、QQuickFramebufferObjectクラスを使用します。これは、QMLのItem内にカスタムOpenGLレンダリングを統合するための強力なメカニズムです。

代替策

QQuickFramebufferObjectは、QMLのアイテムとして、その内容をFBOに直接レンダリングすることを可能にします。これにより、OpenGLのAPIを使ってFBOのフォーマット（例: GL_RGBA8, GL_RGB565など）や他の特性を完全に制御できます。
これは、ネイティブのOpenGL描画コードをQMLアプリケーションに統合するのに特に役立ちます。

// MyCustomFboItem.h (QQuickFramebufferObjectを継承)
class MyCustomFboItem : public QQuickFramebufferObject
{
    Q_OBJECT
    // ...
    Renderer *createRenderer() const override; // カスタムレンダラーを作成
};

// MyCustomFboItemRenderer.h (QQuickFramebufferObject::Rendererを継承)
class MyCustomFboItemRenderer : public QQuickFramebufferObject::Renderer
{
    // ...
    void synchronize(QQuickFramebufferObject *item) override;
    void render() override;
    QOpenGLFramebufferObject *createFramebufferObject(const QSize &size) override; // ここでFBOのフォーマットを制御

};

// MyCustomFboItemRenderer.cpp (抜粋)
QOpenGLFramebufferObject *MyCustomFboItemRenderer::createFramebufferObject(const QSize &size)
{
    QOpenGLFramebufferObjectFormat format;
    format.setAttachment(QOpenGLFramebufferObject::CombinedDepthStencil);
    // ここでFBOの内部フォーマットを設定
    format.setInternalTextureFormat(GL_RGBA8); // または GL_RGB565 など
    // format.setTextureTarget(GL_TEXTURE_2D);
    // format.setSamples(4); // マルチサンプリングも設定可能

    return new QOpenGLFramebufferObject(size, format);
}

そしてQMLでは:

MyCustomFboItem {
    width: 300
    height: 300
    // ...
}

問題
QMLのプリミティブでは表現できない特殊なレンダリングや、OpenGLの描画パイプラインを完全に制御したい場合。

非常に特定のケースで、Qt Quickのシーングラフを介さずに、生のピクセルデータやテクスチャデータを管理したい場合、QImage（CPUメモリ）やQOpenGLTexture（GPUメモリ）を直接C++で操作することも考えられます。

代替策
- QImageでピクセルデータを生成し、それをQQuickImageProvider経由でQMLに渡す。この際、QImageのフォーマット（QImage::Format_RGBA8888など）を適切に選択します。
- OpenGLのコンテキスト内でQOpenGLTextureを直接作成し、QML側でItemのシェーダー内でそのテクスチャIDを使用するなど、より高度な統合を行う。これは非常に複雑であり、シーングラフの内部動作を深く理解している必要があります。
問題
動的な画像生成、ビデオフレームの処理、外部ライブラリとの連携など。

Qt 初心者向け：Item.childAt() を使った子要素への安全なアクセス

Item. childAt() は、Qt Quick (QML) の Item 型のオブジェクトが持つメソッドの一つです。このメソッドは、その Item の子アイテムのうち、指定されたインデックスに位置する子アイテムを返します。もう少し詳しく見ていきましょう。

Qt Item.childrenの代替方法：findChild, シグナルなど徹底比較

「Item. children」は、Qt Quick (QML) において、ある特定のアイテム（Item 型のオブジェクトや、それを継承した Rectangle、Text、Image などの要素）が持つ直接の子アイテムのリスト（配列のようなもの）を表すプロパティです。

Qt Item.childrenRect.heightとは？初心者向け詳細解説と活用例

Item. childrenRect. height は、Qt Quick (QML) で使用されるプロパティの一つで、ある Item の全ての子アイテムを囲む矩形（rectangle）の高さを表します。もう少し詳しく見ていきましょう。.height: childrenRect は矩形を表すオブジェクトであり、そのオブジェクトは x, y, width

【Qt QML】Item.containmentMaskのよくあるエラーと解決策

Item. containmentMaskは、QMLのItem型に存在するプロパティで、主にポインタイベント（マウスやタッチイベントなど）がそのアイテムに「着地した」と判断される領域を、アイテムの境界ボックス（bounding box）以外の形状で定義するために使用されます。

【Qt入門】QStringとQListにおけるcontains()の使い方と注意点

Qtにおいてcontains()という名前のメソッドは、コレクションクラス（リスト、マップ、セットなど）のインスタンスが特定の要素を含んでいるかどうかをチェックするために使用されます。ユーザーが言及されている「Item. contains()」が具体的にどのクラスのメソッドを指しているかによって少し意味合いが変わりますが、最も一般的なケースは以下の2つです。

Qtプログラミング入門：Item.dataでモデルデータを完璧に操る方法

Qtのモデル/ビュープログラミングにおいて、「Item. data」は、モデル（QAbstractItemModelのサブクラス）がビュー（QTableView、QListView、QTreeViewなど）に表示するデータを提供するための非常に重要な概念です。

Item.enabled

以下に詳しく説明します。子アイテムへの影響: Item. enabledの非常に重要な特徴は、その値が子アイテムにも影響を与えることです。親アイテムのenabledがfalseに設定されると、その子アイテムすべてのenabledも自動的にfalseになります。親アイテムのenabledがtrueに戻ると、子アイテムのenabledは、明示的にfalseに設定されていなかった限り、trueに戻ります。つまり、子アイテムが個別にenabled: falseと設定されていない限り、親のenabledの状態に連動します。

QMLのUI操作を極める！Item.focusを使ったフォーカス管理の実践コード例

以下に「Item. focus」について詳しく説明します。Item はQMLにおけるすべての視覚的な要素の基底となる型です。Item には focus というブール型のプロパティがあり、これを true に設定することで、そのアイテムがキーボードイベントを受け取る対象となるように要求します。

QtのItem.grabToImage()徹底解説：QML要素を画像化する基本と応用

このメソッドは、特定のItem（またはその子孫）が描画されている状態を、QImageオブジェクトとして取得したり、ファイルに保存したりすることを可能にします。これにより、UI要素のスクリーンショットを撮ったり、一時的にその見た目を画像データとして利用したりできます。

【Qt QML入門】Item.heightで学ぶ要素の高さ設定と動的UIデザイン

QtプログラミングにおけるItem. heightは、QML（Qt Markup Language）という宣言的なUI記述言語において、視覚的な要素（Item）の垂直方向のサイズ、すなわち高さを設定・取得するためのプロパティです。Qt Quick（QMLベースのUIフレームワーク）では、Itemはすべての視覚的な要素の基本となる型です。目に見える具体的な形状を持たない抽象的な要素ですが、x、y（位置）、width（幅）、そしてこのheight（高さ）といった、すべての視覚要素に共通するジオメトリ（幾何学的な情報）を定義します。