on<Property>Changed: 无论何时属性被修改了,都会自动调用
console.log()、console.debug()输出调试信息
Component.onCompleted会在组件创建完成后执行
id值在文件作用域解析,当前文件唯一
内联组件使用Component元素声明,包含了常规顶级组件的所有特性
组件内容:
属性:用于外部访问,修改和绑定;
函数:在内部或外部被调用,包含jsavascript代码
信号:当一个事件发生时用来提示其他对象
属性:
定义格式:[default]property<type><name>[:default]
属性别名:
定义格式:[default]property alias <name>:<alias reference>
函数:
定义格式:function<name>([<parameter name>[,...]]){<body>}
一般写在顶部
不允许在相同类型块中声明两个同名函数
不同于信号,函数参数类型不需要声明
一个函数可以和一个信号关联信号:
定义格式:signal<name>[(<type><parameter name>[,...])]
一般写在顶部
在同一个类型块中不允许声明两个同名信号
信号没有参数时,()可选
自动添加信号处理器:on<SignalName>,需要将信号的第一个字母大写
将信号与其他函数和信号关联:
connect()
在QML中定义的所有函数都被视为Qt槽
disconnect()函数用来移除关联信号
关联另一个信号会产生信号转发效果
在QML中不允许添加或修改JavaScript全局对象的成员
使用import语句导入QML文件,使用as关键字进行限定,每一个js文件限定符必须唯一
使用pragma指明一个特定的文件是一个没有状态的库
无状态的库不能直接访问QML组件实例对象或者属性
一个js文件需要使用定义在其他js文件中的函数,可以通过Qt.include()函数来导入
在启动时运行JavaScript,QML的Component元素提供了一个附加的onCompleted属性可以用来在QML环境完全建立以后切换到启动监本代码的执行
属性赋值和属性绑定
在QML中,使用"属性:值"语法来创建一个属性绑定,值修改时,属性也会自动更新
使用javascript的"属性=值"语法实现的赋值,不会调用QML的属性绑定,当值改变时,属性不会自动更新
在JavaScript中要接收一个QML信号,可以使用信号的connect()函数将它关联到一个js函数上
在QML中,全局对象是一个常量,现有的属性不能够被修改和删除,也不能创建新的属性
无论隐式的或者显式的全局对象的修改都会导致一个异常
在QML中this值是未定义的,要引用任何元素,可以使用其id
动态对象创建
Qt.createComponent():已经存在.qml定义的组件
Qt.createQmlObject():在运行时用
动态创建的对象没有id值
删除不用的对象会得到性能提升
永远不要手动删除通过QML元素动态生成的对象,不要删除不是自己创建的对象
使用destroy()来删除对象
只有动态创建的对象才能被动态删除
QML对象的构造顺序:id->属性声明->信号声明->JavaScript函数->对象属性->子对象->状态->状态切换
私有属性使用两个下划线开头: __
------------------------------------------------------------------QML布局------------------------------------------------------------------------------------
QML定位器:
标准定位器:Column、Row、Grid、Flow
Column:垂直排列项目并使他们不重叠
Row: 水平排列项目并使它们不重叠
Grid: 网状布局
Flow: 当项目超出边界够自动换行
QML重复器:
用来创建大量相似项目
包含一个模型model和一个委托delegate属性
切换:
切换可以使在定位器中添加、移入或者删除项目时具有动画效果
add属性:创建、通过更改父对象加入、项目透明度非0
move属性:删除、通过更改父对象移除、项目透明度为0
基于锚的布局:
QML中所有的可见项目都继承自Item元素,所有的可视项目都可以用锚来布局
只能在父子或兄弟之间使用锚
基于锚的布局不能和绝对的位置定义混合使用
------------------------------------------------------------------QML基本可视元素-------------------------------------------------------------------------
Item常用来对项目进行分组
默认属性:
children:可见的孩子列表
resources:不可见的资源
data:将可见的孩子和不可见的资源自由混合
透明度:
opacity:不透明度 0.0(完全透明) 1.0(完全不透明)
拖拽:
MouseArea的drag分组属性
------------------------------------------------------------------QML事件处理--------------------------------------------------------------------------------
按键处理:
所有基于Item的可见元素都可以通过Keys附加属性来进行按键处理。
通过Item::activeFocus属性进行查询,判断一个项目是否具有活动焦点
一个项目可以通过设置器focus为true来获得焦点
定时器:
QML使用Timer
interval:设置时间间隔,ms,默认是1000ms
repeat:是否重复触发
定时器触发时执行onTriggered()信号处理函数
定时器在运行过程中,属性被更改会导致经过的时间被重置
Loader元素用来动态加载可见的QML组件,可以使文件或者组件对象
------------------------------------------------------------------QML图像、状态和动画--------------------------------------------------------------------
渐变:
在QML中使用Gradient定义渐变
颜色使用GradientStop子项目进行定义
图片:
在QML中的image元素用来在声明式用户界面中显示图片
source属性指定图片url
fillMode:图片填充方式
图片一般是QML用户界面中最站内存的,建议将不是界面的组成部分的图片使用sourceSize设置其大小
边界图片:
BorderImage元素通过缩放或者平铺图片的各个部分来创建超出图片的边界
动态图片:
AnimatedImage可以用来播放一系列帧的图片动画,比如GIF文件
currentFrame:当前帧
frameCount:动画总长度
playing、paused:用来控制开始、暂停和停止动画
缩放、旋转和平移:
scale:项目缩放,<1:缩小显示 >1:放大显示 负值:镜像显示
以transformOrigin属性指定的点为原点进行的
rotation:项目旋转,指定项目顺时针旋转的度数,默认为0
以transformOrigin属性指定的点为原点进行的
可用的Transform类型有3个:Rotation、Scale和Translate,分别用来实现旋转、缩放和平移
坐标轴axis.x、axis.y和axis.z分别代表X轴、Y轴和Z轴3D效果
原点由origin.x和origin.y来指定
状态:
向项目的states属性添加State对象
states包含了该项目的状态列表
当when属性设置得表达式为true时,项目会设置为该状态
动画:
弹动效果:
QML提供Flickable元素,可以将其子项目设置在一个可以拖拽和弹动的界面上,使得子项目的视图可以滚动
翻转效果
Flipable是一个可以明显在其正面和反面之间进行翻转的项目,就像一张卡片
------------------------------------------------------------------QML中的模型/视图--------------------------------------------------------------------
QML中一些视图项目(如ListView、GridView和Repeater等)需要使用数据模型来为其提供数据进行显示
需要一个委托(delegate)组件来为模型中的每一个条目创建一个实例
通过命名委托绑定的数据角色来为委托提供数据
View用来显示数据
model用户来提供数据
委托delegate用来设置数据的显示方式
委托可以使用一个组件来实现
ListModel
简单的具有层次的元素,使用ListElement属性来指定可用角色
XmlListModel
允许从一个XML数据源创建一个模型
通过XmlRole元素来指定一个角色
一般用来显示从网络上获得的数据
VisualItemModel
允许使用QML项目作为模型
这个模型同时包含了数据和委托
可以在委托中访问使用该委托的视图及其属性
ListView:在水平或者垂直列表中排列条目
GridView:在可用空间中将条目排列在一个网格中
PathView:在路径上排列条目
WebView:主要用来对网页内容进行渲染
------------------------------------------------------------------QML和C++混合编程--------------------------------------------------------------------
使用QML的应用需要调用QML运行环境来执行QML文档,这可以通过创建QDeclarativeView或者QDeclarativeEngine来完成