QML基础信息

2018-08-09 本文已影响0人虚空寂静

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中的位置路径例如：一般概念下，<videos>为根节点<video>为下一个节点而且为存储结构数据的节点则查询路径为/videos/video，
    XmlRole{name:"title";query:"title/string()"}  //标记属性，属性类型及其代替名称
    ...
}
```
  将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()进行捕捉图像
粒子系统

一般应用

    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  //  表示粒子组是立即变化的，而不是某个时间之后才变化的
  }

QML基础信息

QML 学习

基本概念

类的特点

QML 基础语法

猜你喜欢

热点阅读