范例
当前位置:首页 > 其他范文 > 范例 > 列表页

qml范例详解

小草范文网  发布于:2017-01-27  分类: 范例 手机版

篇一:QML学习例子

1.介绍

QML是一种描述语言,主要是对界面效果等的一种描述,它可以结合javaScript来进行更复杂的效果及逻辑实现。比如做个游戏,实现一些更有趣的功能等

2.简单的例子

import Qt 4.7

Rectangle{

width:200

height:200

color:"blue"

}

代码是绘制一个蓝色的矩形,宽200高200,import包含一个qt4.7的包 3.基本元素的介绍(自己翻译意思会有出入,敬请见谅)

基本可视化项

Item基本的项元素 在QML中所有可视化的向都继承他

Rectangle基本的可视化矩形元素

Gradient定义一个两种颜色的渐变过程

GradientStop定义个颜色,被Gradient使用

Image在场景中使用位图

BorderImage(特殊的项)定义一张图片并当做边界

AnimatedImage为播放动画存储一系列的帧

Text在场景中使用文本

TextInput显示可编辑为文本

IntValidator int验证器

DoubleValidator double验证器

RegExpValidator验证字符串正则表达式

TextEdit显示多行可编辑文本

基本的交互项

MouseArea鼠标句柄交互

FocusScope键盘焦点句柄

Flickable提供一种浏览整张图片的一部分的效果,具体看例子

Flipable提供一个平面,可以进行翻转看他的前面或后面,具体看例子 状态

State定义一个配置对象和属性的集合

PropertyChanges使用一个State描述属性的改变

StateGroup包含一个状态集合和状态变换

ParentChange重新定义父集,也就是换个父节点

AnchorChanges在一个状态中改变anchors

动画和变换

Behavior默认的属性变换动画

SequentialAnimation对定义的动画串行播放

ParallelAnimation对定义的动画并行播放

PropertyAnimation属性变换动画

NumberAnimation对实数类型属性进行的动画

Vector3dAnimation对QVector3d进行的属性

ColorAnimation颜色进行的变换动画

RotationAnimation对旋转进行的变换动画

ParentAnimation对父节点进行变换的动画,改变绑定的父节点 AnchorAnimation对anchor进行改变的动画

PauseAnimation延迟处理

SmoothedAnimation允许属性平滑的过度

SpringAnimation一种加速的效果

PropertyAction允许在动画过程中对属性的直接改变

ScriptAction允许动画过程中调用脚本

Transition在状态变换中加入动作变化

工作中的数据

Binding在创建的时候绑定一些数据到一些属性

ListModel定义链表数据

ListElement定义ListModel的一个数据项

VisualItemModel包含可视化项(visual items)到一个view中,相当是一个容器

VisualDataModel包含一个model和一个delegate,model包含需要的数据,

delegate设计显示的项的信息,具体的去看例子

Package他的目的是把VisualDataModel共享给多个view,具体还要学习 XmlListModel特殊的一个模式使用XPath表达式,使用xml来设置元素,参考例

XmlRole XmlListModel的一个特殊的角色

试图

ListView提供一个链表显示模型试图

GridView提供一个网格显示模型试图

PathView提供一个内容沿着路径来显示的模型

Path定义一个PathView使用的轨迹

PathLine定义一个线性的轨迹

PathQuad定义一个二次贝塞尔曲线的轨迹

PathCubic定义一个三次贝塞尔曲线的轨迹

PathAttribute允许绑定一个属性上,具体看例子

PathPercent修改item分配的轨迹不是很明了其中的意思

WebView允许添加网页内容到一个canvas上

定位器

Column整理它的子列(纵)

Row整理它的子行(横)

Grid设置它的子到一个网格上

Flow目的是不让他的子项重叠在一起

实用

Connections明确连接信号和信号句柄

Component封装QML items想一个组件一样

Timer提供时间触发器

QtObject基本的元素只包含objectName属性

