QML基础信息

QML 学习

基本概念

QT C++ 跨平台C++用户界面应用程序框架，一种面向对象框架，支持2D,3D渲染，支持Opengl，xml支持，简称跨平台，封装完善，支持广泛，扩展性强

类的特点

在常规类前面加上Q,表示一下这是QT封装的类型，功能更强大，封装性更好的功能

QML 基础语法

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

9. 元素布局

   
   
   定位线
   • horizontalCenter,verticalCenter,以及Text元素中的baseline是偏移量，其他四个为外边框
   • parent表示与父容器属性一致
10. 输入元素
    • MouseArea 鼠标输入，点击之类的
    • TextInput 单行文本输入（验证器，掩码，显示模式等）
    • KeyNavigation(这是个类) ，将该类的一些属性作为附加属性，利用键盘进行元素导航，一般keyNavigation.tab=[elementid]
    • TextEdit多行文本框
    • Keys按键元素如Keys.onLeftPressed:[elementid].[propoty] 改变类似于事件触发，属性更改
11. Qt Quick Controls 提供更具备设计开发的工具控件
12. 动画元素

    PropertyAnimation（属性动画） - 使用属性值改变播放的动画
    NumberAnimation（数字动画） - 使用数字改变播放的动画
    ColorAnimation（颜色动画） - 使用颜色改变播放的动画
    RotationAnimation（旋转动画） - 使用旋转改变播放的动画
    PauseAnimation（停止动画） - 运行暂停一个动画
    SequentialAnimation（顺序动画） - 允许动画有序播放
    ParallelAnimation（并行动画） - 允许动画同时播放
    AnchorAnimation（锚定动画） - 使用锚定改变播放的动画
    ParentAnimation（父元素动画） - 使用父对象改变播放的动画
    SmotthedAnimation（平滑动画） - 跟踪一个平滑值播放的动画
    SpringAnimation（弹簧动画） - 跟踪一个弹簧变换的值播放的动画
    PathAnimation（路径动画） - 跟踪一个元素对象的路径的动画
    Vector3dAnimation（3D容器动画） - 使用QVector3d值改变播放的动画
    PropertyAction（属性动作） - 在播放动画时改变属性
    ScriptAction（脚本动作） - 在播放动画时运行脚本
    

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

         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]
        }
    ]

14. 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，控制组名的样式]  
            }
      

    • 性能调优：延迟加载

15. 着色器

16. ShaderEffect可以将自定义的着色器渲染到它的目标元素的形状等特征上

17. 在ShaderEffect里面设置的着色器vertexShader,fragmentShader等都是通过将qt中的opengl代码转换为字符串让这些着色器的处理方案接收

18. Canvas画板

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

17. 多媒体

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

18. 粒子系统

• 一般应用

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