QML 學習
基本概念
QT C++ 跨平臺C++用戶界面應用程序框架，一種面向?qū)ο罂蚣埽С?D,3D渲染，支持Opengl，xml支持，簡稱跨平臺，封裝完善，支持廣泛，擴展性強
類的特點
在常規(guī)類前面加上Q,表示一下這是QT封裝的類型，功能更強大，封裝性更好的功能
QML 基礎語法
- 遵循HTML-JavaScript模式
- QML 需要根元素
- 屬性賦值： name:value
- QML元素直接id訪問
- 元素嵌套式管理，parent進行訪問父元素
- 整個階段的屬性是通過綁定協(xié)議進行的，存在于整個生命周期，只有綁定生效，生命周期才能結束
- 基本元素(后面設置的值會覆蓋掉原來設置的默認值)
- Item基礎元素對象，Rectangle，Text,Image,MouseArea鼠標區(qū)域
- Alias 別名
property alias aliasname: [Elementid].[property];,
將內(nèi)部的屬性用別名的方式公開給其他信息訪問，基本原理是在于只有作為根的元素才能被訪問，類似于根是一種公開的類，別名類似于將內(nèi)部的私有成員指向到一個公有成員，提供給外部訪問的權限
- 定位器(Row,Column,Grid,Flow)
- Row,Column,Grid，F(xiàn)low等是作為內(nèi)置需要排序的元素集合的父容器，才能完成父容器對子容器的布局設置
- anchors指定組件與父組件之間的相對關系
- Flow 流布局，通過layoutDirection的方向設置，在指定方向上進行逐一布局，父容器的大小改變可以直接影響內(nèi)部元素的重新布局，優(yōu)先填充完第一順序第一邊界上的內(nèi)容（等于填完前面的空隙）
- Grid,與Repeater(重復器，定義模型)
model:[num]設置模型的數(shù)量
[Item]{}設計重復的填充模型
index該屬性會被注入到Repeater的子元素中
-
元素布局
定位線- horizontalCenter,verticalCenter,以及Text元素中的baseline是偏移量，其他四個為外邊框
- parent表示與父容器屬性一致
- 輸入元素
-
MouseArea鼠標輸入，點擊之類的 -
TextInput單行文本輸入（驗證器，掩碼，顯示模式等） -
KeyNavigation(這是個類)，將該類的一些屬性作為附加屬性，利用鍵盤進行元素導航，一般keyNavigation.tab=[elementid] -
TextEdit多行文本框 -
Keys按鍵元素如Keys.onLeftPressed:[elementid].[propoty] 改變類似于事件觸發(fā)，屬性更改
-
- Qt Quick Controls 提供更具備設計開發(fā)的工具控件
- 動畫元素
利用[Animation] on target的方式設置的動畫，一般需要start()來開始執(zhí)行，同時還具備stop(),resume(),restart()PropertyAnimation（屬性動畫） - 使用屬性值改變播放的動畫 NumberAnimation（數(shù)字動畫） - 使用數(shù)字改變播放的動畫 ColorAnimation（顏色動畫） - 使用顏色改變播放的動畫 RotationAnimation（旋轉(zhuǎn)動畫） - 使用旋轉(zhuǎn)改變播放的動畫 PauseAnimation（停止動畫） - 運行暫停一個動畫 SequentialAnimation（順序動畫） - 允許動畫有序播放 ParallelAnimation（并行動畫） - 允許動畫同時播放 AnchorAnimation（錨定動畫） - 使用錨定改變播放的動畫 ParentAnimation（父元素動畫） - 使用父對象改變播放的動畫 SmotthedAnimation（平滑動畫） - 跟蹤一個平滑值播放的動畫 SpringAnimation（彈簧動畫） - 跟蹤一個彈簧變換的值播放的動畫 PathAnimation（路徑動畫） - 跟蹤一個元素對象的路徑的動畫 Vector3dAnimation（3D容器動畫） - 使用QVector3d值改變播放的動畫 PropertyAction（屬性動作） - 在播放動畫時改變屬性 ScriptAction（腳本動作） - 在播放動畫時運行腳本 - 狀態(tài)與過渡
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)
- 常規(guī)設計ListView列表視圖，滾動區(qū)域，慣性滾動
- boundsBehavior默認為Flickable.DragAndOvershootBounds視圖可以通過它的邊界線來拖拽和翻閱，F(xiàn)lickable.StopAtBounds,視圖不在可以移動到邊界之外，F(xiàn)lickable.DragOverBounds,可以拖拽到邊界外，但是不能再邊界線上翻閱
- 使用snapMode屬性可以限制一個視圖內(nèi)元素的停止位置。默認行為下是ListView.NoSnap，允許視圖內(nèi)元素在任何位置停止。將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 網(wǎng)格視圖
- 將元素集合進行二維化顯示
- 利用寬高進行元素控制
- flow進行流控制GridView.LeftToRight或者GridView.TopToBottom
- Delegate
- 視圖一般處理可視化的切換等一些列對視圖自身的管理方案，就是解決一下各個子視圖的切換，導航之類的工作
- 代理管理了某一個個特定數(shù)據(jù)項（可變）的事件的動作處理
- 監(jiān)聽模型數(shù)據(jù)的改變：onAdd和onRemove
- 形變的代理
- 路徑視圖
- 滾動路徑方案：PathLine,PathQUad,PathCubic,PathSvg,PathArc,PathCurve等
- Path屬性：起點（startX,startY)，元素的終點一般為最后一個路徑元素的終點，或者將closed:true完成起點終點重合
- PathAttribute{name:"[屬性名]",value:[屬性值]}
- PathPercent:{value:[0.0-1.0]}放到路徑元素后面，表示一下大概的相對位置（百分比）
- XML模型
將xml中的數(shù)據(jù)轉(zhuǎn)化為Model集合，作為QT操作的顯示數(shù)據(jù)源XmlListModel{ id:[id] source:"http://....../xxx.xml" // 網(wǎng)絡xml路徑 query:"/xxx/xxx/xx" // 節(jié)點路徑，節(jié)點名在xml中的位置路徑例如：一般概念下，<videos>為根節(jié)點<video>為下一個節(jié)點而且為存儲結構數(shù)據(jù)的節(jié)點則查詢路徑為/videos/video， XmlRole{name:"title";query:"title/string()"} //標記屬性，屬性類型及其代替名稱 ... } - 鏈表分組
ListView{.... section.property:"[propertyname,model中元素的屬性]" section.delegate:[componentid組件id，控制組名的樣式] } - 性能調(diào)優(yōu)：延遲加載
- 常規(guī)設計ListView列表視圖，滾動區(qū)域，慣性滾動
著色器
ShaderEffect可以將自定義的著色器渲染到它的目標元素的形狀等特征上
在ShaderEffect里面設置的著色器vertexShader,fragmentShader等都是通過將qt中的opengl代碼轉(zhuǎn)換為字符串讓這些著色器的處理方案接收
Canvas畫板
屬于H5中調(diào)度JavaScript的畫法，需要設置填充，標記畫圖開始于畫圖結束等信息
-
多媒體
- import QtMultimedia 5.0
- MediaPlayer（設置source,id)
- VideoOutput(source:[mediaplayerid])設置輸出位置，就是視頻流的位置
- ScreenSaver{screenSaverEnabled:false}是否保護屏幕
- player.position:控制播放的位置（視頻內(nèi)容的位置）
- 音效處理：SoundEffect類似MediaPlayer的應用設置
- [Cameraid].imageCapture.capture()進行捕捉圖像
粒子系統(tǒng)
- 一般應用
import QtQuick.Particles 2.x
ParticleSystem{
ImagePaticle{
source:"[一般相對于本文件而言的路徑或者記錄在項目文件中的文件路徑qrc://....]"
colorVariation:[0.0顏色不變化，1.0隨機變化]
......//等系列直接影響圖片本身的顯示結果
}
Emitter{
id:[id]
anchors.centerIn:parent
emitRate:[realnum (單位個，默認每秒10個)] //發(fā)射頻率
lifeSpan:[num (單位毫秒,默認1000)，生命周期]
size:[初始大小]
endSize:[結束大小]
lifeSpanVariation:[int,在任何一個方向上，粒子壽命都會變化很大(改變差異)。默認0]
velocity:[AngleDirection方向]
{
magnitude:[200];angleVariation:[360]
} // 設置當前的粒子發(fā)射方向，角度方向(angle)，點方向(x,y),目標方向(targetX,targetY)等
}
}
- 其他使用，將粒子系統(tǒng)的id，分配給Emitter,ImagePaticle的system屬性進行關聯(lián)綁定
- 控制粒子（細節(jié)參數(shù)雜，用得時候F1 api查一下）
- 生命周期（Age） - 修改粒子的生命周期
- 吸引（Attractor） - 吸引粒子朝向指定點
- 摩擦（Friction） - 按當前粒子速度成正比減慢運動
- 重力（Gravity） - 設置一個角度的加速度
- 紊流（Turbulence） - 強制基于噪聲圖像方式的流動
- 漂移（Wander） - 隨機變化的軌跡
- 組目標（GroupGoal） - 改變一組粒子群的狀態(tài)
- 子粒子（SpriteGoal） - 改變一個子粒子的狀態(tài)
- 粒子組
- 一般設置粒子發(fā)射器以及追蹤發(fā)射器（TrailEmitter）
- 設置group屬性，follow屬性進行追蹤判斷，兩個參數(shù)直接指向粒子畫筆的group屬性完成驗證統(tǒng)一:
groups:['[goupid]']引號進行統(tǒng)一組的id
ParticleGroup{ name:'explosion(name)' system:[particleSystemId] } //name與goalState對應設置 GroupGoal { id: [id] system: [particleSystemId] groups: ['[groupid]'] goalState: 'explosion' jump: true // 表示粒子組是立即變化的，而不是某個時間之后才變化的 }
