落尘飞

公司新项目要用到QML，新开始学习QML语言。各种搞不懂，要慢慢懂。现在开始做一些笔记，查查资料，认真，积极学习QML。------------------------------------------------------------------------------------------------------------------什么是QML？QML：Qt Me

1. 基本的属性类型   QML支持多种类型的属性，QML Basic Types关键字   基本类型包括int、real、bool、string和color    QML属性是“类型安全的”——它们只允许分配一个匹配该属性类型的值。除了附加属性（Attached Properties）以外，属性总是以小写字母开头。2. 属性更改通知    当一个属性改变值时，它会发送一个

QML属性绑定、内联函数和导入的JavaScript文件都运行在一个JavaScript作用域。作用域控制表达式可以访问哪些变量，以及当两个或多个名字冲突时，哪个，哪个变量优先。因为JavaScript的内建作用域机制非常简单，QML对其进行了加强，使其更加自然的适应QML语言的扩展。    1. JavaScript作用域    QML的作用域扩展并没有干扰JavaScript本身的作用

QML编码约定： QML Coding Conventions1. QML对象    QML对象一般使用下面的顺序进行构造：     a. id    b. 属性声明    c. 信号声明    d. JavaScript函数    e. 对象属性    f. 状态    g. 状态切换2. 分组属性    如果使用了一组属性中的多个属性，那么使用组

QML推荐使用属性绑定和现有的QML元素来创建界面。为了允许执行更高级的行为，QML紧密集成了必要的JavaScript代码。QML中提供的JavaScript环境比在网页浏览器中的更严格。在QML中不可以添加或者修改JavaScript全局对象的成员，因为这样做可能会使一个没有经过声明的变量。在QML中会抛出一个异常，所以所有的局部变量都应该明确的声明。除了标准的JavaScript属性，在QM

所有基于Item的对象都有一个默认状态，还可以使用项目的states属性通过添加新的State对象来为其指定附加状态每个状态在一个项目中名称唯一，要改变状态，可以将state属性设置为要改变到的状态对于不是Item派生的对象可以通过StateGroup元素来使用状态1. 创建状态要创建一个状态，可以向项目的states属性添加一个State对象，states属性包含了改项目状态的列

1. QML文件通过QML运行环境进行加载和执行。    这包括声明式用户界面引擎和内建的QML元素与插件模块，它允许对第三方QML元素和模块的访问。    使用QML的应用程序需要调用QML运行环境来执行QML运行环境来执行QML文档，这可以通过创建QDeclarativeview或者QDeclarativeEngine来完成。    另外，声明式用户界面包含了Qt QML View

QML中的全局对象包含了所有JavaScript全局对象 的属性，以及Qt对象、XMLHttpRequest对象、离线存储接口和记录输出函数（console.log()和console.debug()）。对于XMLHttpRequest和离线存储接口的介绍，可以在Qt帮助中参考本节对应的QML Global Object文档。    QML全局Qt对象提供了Qt中非常有用的枚举变量和函数。Qt

QML很容易从C++进行扩展，在Qt Declarative模块的类允许从C++加载和操纵QML组件，而且通过Qt的元素对象系统，QML和C++对象是可以容易通过Qt信号和槽进行通信的。    QML和C++混合编程原因：    a. 使用定义在C++源中的功能（例如，当使用一个C++基于Qt的数据模型，或者调用第三方C++库中的函数）    b. 访问Qt Declarative模块

Qt Quick包含了一组可以使用不停方式呈现数据的标准项目。    视图是一个包含条目集合的可以滚动容器，功能丰富，支持典型应用程序中的多种使用情况，而且还可以进行自定义风格和行为来满足需求。    Qt Quick基本元素提供的标注视图：    a. ListView 在水平或者垂直列表中排列条目    b. GridView 在可用空间中将条目排列在一个网格中    c.

