QML学习文档 - huangchunquanmaker的日志 - 网易博客 太详细全面了，很好很强大【z】

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611 

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611

1. 介绍

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

}

代码是绘制一个蓝色的矩形，宽 200 高 200， import包含一个qt4.7的包

3.基本元素的介绍（自己翻译意思会有出入，敬请见谅）

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

Rectangle 基本的可视化矩形元素

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

GradientStop 定义个颜色，被Gradient使用

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

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

TextInput 显示可编辑为文本

RegExpValidator 验证字符串正则表达式

TextEdit 显示多行可编辑文本

基本的交互项

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

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

状态

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

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

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

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

AnchorChanges 在一个状态中改变anchors

动画和变换

Behavior 默认的属性变换动画

SequentialAnimation 对定义的动画串行播放

ParallelAnimation 对定义的动画并行播放

PropertyAnimation 属性变换动画

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

工作中的数据

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

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 定义一个三次贝塞尔曲线的轨迹

定位器

实用

变换

}

位置是：0,0宽高分别是200，颜色是红色

}

GradientStop { ; color: "yellow" }

GradientStop { ; color: "green" }

}

}

当图片进行缩放的时候

D．5 将根据属性horzontalTileMode 和 verticalTileMode 进行缩放

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

}

width: animation.width; height: animation.height + 8

AnimatedImage { id: animation; source: "animation.gif" }

x: (animation.width - width) * animation.currentFrame / frames

}

}

}

}

IntValidator{id: intval; bottom: 10; top: 100;}

}

DoubleValidator{id: intval; decimals: 4; bottom: 10; top: 100; notation: DoubleValidator.StandardNotation}

}

表示 开始位置必须是一个大写或小写字母

RegExpValidator{id: intval; regExp:/^[a-zA-Z]{1}[0-1]{0,2}[a-z]{1,3}$/;}

}

text: "<b>Hello</b> <i>World!</i>"

}

主要是用来判断鼠标事件的区域

}

显示一个200x200的框，框中显示图片上200x200的部分

contentWidth: image.width; contentHeight: image.height

Image { id: image; source: "../Images/need.png" }

}

包含两个面，一个前面，一个后面，实现一个控件前后的翻转效果，并且在后面可以添加一些控制

origin.x: flipable.width/2; origin.y: flipable.height/2

axis.x: 0; axis.y: 1; axis.z: 0 // rotate around y-axis

PropertyChanges { target: flipable; angle: 180 }

NumberAnimation { properties: "angle"; duration: 1000 }

onClicked: flipable.flipped = !flipable.flipped

}

onClicked: myRect.state == 'clicked' ? myRect.state = "" : myRect.state = 'clicked';

PropertyChanges { target: myRect; color: "red" }

}

MouseArea { anchors.fill: parent; onClicked: myText.state = 'myState' }

}

在状态中可以对脚本中的函数进行调用

// Sc.js

{

return "blue";

}

// test.qml

}

ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }

MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }

}

Rectangle { id: myRect; width: 50; height: 50; color: "red" }

MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }

}

}

串行播放多个动画

NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }

NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }

}

NumberAnimation {target:rect; properties:"x"; to: 50; duration: 1000 }

NumberAnimation {target:rect; properties:"y"; to: 50; duration: 1000 }

}

PropertyAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }

}

NumberAnimation on x { to: 50; duration: 1000 }

}

颜色的过度

ColorAnimation on color { to: "yellow"; duration: 1000 }

}

width: 150; height: 100; anchors.centerIn: parent

name: "rotated"; PropertyChanges { target: rect; rotation: 180 }

RotationAnimation { duration: 1000; direction: RotationAnimation.Counterclockwise }

MouseArea { anchors.fill: parent; onClicked: rect.state = "rotated" }

}

ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }

NumberAnimation { properties: "x,y"; duration: 1000 }

MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }

}

AnchorChanges { target: myRect; anchors.right: container.right }

// smoothly reanchor myRect and move into new position

Component.onCompleted: container.state = "reanchored"

}

