ビジュアルタイプ

Rectangle タイプ

最も基本的なビジュアルについては、 Qt Quick Rectangle 型が提供されており、これを使用して長方形を描画できます。これらの長方形には、単色または垂直グラデーションで色を付けることができます。また、Rectangle 型を使用すると、長方形に枠線を引くこともできます。

矩形以外のカスタム形状を描画するには、Canvas 型を参照するか、Image 型を使用して事前にレンダリングされた画像を表示してください。

import QtQuick

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    // This element displays a rectangle with a gradient and a border
    Rectangle {
        x: 160
        y: 20
        width: 100
        height: 100
        radius: 8 // This gives rounded corners to the Rectangle
        gradient: Gradient { // This sets a vertical gradient fill
            GradientStop { position: 0.0; color: "aqua" }
            GradientStop { position: 1.0; color: "teal" }
        }
        border { width: 3; color: "white" } // This sets a 3px wide black border to be drawn
    }

    // This rectangle is a plain color with no border
    Rectangle {
        x: 40
        y: 20
        width: 100
        height: 100
        color: "red"
    }
}

グラデーション塗りつぶしの正方形と角丸長方形

Image型

Qt Quick には、画像の表示に使用できる `Image ` タイプが用意されています。`Image ` タイプには `source ` プロパティがあり、その値としてリモートまたはローカルの URL、あるいはコンパイル済みリソースファイルに埋め込まれた画像ファイルの URL を指定できます。

// This element displays an image. Because the source is online, it may take some time to fetch
Image {
    x: 40
    y: 20
    width: 61
    height: 73
    source: "http://codereview.qt-project.org/static/logo_qt.png"
}

より複雑な画像については、Image に類似した他の型があります。BorderImage は、グリッドスケーリングを使用して画像を描画し、境界線として使用される画像に適しています。AnimatedImage は、アニメーション付きの .gif および .mng 画像を再生します。AnimatedSprite およびSpriteSequence は、アニメーションではない画像形式で隣接して保存された複数のフレームで構成されるアニメーションを再生します。

動画ファイルやカメラデータの表示については、 Qt Multimedia モジュールを参照してください。

共有の視覚的プロパティ

によって提供されるすべての視覚的アイテムは Qt Quick によって提供されるすべての視覚的アイテムは、Item タイプに基づいています。このタイプは、不透明度や変形属性など、視覚的アイテムに共通する一連の属性を提供します。

不透明度と可視性

Qt Quick が提供するQMLオブジェクト型は、opacity をネイティブにサポートしています。不透明度をアニメーション化することで、透明な状態への、あるいは透明な状態からのスムーズな遷移を実現できます。また、可視性はvisible プロパティを使用してより効率的に管理できますが、その代償としてアニメーション化はできません。

import QtQuick

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Item {
        x: 20
        y: 270
        width: 200
        height: 200
        MouseArea {
            anchors.fill: parent
            onClicked: topRect.visible = !topRect.visible
        }
        Rectangle {
            x: 20
            y: 20
            width: 100
            height: 100
            color: "red"
        }
        Rectangle {
            id: topRect
            opacity: 0.5

            x: 100
            y: 100
            width: 100
            height: 100
            color: "blue"
        }
    }
}

不透明度のブレンドを示す、赤と青の重なり合った正方形

トランスフォーム

Qt Quick タイプには、変形機能が組み込まれています。ビジュアルコンテンツを回転させたり拡大縮小させたい場合は、Item::rotation またはItem::scale プロパティを設定できます。これらもアニメーション化可能です。

import QtQuick

Item {

    width: 320
    height: 480

    Rectangle {
        color: "#272822"
        width: 320
        height: 480
    }

    Rectangle {
        rotation: 45 // This rotates the Rectangle by 45 degrees
        x: 20
        y: 160
        width: 100
        height: 100
        color: "blue"
    }
    Rectangle {
        scale: 0.8 // This scales the Rectangle down to 80% size
        x: 160
        y: 160
        width: 100
        height: 100
        color: "green"
    }
}

45度回転した青い正方形と、それより小さい緑色の正方形

より複雑なトランスフォームについては、Item::transform プロパティを参照してください。

QML用語集ポジショナーとレイアウト

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.