Qt qml全局Qt object提供使用的枚举和函数

WorkerScript允许在QML使用线程

Loader控制载入item或组件

Repeater使用一个模型创建多个组件

SystemPalette为Qt palettes提供一个通道

FontLoader载入字体根据名字或URL

LayoutItem允许声明UI元素插入到qtGraphicsView布局中 变换

Scale分派item缩放行为

Rotation分派item旋转行为

Translate分派item移动行为

4.基本元素的使用例子

1. 位置是0,0宽高分别是200

Item {

x: 0; y: 0;

width: 200; height: 200;

}

2. 位置是:0,0宽高分别是200,颜色是红色

Rectangle {

x: 0; y: 0;

width: 200; height: 200;

color: "red"

}

3.分别在总高度的0颜色红色 总高度的1/3黄色 总高度的1是绿色

Rectangle{

width:100;height:100

gradient:Gradient{

GradientStop{position:0.0;color:"red"}

GradientStop{position:0.33;color:"yellow"}

GradientStop{position:1.0;color:"green"}

}

}

4.设置一张图片

Image {

source: "../Images/button1.png"

}

5.他将一张图片分成9部分

当图片进行缩放的时候

A.1 3 7 9位置的都不会进行缩放

B. 2 8将根据属性horzontalTileMode进行缩放

C.4 6将根据属性verticalTileMode进行缩放

