QML基础信息 QML基础信息

QML 学习基本概念
QT C++ 跨平台C++用户界面应用程序框架，一种面向对象框架，支持2D,3D渲染，支持Opengl，xml支持，简称跨平台，封装完善，支持广泛，扩展性强
类的特点
在常规类前面加上Q,表示一下这是QT封装的类型，功能更强大，封装性更好的功能
QML 基础语法

遵循HTML-JavaScript模式
QML 需要根元素
属性赋值： name:value
QML元素直接id访问
元素嵌套式管理，parent进行访问父元素
整个阶段的属性是通过绑定协议进行的，存在于整个生命周期，只有绑定生效，生命周期才能结束
基本元素(后面设置的值会覆盖掉原来设置的默认值)
- Item基础元素对象，Rectangle，Text,Image,MouseArea鼠标区域
- Alias 别名
  property alias aliasname: [Elementid].[property];,
  将内部的属性用别名的方式公开给其他信息访问，基本原理是在于只有作为根的元素才能被访问，类似于根是一种公开的类，别名类似于将内部的私有成员指向到一个公有成员，提供给外部访问的权限
定位器(Row,Column,Grid,Flow)
- Row,Column,Grid，Flow等是作为内置需要排序的元素集合的父容器，才能完成父容器对子容器的布局设置
- anchors指定组件与父组件之间的相对关系
- Flow 流布局，通过layoutDirection的方向设置，在指定方向上进行逐一布局，父容器的大小改变可以直接影响内部元素的重新布局，优先填充完第一顺序第一边界上的内容（等于填完前面的空隙）
- Grid,与Repeater(重复器，定义模型)
  model:[num]设置模型的数量
  [Item]{}设计重复的填充模型
  index该属性会被注入到Repeater的子元素中
元素布局

定位线
- horizontalCenter,verticalCenter,以及Text元素中的baseline是偏移量，其他四个为外边框
- parent表示与父容器属性一致
输入元素
- MouseArea 鼠标输入，点击之类的
- TextInput 单行文本输入（验证器，掩码，显示模式等）
- KeyNavigation(这是个类) ，将该类的一些属性作为附加属性，利用键盘进行元素导航，一般keyNavigation.tab=[elementid]
- TextEdit多行文本框
- Keys按键元素如Keys.onLeftPressed:[elementid].[propoty] 改变类似于事件触发，属性更改
Qt Quick Controls 提供更具备设计开发的工具控件
动画元素
PropertyAnimation（属性动画） - 使用属性值改变播放的动画 NumberAnimation（数字动画） - 使用数字改变播放的动画 ColorAnimation（颜色动画） - 使用颜色改变播放的动画 RotationAnimation（旋转动画） - 使用旋转改变播放的动画 PauseAnimation（停止动画） - 运行暂停一个动画 SequentialAnimation（顺序动画） - 允许动画有序播放 ParallelAnimation（并行动画） - 允许动画同时播放 AnchorAnimation（锚定动画） - 使用锚定改变播放的动画 ParentAnimation（父元素动画） - 使用父对象改变播放的动画 SmotthedAnimation（平滑动画） - 跟踪一个平滑值播放的动画 SpringAnimation（弹簧动画） - 跟踪一个弹簧变换的值播放的动画 PathAnimation（路径动画） - 跟踪一个元素对象的路径的动画 Vector3dAnimation（3D容器动画） - 使用QVector3d值改变播放的动画 PropertyAction（属性动作） - 在播放动画时改变属性 ScriptAction（脚本动作） - 在播放动画时运行脚本

利用[Animation] on target的方式设置的动画，一般需要start()来开始执行，同时还具备stop(),resume(),restart()
状态与过渡

states: [ State { name: [statename] PropertyChanges { target:[id] ,[property]:[value] } }, State { name: [statename] PropertyChanges { target: [id],[property]:[value] } } ]

过渡