定义画笔Canvas    {        id: canvas;        width: 100; height: 100 //画布需要定义面积            onPaint:    //绘图方法        {        //运用JS绘图        }    }canvas默认是透明的，没有背景色Canvas画图是通过java

1.canvas画矩形  a.无路径画法    ctx.fillRect(200,100,50,40);    //填充    ctx.strokeRect(200,100,50,40);  //描边    注：先用fillRect填充了矩形，用stroke()，不能描边，因为虽然有个矩形，但不存在路径。  b.rect    ctx.rect(300,100,50,40)

1. 弹动效果Flickable    QML中提供了一个Flickable元素，它可以将其子项目设置在一个可以拖曳和弹动的界面上，使得子项目的视图可以滚动。Flickable不会自动剪裁它的内容，如果不是将它用作全屏项目，可以将clip属性设置为true来隐藏超出区域的内容。import QtQuick 2.4//小视图显示大图片，拖动查看图片Flickable { anch

Item的缩放和旋转属性1、缩放：scale：值小于1，将项目缩小显示；大于1，项目放大显示；负值，镜像效果import QtQuick 2.4Rectangle { color: "blue" width: 100; height: 100 Rectangle { color: "green" width: 25; he

Loader元素用来动态加载可见的QML组件，它可以加载一个QML文件（使用source属性）或者一个组件对象（使用sourceComponent属性）。对于拖延组件的创建很是有用的：例如，当一个组件需要在要求的时候被创建，或者由于性能原因一个组件不应该被创建时。Item { width: 200; height: 200 Loader {id: pageLoader}

属性绑定：指定一个属性的值的声明表示方法。通过绑定可以使用一个JavaScript表达式来作为属性的值，其中可以使用其他属性的值，也可以使用在应用程序中可以获取的其他的值。如果其他属性或者数据的值更改了，这个属性的值会自动更新。每当一个属性分配了一个JavaScript表达式时，便会隐含的使用属性绑定。    QML扩展了标准的JavaScript引擎，所以任何可用的JavaScript表达式

部件用大括号括起来，属性格式：属性名 + “:” + 值字符串用双引号，多个属性一行写用分号隔开。属性可以是表达式，可以是依赖于其他部件，如位置属性，大小属性的定义。

定位器是一个容器项，可以用来管理在声明式用户接口中项的位置和大小。定位器与标准Qt部件中的布局管理器很相似。当需要使用常规的布局来管理众多的项时可以使用定位器和重复器。1.   定位器：Qt Quick图形元素集里提供了一组标准的定位器，分别是Column、Row、Grid和Flow。a)    Column：用来垂直排列项目并且使它们不回重叠（需要设置宽度高度）。Spacing属性可

锚（anchors）“锚线”：left、horizontalCenter、right、top、verticalCenter、baseline和bottom这些“锚线”分别对应Item中的anchors.left属性，所有可见项目均继承自Item元素，所以所有的可视项目都可以使用锚来布局锚边距：leftMargin、rightMargin、topMargin和bottomMargin。还

Item：QML中所有可视项目都继承自Item。Item本身没有可视化外观，但它定义了可视化项目的所有属性（如位置x, y属性，大小width, height属性，布局的anchors相关属性以及关于按键的Keys属性等）Item的visible属性，将其设置为false可以隐藏项目，默认为true1.   作为容器Item 也常用来对项目进行分组Item { Im

渐变QML中使用Gradient项目来定义一个渐变GradientStop：    位置，颜色的渐变值：0.0~1.0    位置：position    颜色：color注意：Gradient不可见，需要在可见项目中使用import QtQuick 2.4Rectangle { width: 200 height: 300 gradien

MouseArea：不可见项目，通常和一个课件项目配合使用来为其提供鼠标处理。鼠标处理的逻辑可以包含在一个MouseArea中enabled属性：true/false 设置是否启用鼠标处理，默认为truepressed属性：只读，用户是否按住了鼠标containsMouse属性：当前是否有鼠标在MouseArea上，默认的只有鼠标的一个按键处于按下状态才可以被检测到事件处理器：on

1. 图片 Image    source: 资源URL，可以用所有Qt支持的格式，PNG、JPEG、SVG等    大小：width、height，图片缩放到这个大小。没有指定，自动使用加载的图片的大小   fillMode：允许图片拉伸或者平铺         Image.Stretch //拉伸         Image.PreserveAspectFit //适应高宽

1.  富文本：用来显示一块可编辑的、格式化的文本，与Qt中的QT extEdit很相似，既可以显示纯文本，也可以显示富文本。TextEdit { width: 240 text: "Hello World!" font.family: "Helvetica" font.pointSize: 20 color: "blue" focus: true}2.   焦点： focus—

一个Text项目可以显示纯文本或者富文本1.     可以使用Html标记：text: “HELLO”2.     宽度和高度（width, height）:没有指定，会自己尝试需要多大的空间并依此来设置。3.     换行：wrapMode属性，没有设置，则单行4.     省略：elide属性。宽度不足显示文本，显示为省略号，省略样式：前(Text.ElideLeft)，中(T

Qt 帮助：Keyboard Focus in QMLQML项目获取焦点的属性：focus: trueQML项目在Qt传统的键盘焦点模型上天剑了基于作用域的扩展。1. 按键处理概述用户按下或释放一个按键，处理步骤：1) Qt获取键盘动作并产生一个键盘事件2)  如果包含QDeclaretiveView的Qt不见具有焦点，那么键盘事件会传递给它，否则将进行常规的按键处理3

定时器可以用来将一个动作在指定的时间间隔触发一次或者多次，在QML中使用Timer元素来表示一个定时器。Item { Timer { //interval属性用来设置时间间隔，单位是毫秒，默认值是1000毫秒； //repeat属性设置是否重复触发，如果为false，值触发一次，并将running自动设为false //running属性为t

继承： Item1.   用来显示单行的可编辑的纯文本，与Qt中的QLineEdit 很相似，用来接受一行文本输入2.   滚动显示：autoScroll（true/false）  宽度不够显示时的，滚动3.   输入提示：placeholderText: qsTr(“提示”)4.   输入显示（echoMode）TextInput.Normal  正常显示 TextInp

QML中，可以在对象的属性值上应用动画对象来随着时间逐渐改变它们从而创建动画。动画对象可以从一组内建的动画元素进行创建，可以用来为多种类型的属性值产生动画。动画还可以通过不同的方式进行运用，这依赖于它们所需要的背景。（QML AniMation关键字）1. 动画类型    一个动画创建的方式取决于它所需要的背景    动画的语义的不同依赖于是否要创建以下几点：    a. Rect

1. 添加函数   QML组件中可以定义JavaScript代码的函数，这些函数可以在内部调用，也可以被其他对象调用。    function ([[,...]]) {}与信号不同，函数的参数类型不需要声明，它们默认是variant类型。函数体使用JavaScript进行编写，在其中可以访问参数。import QtQuick 2.4Rectangle { id: re