D.5将根据属性horzontalTileMode和verticalTileMode进行缩放 BorderImage {

width: 180; height: 180

// 分割1~9块的4个点是根据border设置的坐标来实现的

// 本别是距离坐标 上边 右边 下边的距离

border { left: 30; top: 30; right: 30; bottom: 30 }

horizontalTileMode: BorderImage.Stretch

篇二:QML基础——QML国际化(中文示例)==

在Qt程序中如何使用多国语言已经在《Qt的国际化和本地化》 这篇文章中有所介绍,本文则针对如何对出现在QML中的字符串进行国际化进行专门介绍。

本本将通过一个很小的中文例子程序,向大家一步步讲解如何使得出现在QML代码中的字符串显示成中文。示例程序可通过本文末尾所附链接下载。更多阅读可以参照“QML的国际化”

修改pro

在Qt的pro文件中首先加入以下几行: CONFIG += localize_deployment

SYMBIAN_SUPPORTED_LANGUAGES += zh_CN

SYMBIAN_LANG.zh_CN = 31

TRANSLATIONS = displayChinese_zh_CN.ts

其中CONFIG += localize_deployment是为了可以为应用程序添加中文名称。

然后加入以下几行:

symbian {

addFiles.sources = qml/displayChinese/displayChinese_zh_CN.qm

addFiles.path = .

DEPLOYMENT += addFiles

}

这是为了程序在手机上能够找到需要的qm文件

标记字符串

出现在QML 中的字符串如果需要翻译则可以通过使用 qsTr(), qsTranslate(), QT_TR_NOOP(), 或

QT_TRANSLATE_NOOP() 来进行标记。例如在本例程中:

Text {

text: qsTr("display Chinese character.")

anchors.centerIn: parent

}

使用了 qsTr()。 只有这样做过标记之后,translator才知道“display Chinese character”。是需要被翻译的,以便于后面进行处理

生成中文目标语言的ts文件

首先需要启动命令行,例如如果我们安装的是QtSDK 1.1 beta 则启动下图所示command prompt:

在命令行中进入我们项目的根目录,然后输入以下命令:

lupdate qml/displayChinese/main.qml -ts qml.ts

这样就会生成一个名为qml.ts的文件了.

然后我们在命令行中继续输入:

lupdate displayChinese.pro -ts app.ts

从而生成app.ts文件

翻译

用Qt Linguist打开上一步生成的qml.ts 和 app.ts,将我们翻译的文字输入进去即可,最后保存文件,完成。 然后在命令行中输入:

lconvert app.ts qml.ts -o displayChinese_zh_CN.ts

这是为了将两个ts文件合并起来。最后的效果如图:

其中QtApplicationCaptions就是指的程序呈现在用户面前的名称(我们这里起名叫QML中文应用程序),而

QtPackageNames是指的安装sis时给用户的提示信息中的名称。

生成运行时所需的qm文件

上一步做完之后,我们点选择File 菜单中的release就可以生成qm文件了。

加载翻译文件

要想使得翻译起作用,还需要在Qt程序的main函数中进行设定,例如: QString locale = QLocale::system().name();

QTranslator translator;

bool success = translator.load( QString("displayChinese_") + locale);

app.installTranslator(&translator);

至此,整个示例程序就完成了,下面我们看一下效果。

程序截图

本程序对QML中的字符串进行了多语言处理,并且给应用程序起了一个中文名字,只是没有处理软键,不过原理都是一样的,具体可以参阅《Qt的国际化和本地化》 。

下面是示例程序在N8上截图,当我们的N8语言设置为中文的时候就是第一幅图,当我们的N8语言设置为英文的时候就是第二副图。

当手机语言设定为中文时:

篇三:qtC++调用qml实例

在declarative目录中,有个minehunt范例,实现了在C++中加载QML界面,并用C++来处理QML界面上的鼠标动作.这种思路和传统的GUI相似,感觉比较顺畅.否则运行一个QML,还要使用qmlviewer,上面带一大堆菜单按钮,看着够别扭的.

在main函数中,创建了一个QDeclarativeView实例,这个实例负责显示QML界面.接着创建负责处理业务逻辑的MinehuntGame实例,并在view加载QML文件后,将其设置为引擎的上下文对象.这样就可以直接在QML中使用MinehuntGame类中的属性和方法了.感觉设置上下文后,将上下文类实例与QML界面做了融合,QML中的鼠标点击等事件就可以调用类中方法进行处理,并可以绑定到实例的属性.

#include <QtGui/QApplication>

#include <QtDeclarative/QDeclarativeView>

#include <QtDeclarative/QDeclarativeContext>

#include <QtDeclarative/QDeclarativeEngine>

#include "minehunt.h"

int main(int argc, char *argv[])

{

QApplication app(argc, argv);

QDeclarativeView canvas;

qmlRegisterType<TileData>();//注册TileData类,这个类不需要在QML中实例化. MinehuntGame* game = new MinehuntGame();

canvas.engine()->rootContext()->setContextObject(game);

canvas.setSource(QString("qrc:minehunt.qml"));

QObject::connect(canvas.engine(), SIGNAL(quit()), &app, SLOT(quit())); //QML退出,应用程序也退出

canvas.setGeometry(QRect(100, 100, 450, 450));

canvas.show();

return app.exec();

}

在程序中定义了代表扫雷界面中每个方块的TileData类,用来记录这个方块的状态,如做标记的,被点开的,或有雷的.那么类的实例是如何与QML进行关联同步的呢?在

MinehuntGame中定义了一个属性QDeclarativeListProperty<TileData> tiles(),与_tiles成员绑定,并在类构造时向tiles中填充多个TileData实例.在QML中可以看到如下声明:

Grid {

anchors.horizontalCenter: parent.horizontalCenter

columns: 9; spacing: 1

Repeater {

id: repeater

model: tiles

delegate: Tile {}

}

}

这样就按MinehuntGame实例中的tiles属性进行构造Grid中的元素了,每个TileData实例生成一个Tile组件.在操作Tile组件时又会反过来调用MinehuntGame中的方法.先看看那个表情图标,点击时会重置界面.

Image {

anchors.bottom: field.bottom; anchors.bottomMargin: 15

anchors.right: field.right; anchors.rightMargin: 20

source: isPlaying ? 'MinehuntCore/pics/face-smile.png' ://isPlaying,hasWon是

MinehuntGame实例中的属性,这里做了绑定,如果实例中的属性发生变化,则图标自动变化hasWon ? 'MinehuntCore/pics/face-smile-big.png': 'MinehuntCore/pics/face-sad.png'

MouseArea { anchors.fill: parent; onPressed: reset() }//点击的时候调用

MinehuntGame实例的reset方法,重置雷区,上面也有个关于雷区的绑定,重置后界面自动更新

}

在看看点击雷区的一个方块时的动作触发过程.这里有两个成员对象,index和modelData,都是和模型绑定有关的,index表示当前选中的模型元素索引,modelData表示当前选中子模型对应的元素.在QML中可通过modelData访问TileData元素属性.下面的声明中指定,鼠标左键点击调用MinehuntGame的flip方法,右击调用flag方法.在这两个C++函数中判断是否触雷等逻辑,并修改类实例的状态,通过绑定,界面元素自动更新.

MouseArea {

anchors.fill: parent

acceptedButtons: Qt.LeftButton | Qt.RightButton

onClicked: {

field.clickx = flipable.x//鼠标点击时设置主界面的clickx,clicky属性

field.clicky = flipable.y

var row = Math.floor(index / 9)

var col = index - (Math.floor(index / 9) * 9)

if (mouse.button == undefined || mouse.button == Qt.RightButton) {

flag(row, col)

} else {

f

qml范例详解

lip(row, col)

}

}

onPressAndHold: {

field.clickx = flipable.x

field.clicky = flipable.y

var row = Math.floor(index / 9)

var col = index - (Math.floor(index / 9) * 9)

flag(row, col)

}

}

那么触雷后的例子系统是如何声明的呢?

transitions: Transition {

SequentialAnimation {

ScriptAction {

script: {

var ret = Math.abs(flipable.x - field.clickx)

+ Math.abs(flipable.y - field.clicky);

if (modelData.hasMine && modelData.flipped)

pauseDur = ret * 3

else

pauseDur = ret

}

}

PauseAnimation {

duration: pauseDur

}

RotationAnimation { easing.type: Easing.InOutQuad }

ScriptAction { script: if (modelData.hasMine && modelData.flipped) { expl.explode = true } }//这里指定如果modelData即TileData数据对象属性hasMine或flipped为true,则触发例子效果.

}

}

expl的定义:Explosion { id: expl }.

Explosion的定义:

import QtQuick 1.0

import Qt.labs.particles 1.0

Item {

property bool explode : false

Particles {//定义了一个粒子对象

id: particles

width: 40

height: 40

lifeSpan: 1000

lifeSpanDeviation: 0

source: "pics/star.png"//粒子图像

count: 0

angle: 270

angleDeviation: 360

velocity: 100

velocityDeviation: 20

z: 100

}

states: State { name: "exploding"; when: explode

StateChangeScript {script: particles.burst(200); }

}

}

总结:要向将QML和C++结合起来,实现传统的开发方式,核心的代码就是canvas.engine()->rootContext()->setContextObject(game);这样就可以在QML中调用game实例的属性和函数了.

**************测试如何在C++中获取TextInput元素中输入的内容**************

根据上面的范例分析可以在QML中访问C++中定义的函数或属性,那么C++中怎么获取到QML中的界面内容呢?网上说有三种方法,一种是在C++的插件获取,一种是在C++中解析QML中的元素,最后一种是在C++中定义带参数的槽函数,在QML中的事件中调用这个槽,并将TextInput中的内容作为参数传到C++中.感觉最后一种方法最方便了,因此做了如下测试:

定义QML文件:

import QtQuick 1.0

Rectangle{

id: window

width: 240; height: 250

BorderImage{

y:0

id:button

source:"pics/back.png"

MouseArea{

id:mouseArea

anchors.fill:parent

onClicked:buttonClicked(textInput.text)//按钮点击的时候调用C++中的

buttonClicked槽函数

}

Rectangle{

id:shade

anchors.fill:button; radius: 10; color: "black"; opacity: 0

}

states:State{

本文已影响