实验环境搭建
在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 : colorborder 属性具有两个,一个是边框的宽度,一个是边框的颜色。边框绘制在矩形框的边界之内。
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);
}