使用例 - QMLにおける視覚的要素

矩形タイプ

最も基本的なビジュアルのために、Qt QuickではRectangle タイプで矩形を描画することができます。これらの矩形は色や垂直グラデーションで着色することができます。Rectangle 型は矩形に境界線を描くこともできます。

矩形以外のカスタムシェイプを描画するには、Canvas を参照してください。

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 タイプに基づいています。Item タイプは、ビジュアルアイテムに共通の属性セット（不透明度や変形属性など）を提供します。

不透明度と可視性

Qt Quick が提供する QML オブジェクトタイプは、opacity をビルトインでサポートしています。不透明度はアニメーションさせることができ、透明な状態への遷移や透明な状態からの遷移をスムーズに行うことができます。Visibility も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"
    }
}

より複雑な変形については、Item::transform プロパティを参照してください。

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