延迟效果

NumberAnimation {target: myRect;to: 50; duration: 1000; properties: "x"; }

NumberAnimation {target: myRect; to: 50; duration: 1000; properties: "y"; }

}

平滑过度

Behavior on x { SmoothedAnimation { velocity: 200 } }

Behavior on y { SmoothedAnimation { velocity: 200 } }

}

平滑的过度过程，在动画结束的时候有种弹性的效果

Behavior on x { SpringAnimation { spring: 2; damping: 0.2 } }

Behavior on y { SpringAnimation { spring: 2; damping: 0.2 } }

}

主要是在动画过程中直接的改变一个属性

PropertyAction { target: theImage; property: "smooth"; value: true }

}

在动画过程中嵌入脚本的调用

}

PropertyChanges { target: rect; x: 50; y: 50 }

NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }

}

TextEdit { id: myTextField; text: "Please type here..." }

Binding { target: app; property: "enteredText"; value: myTextField.text }

直接看效果

}

把可视化图元添加到链表试图

Rectangle { height: 30; width: 80; color: "red" }

Rectangle { height: 30; width: 80; color: "green" }

Rectangle { height: 30; width: 80; color: "blue" }

}

看下面效果

}

具体请参考

declarative/modelviews/package

看效果

}

看例子

PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }

PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }

}

具体的看运行的例子

}

还要看

可以直接针对一些属性进行改变

PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }

PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }

}

}

横向排列

Rectangle { color: "red"; width: 50; height: 50 }

Rectangle { color: "green"; width: 20; height: 50 }

Rectangle { color: "blue"; width: 50; height: 20 }

}

Rectangle { color: "red"; width: 50; height: 50 }

Rectangle { color: "green"; width: 20; height: 50 }

Rectangle { color: "blue"; width: 50; height: 20 }

}

Rectangle { color: "red"; width: 50; height: 50 }

Rectangle { color: "green"; width: 20; height: 50 }

Rectangle { color: "blue"; width: 50; height: 20 }

Rectangle { color: "cyan"; width: 50; height: 50 }

Rectangle { color: "magenta"; width: 10; height: 10 }

}

Rectangle { color: "red"; width: 50; height: 50 }

Rectangle { color: "green"; width: 20; height: 50 }

Rectangle { color: "blue"; width: 50; height: 20 }

Rectangle { color: "cyan"; width: 50; height: 50 }

Rectangle { color: "magenta"; width: 10; height: 10 }

}

Multiple connections to the same signal are required

有多个连接要连接到相同的信号时

Creating connections outside the scope of the signal sender

创建的连接在范围之外

Connecting to targets not defined in QML

}

}

onTriggered: time.text = Date().toString() // 使用javascript获取系统时间

}

view.setSource(QUrl::fromLocalFile("MyRect.qml"));

QDeclarativeItem *item = view.rootObject()->findChild<QDeclarativeItem*>("myRect");

item->setProperty("color", QColor(Qt::yellow));

使用它可以把操作放到一个新的线程中，使得它在后台运行而不影响主GUI

具体可以看QML中它的文档

他可以创建很多相似的组件，QML中还有几个例子

}

具体看效果和文档

SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }

}

载入一种字体，可以是网络上的，也可以是本地的

FontLoader { id: fixedFont; name: "Courier" }

Text { text: "Fixed-size font"; font.family: fixedFont.name }

Text { text: "Fancy font"; font.family: webFont.name }

}

不清楚

对缩放的控制

transform: Scale { origin.x: 10; origin.y: 10; xScale: 3}

}

transform: Rotation { origin.x: 25; origin.y: 25; angle: 45}

}

}

---------------------------------------------------

有一部分是还没有完成的东西，因此官方还没有提供文档

相关文章

页脚

网易公司版权所有 ©1997-2011

引文来源  QML学习文档 - huangchunquanmaker的日志 - 网易博客

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611 

欢迎加入我们的QQ群，无论你是否工作，学生，只要有c / vc / c++ 编程经验，就来吧！158427611