用例 - QML中的视觉元素

矩形类型

对于最基本的视觉元素，Qt Quick 提供了矩形类型来绘制矩形。这些矩形可以用颜色或垂直渐变着色。矩形类型还可以在矩形上绘制边框。

对于绘制矩形之外的定制形状，请参阅 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"
    }
}

图像类型

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 的支持。不透明度可以动画化，以便在透明状态之间或从中 smooth transitions。可见性也可以使用 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 属性。