QML官方系列教程——Use Case - Visual Elements In QML

附网址：http://qt-project.org/doc/qt-5/qtquick-usecase-visual.html

Use Case - Visual Elements In QML —— 用例 - QML中的可视化元素

The Rectangle Type —— 矩形

对于最基本的视觉元素，Qt Quick提供了Rectangle类型来绘制矩形。这些矩形可以使用纯色或渐变色来填充。Rectangle类型也可以用来绘制矩形的边界(borders)。

要绘制矩形无法绘制的自定义形状，可以参考Canvas或者使用Image显示一个提前渲染的图像。

import QtQuick 2.0

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"
    }
}

·

The Image Type —— 图像类型

Qt Quick提供了一个Image类型用来显示图像。Image类型有一个source属性，其值可以是远端或者本地的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模块。

Shared Visual Properties —— 共享的可视化属性

所有的可视化元素都由Qt Quick基于Item类型提供，它为可视化元素提供了一组通用属性，包括透明度和变换属性等。

Opacity and Visibility —— 透明度和可见性

Qt Quick所提供的QML对象类型都内置支持opacity。透明度可以在透明状态与其他状态之间平滑地改变。可见性可以通过visible属性更高效的控制，不过基于开销考虑，它不再能够实现动画。

import QtQuick 2.0

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"
        }
    }
}

·

Transforms —— 变换

Qt Quick类型内置支持各种变换。如果你对你的可视化组件进行旋转和缩放，你可以设置Item::rotation 或Item::scale属性。它们也可以以动画形式改变。

import QtQuick 2.0

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属性。