QML学习笔记

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来完成

  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_君莫笑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值