QML系列教程(2)-载入显示一幅或多幅图片

效果图：

首先创建一个QWidget工程，并添加以下C++代码，该代码创建并显示了一个QQuickWidget窗口，这个窗口中的内容是一个QML文件：clock.qml。注：我已经把这个文件添加到了资源文件中。

QQuickWidget *view = new QQuickWidget();
    view->move(0,0);
    view->setResizeMode(QQuickWidget::SizeRootObjectToView);//使QML的根元素尺寸，总与本Widget一致
    view->setSource(QUrl("qrc:/QML/clock.qml"));
    view->resize(size());
    view->show();

clock.qml文件代码如下：

import QtQuick 2.0

Item {
    id: root
    width: 200
    height: width

    Image{
        id: background
        anchors.fill:  parent;
        source: "qrc:/pic/pic/meter.jpg"
    }
}

代码语法解释：

• 创建一个元素的操作就是，类名{ 属性名: 属性值  属性名：属性值}。这一操作就类似于C++的：QWidget *wgt = new QWidget(); wgt.move(x,y); wgt.resize(width, height)
• Item是所有可视化元素的抽象父类，一般可视化QML文件都可以用该类作为最外层的元素。当然Item元素作为可视化抽象类，它本身并没有什么可显示的东西，但是定义了所有可视化元素的公共属性，例如坐标xy，宽width、高height、锚anchor、旋转角rotation等，几十个属性可以直接F1自查。
• 每一个元素都要有一个id，并且按照惯例，最外层元素会被命名成root（并不强制，但是推荐这样命令）。
• Image元素具备显示一幅图片的功能。它被嵌套在了Item根元素里面。其位置被锚限定：充满整个父元素。
• height: width 令本元素的高度与宽度保持一致，这种操作称为【属性绑定】，是实时的，而且当width变化时，height也会自动跟随变化。这一特性使得【属性绑定】与【属性赋值】有了本质的区别，赋值的效果仅生效一次，而绑定的效果是全程有效。

 

实际上，用Item元素当做root元素，也不是强制的，你可以用任何一种类型（包括你自定义的类型）来作为root元素。

下面的代码使用Image元素作为根元素，运行效果与前面的代码完全一致：

import QtQuick 2.0

Image {
    id: root
    width: 200
    height: width
    source: "qrc:/pic/pic/meter.jpg"
}

 

载入多幅图片示例：

下面的代码用到了2幅图片：

import QtQuick 2.0

Item {
    id: root
    Image{ //表盘
        id: background
        width: parent.width
        height: width
        source: "qrc:/pic/pic/meter.jpg"

        Image{ //时针
            id: hourPin
            //时针的高度=表盘高度的一半 x 0.5
            height: parent.height / 2 * 0.5
            width: height * 0.2
            //时针的底部对齐到表盘（父元素）的垂直中线:
            anchors.bottom: parent.verticalCenter
            //时针的水平中心对齐到表盘的水平中心:
            anchors.horizontalCenter: parent.horizontalCenter
            source: "qrc:/pic/pic/pin.png"
        }

        Image{ //分针
            id: minPin
            height: parent.height / 2 * 0.7
            width: height * 0.1
            anchors.bottom: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            //以图片底部作为旋转(以及缩放)中心
            transformOrigin: Item.Bottom
            //旋转一定角度
            rotation: 45
            source: "qrc:/pic/pic/pin.png"
        }
    }
}

效果如下：

代码中，时针和分针，这两个元素，共用了同一幅图片，并且分针设置了旋转角度，我们可以任意设定旋转中心（这是一个枚举值，位于Item类中），在本例中，我们设置让表针绕图片的底部旋转，如果不设置，默认为绕图片中心旋转。