transitions: [ Transition { from: "stop"; to: "go" [Animation] { target: [elementid]; properties: "[propertytyep]"; duration:[time] [Animation] { target: [elementid]; properties: "[propertytyep]"; duration:[time] } ]

MVD(Model-View-Delegate)
- 常规设计ListView列表视图，滚动区域，惯性滚动
  - boundsBehavior默认为Flickable.DragAndOvershootBounds视图可以通过它的边界线来拖拽和翻阅，Flickable.StopAtBounds,视图不在可以移动到边界之外，Flickable.DragOverBounds,可以拖拽到边界外，但是不能再边界线上翻阅
  - 使用snapMode属性可以限制一个视图内元素的停止位置。默认行为下是ListView.NoSnap，允许视图内元素在任何位置停止。将snapMode属性设置为ListView.SnapToItem，视图顶部将会与元素对象的顶部对齐排列。使用ListView.SnapOneItem，当鼠标或者触摸释放时，视图将会停止在第一个可见的元素，这种模式对于浏览页面非常便利。
  - 方向Orientation默认设置ListView.Vertical,ListView.Horizontal
  - 还能够设置layoutDirection，LeftToRight,RightToLeft仅此
- 键盘导航与高亮（标记选中）
  - hightlight:[elementid] 视图支持设置一个当前视图中显示代理元素中的高亮代理，但只能实例化一次，并移动到与当前元素相同的位置，等价于选中
- ListView 与高亮同步
  - hightlightRangeMode:ListView.NoHightLightRange,ListView.StrictlyEnforceRange,ListView.ApplyRange
  - 还可以设置hightlightMoveSpeed,hightlightMoveDuration，hightlightResizeSpeed,hightlightResizeDuration等
- 页眉和页脚：突出显示首尾
  - *GridView 网格视图
  - 将元素集合进行二维化显示
  - 利用宽高进行元素控制
  - flow进行流控制GridView.LeftToRight或者GridView.TopToBottom
- Delegate
  - 视图一般处理可视化的切换等一些列对视图自身的管理方案，就是解决一下各个子视图的切换，导航之类的工作
  - 代理管理了某一个个特定数据项（可变）的事件的动作处理
  - 监听模型数据的改变：onAdd和onRemove
  - 形变的代理
- 路径视图
  - 滚动路径方案：PathLine,PathQUad,PathCubic,PathSvg,PathArc,PathCurve等
  - Path属性：起点（startX,startY)，元素的终点一般为最后一个路径元素的终点，或者将closed:true完成起点终点重合
  - PathAttribute{name:"[属性名]",value:[属性值]}
  - PathPercent:{value:[0.0-1.0]}放到路径元素后面，表示一下大概的相对位置（百分比）
- XML模型
  XmlListModel{ id:[id] source:"http://....../xxx.xml"// 网络xml路径 query:"/xxx/xxx/xx"// 节点路径，节点名在xml中的位置路径例如：一般概念下，为根节点
  
  将xml中的数据转化为Model集合，作为QT操作的显示数据源
- 链表分组
  ListView{.... section.property:"[propertyname,model中元素的属性]" section.delegate:[componentid组件id，控制组名的样式] }
- 性能调优：延迟加载
着色器
ShaderEffect可以将自定义的着色器渲染到它的目标元素的形状等特征上
在ShaderEffect里面设置的着色器vertexShader,fragmentShader等都是通过将qt中的opengl代码转换为字符串让这些着色器的处理方案接收
Canvas画板

属于H5中调度JavaScript的画法，需要设置填充，标记画图开始于画图结束等信息

多媒体
- import QtMultimedia 5.0
- MediaPlayer（设置source,id)
- VideoOutput(source:[mediaplayerid])设置输出位置，就是视频流的位置
- ScreenSaver{screenSaverEnabled:false}是否保护屏幕
- player.position:控制播放的位置（视频内容的位置）
- 音效处理：SoundEffect类似MediaPlayer的应用设置
- [Cameraid].imageCapture.capture()进行捕捉图像
【QML基础信息】粒子系统

一般应用

import QtQuick.Particles 2.x ParticleSystem{ ImagePaticle{ source:"[一般相对于本文件而言的路径或者记录在项目文件中的文件路径qrc://....]" colorVariation:[0.0颜色不变化，1.0随机变化] ......//等系列直接影响图片本身的显示结果 } Emitter{ id:[id] anchors.centerIn:parent emitRate:[realnum (单位个，默认每秒10个)] //发射频率 lifeSpan:[num (单位毫秒,默认1000)，生命周期] size:[初始大小] endSize:[结束大小] lifeSpanVariation:[int,在任何一个方向上，粒子寿命都会变化很大(改变差异)。默认0] velocity:[AngleDirection方向] { magnitude:[200]; angleVariation:[360] }//设置当前的粒子发射方向，角度方向(angle)，点方向(x,y),目标方向(targetX,targetY)等 } }

其他使用，将粒子系统的id，分配给Emitter,ImagePaticle的system属性进行关联绑定
控制粒子（细节参数杂，用得时候F1 api查一下）
- 生命周期（Age） - 修改粒子的生命周期
- 吸引（Attractor） - 吸引粒子朝向指定点
- 摩擦（Friction） - 按当前粒子速度成正比减慢运动
- 重力（Gravity） - 设置一个角度的加速度
- 紊流（Turbulence） - 强制基于噪声图像方式的流动
- 漂移（Wander） - 随机变化的轨迹
- 组目标（GroupGoal） - 改变一组粒子群的状态
- 子粒子（SpriteGoal） - 改变一个子粒子的状态
粒子组
- 一般设置粒子发射器以及追踪发射器（TrailEmitter）
- 设置group属性，follow属性进行追踪判断，两个参数直接指向粒子画笔的group属性完成验证统一:groups:['[goupid]'] 引号进行统一组的id
ParticleGroup{ name:'explosion(name)' system:[particleSystemId] } //name与goalState对应设置 GroupGoal { id: [id] system: [particleSystemId] groups: ['[groupid]'] goalState: 'explosion' jump: true//表示粒子组是立即变化的，而不是某个时间之后才变化的 }