用例 - QML 中的视觉元素

如何在 QML 应用程序中显示可视化元素类型的示例

矩形类型

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

对于绘制矩型以外的自定义形状，请参见画布类型，或使用图像类型显示预先渲染的图像。

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 提供了一个图像类型，可以用来显示图像。图像类型有一个源属性，其值可以是远程或本地 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"
}

对于更复杂的图像，有其他与图像类型类似的其他类型。BorderImage 以网格缩放方式绘制图像，适用于用作边界的图像。AnimatedImage 播放 animated.gif 和 .mng 图像。AnimatedSprite 和 SpriteSequence 播放由非动画图像格式中相邻存储的多帧组成的动画。

对于显示视频文件和摄像头数据，请参见 Qt Multimedia 模块。

共享视觉属性

Qt Quick 提供的所有视觉元素均基于 Item 类型，该类型提供了一组公共属性，用于视觉元素，包括不透明性和变换属性。

不透明度和可见性

Qt Quick 供有的这些 QML 对象类型都具有内置的不透明度支持。不透明度可以动画化，以允许平滑的透明状态的过渡。也可以使用 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 属性。