qml(hello world)

实验环境搭建

在QT的UI designer中拖入QQuickWidget控件

在QQuickWidget属性中设置qml资源位置：

使用QML显示HelloWorld

main.qml中的内容

import QtQuick 2.3
Rectangle {
  width: 200
  height: 100
  color: "red"

  Text {
      anchors.centerIn: parent
      text: "Hello, World!"
  }
}

Item标签

在qtquick中item是所有可见类型的基本类型。所有可见类型都继承自item.

• Rectangle标签

• antialiasing : bool
  该属性用来决定矩形框标签是否使用抗锯齿的属性，默认是开启的如果矩形框具有属性radius.

• border
  border.width : int
  border.color : color

  border 属性具有两个，一个是边框的宽度，一个是边框的颜色。边框绘制在矩形框的边界之内。
  border.width 边框的宽度，如果没有边框设置为0
  border.color 边框的颜色

  边框宽度为2 颜色为红色的矩形框

import QtQuick 2.3
Rectangle {
  width: 200
  height: 100
  color: "blue"
  border.width:2
  border.color:"red"
  Text {
      anchors.centerIn: parent
      text: "Hello, World!"
  }
}

• color : color
  该属性控制着矩形框的背景颜色，默认的颜色是白色。

• gradient : Gradient
  该属性控制矩形框内的渐变，默认的渐变是垂直方向的渐变，如果需要其它渐变方向需要控制rotation 属性。
  普通渐变：

import QtQuick 2.3
Rectangle {
  width: 200
  height: 100
  color: "blue"
  border.width:2
  border.color:"red"
  gradient: Gradient {
          GradientStop { position: 0.0; color: "lightsteelblue" }
          GradientStop { position: 1.0; color: "blue" }
      }
  Text {
      anchors.centerIn: parent
      text: "Hello, World!"
  }
}

旋转90度的渐变

import QtQuick 2.3
Rectangle {
  width: 200
  height: 100
  color: "blue"
  border.width:2
  border.color:"red"
  rotation:90
  gradient: Gradient {
          GradientStop { position: 0.0; color: "lightsteelblue" }
          GradientStop { position: 1.0; color: "blue" }
      }

  Text {
      anchors.centerIn: parent
      text: "Hello, World!"
  }
}

• radius : real
  圆角属性，控制着矩形框的圆角属性。
  圆角属性为10的矩形框

import QtQuick 2.3
Rectangle {
  width: 200
  height: 100
  color: "lightsteelblue"
  radius:10
  Text {
      anchors.centerIn: parent
      text: "Hello, World!"
  }
}

Image标签加载图片

• 从资源文件加载
  添加一个image图片，source指定的是资源文件的路径，不要加冒号。

import QtQuick 2.4

Item {
    width: 400
    height: 400
    property alias image: image

    Image {
        id: image
        x: 66
        y: 132
        width: 206
        height: 177
        source: "/QtGuiApplication/Resources/Panda-Cub.png"
    }
}

• 从本地文件加载
  首先需要设置qml的上下文属性，将本地资源文件的路径设置到applicationDir中

#include "QtGuiApplication.h"
#include <QQmlEngine>
#include <QQmlContext>

QtGuiApplication::QtGuiApplication(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    QQmlEngine* engine = ui.quickWidget->engine();
    engine->rootContext()->setContextProperty("applicationDir", "file:///" + qApp->applicationDirPath() + "/");
}

 然后在qml中应用该路径

import QtQuick 2.4

Item {
    width: 400
    height: 400
    property alias image: image

    Image {
        id: image
        x: 66
        y: 132
        width: 206
        height: 177
        source: applicationDir + "Resources/Panda-Cub.png"
    }
}

放大缩小QML视图

#include "QtGuiApplication.h"
#include <QQmlEngine>
#include <QQmlContext>
#include <QQuickView>
#include <QQuickItem>

QtGuiApplication::QtGuiApplication(QWidget *parent)
    : QMainWindow(parent)
{
    ui.setupUi(this);
    QQmlEngine* engine = ui.quickWidget->engine();
    engine->rootContext()->setContextProperty("applicationDir", "file:///" + qApp->applicationDirPath() + "/");
    ui.quickWidget->setSource(QUrl("file:///" + qApp->applicationDirPath() + "/Resources/main.qml"));
    ui.quickWidget->rootObject()->setScale(2);
}