參考網址： http://www.w3school.com.cn/jsref/jsref_random.asp https://www.w3.org/TR/css-color-3/#svg-color qml描述了使用者界面元素的形狀和行為。qml中子元素繼承了父元素的坐标系統。
import QtQuick 2.8 Rectangle { id: root width: 120; height: 240 color: "#D8D8D8" Image { id: rocket x: ( parent.width - width)/2; y: 40 source: 'assets/rocket.png' } Text { y: rocket.y + rocket.height + 20 width: root.width horizontalAlignment: Text.AlignHCenter text: 'Rocket' } } import：聲明導入一個指定子產品版本 每一個qml檔案都需要一個根元素: Rectangle{},其辨別符id：可是任意辨別符 元素擁有屬性，其屬性值都是使用name:value的格式來指派 qml元素可嵌套，子元素可以受用parent來通路父元素 qml元素屬性： 一個元素屬性有一個類型定義，且需要一個初始值。 1.id:在qml檔案中用來引用元素，id是一個辨別符，一個id在一個qml文檔中是唯一的。 2.屬性能設定一個值，且此值依賴于其類型。未指派的屬性會有預設值 3.屬性綁定：一個屬性可以依賴其他屬性，當其他屬性改變的時候，此屬性的值也會變化。 4.添加自定義的屬性需要使用property修飾符，然後跟上屬性的類型，屬性名和屬性的值。屬性名不能重複 使用default修飾的屬性為預設屬性 5.屬性别名：alias 屬性别名不需要類型，其使用引用的屬性類型或對象類型 6.text屬性 7.按組配置設定的屬性L：一個屬性需要結構化的 8.屬異姓是元素自身的附加屬性 9.對于每個元素都可以提供一個信号操作。
qml文檔提供動态作用域機制，後加載的文檔會覆寫之前加載的文檔的元素id号。這樣可引用未被覆寫的元素id。 類似于全局變量。 qml的屬性綁定與js的指派是不同的，綁定是一個協定存在整個生命周期，js的指派隻産生一次效果 qml基本元素：
| 基本原色（Item） | |
| 這些元素在可視化元素中都是可用的，且工作方式相同，一般用作其他元素的容器 | |
| 分組 | 屬性 |
| Geometry(幾何屬性) | x,y(坐标)定義元素左上角的位置 width元素寬 height元素長 z 堆疊次序，元素之間的重疊順序， z值大的元素顯示在上面 |
| Layouthandling(布局操作) | anchors(錨定) left right top bottom (vertical center) (horizontal center) margin間距 |
| Key handling(按鍵操作) | key(按鍵) keyNavigation(按鍵定位) focus(焦點) |
| Transformation(轉換) | scale 縮放 rotate 旋轉 transformOrigin旋轉基點 |
| visual可視化 | opacity 不透明度(0-1) visible 是否可見 clip裁剪，限制元素邊界繪制 smooth平滑，提高渲染品質 |
| state definition 狀态定義 | states 狀态屬性清單 提供元素目前支援的狀态清單 transition(轉變)定義狀态轉變動畫 |
| 矩形框元素(Rectangle) | |
| 是基本元素的寬展，支援顔色填充，邊界定義 | |
| color | 填充顔色 |
| gradient | 漸變色(一個漸變色由一系列梯度顔色定義)，每一個值定義了一個位置和對應顔色，0表示頂，1表示底部GradientStop表示一個傾斜點 |
| 顔色的命名來自svg顔色名稱： https://www.w3.org/TR/css-color-3/#svg-color 也可使用rgb字元串(#ff44444) | |
| border.color | 邊界顔色 |
| border.width | 邊界寬度 |
| radius | 半徑，用來建立圓角矩形 |
| 矩形示例：Rectangle { id : rect1 x :0; y :0 width : 96; height : 96 gradient : Gradient { GradientStop { position : 0.0; color : "red" } GradientStop { position : 0.5; color : "green" } GradientStop { position : 1.0; color : "blue" } } radius : 48 opacity : 0.5 // color: "blue" border.width : 4 border.color : "yellow" } | |
| 文本元素(Text) | |
| text元素隻顯示文本，不渲染背景。背景是透明的。文本的初始寬度與高度依賴于文本字元和字型，初始寬度0。元素間的對齊要使用錨定 | |
| text | 字元串類型的文本屬性 |
| font | 字型屬性組，字型字号，加粗等字型相關屬性都在此屬性組 |
| style/styleColor | 文字外框效果，浮雕或者凹陷鮮果，若文字 |
| elide | 如果文字過長可以使用省略号，此屬性運作設定省略号的位置，文本左，中，右 |
| wrapMode | 文字換行方式顯示所有文本，(此屬性隻在設定了寬度後才生效) |
| horizontalAlignment verticalAlignment | 文本在元素内部的邊界對齊 |
| Text示例：Text { id : tx1 x :0; y :100 text : qsTr ( "the qml simple writed by gaoy" ) color : "#000000" font.family : "Ubuntu" font.pixelSize : 50 elide : Text .ElideMiddle style : Text .Sunken styleColor : "red" verticalAlignment : Text .AlignBottom } | |
| 圖像元素(Image) | |
| 圖像元素可以顯示不同格式圖像png jpg gif等。圖像元素可以使用PreserveAspectCrop來避免裁剪圖像資料被渲染到圖像邊界外。預設此clip是關閉的需要clip:true開啟 | |
| source | 圖像檔案的來源，連結資訊，rul可以是本地路徑也可以是網絡連接配接 |
| fillmode | 控制圖像大小調整 |
| 圖像示例 Image { x :80; y :200 source : "rocket.png" height : 118/2 width : 48 fillMode : Image .PreserveAspectCrop clip : true } | |
| 滑鼠區域元素(MouseArea) | |
| 是矩形不可視元素，可以通過此區域捕捉滑鼠事件。 | |
| Onclicked | 指定滑鼠點選動作 |
qml元件： 元件就是一個可重複使用的元素。 元件建立方式這裡介紹一個：一個以檔案為基礎的元件在檔案中建立了qml元素，并且将檔案以元素類型來命名。之後就可像基本元素那樣使用此元件。qml元件類似與面向對象的類的定義，在定義元件的時候需要注意的是， 隻有根級目錄的屬性才能夠被其他檔案所通路;另外可以使用alias别名将内部屬性導出；另外如果元件的qml檔案與main.qml在同一目錄下可直接調用此元件，否則需要使用該元件的檔案中使用import來導入此元件聲明。 使用示例： 調用示例：
簡單轉換 qml元素轉換： 平移:x,y坐标屬性完成 旋轉:改變rotation(0-360) 縮放:改變scale來完成 scale<1 縮放 scale>1放大 ClickableMage元素：包含滑鼠區域的圖像元素 為了獲得較好的顯示效果，建議在縮放的時候使用已經縮放的圖檔進心替換。否則過量的放大活導緻圖檔模糊 示例：
定位元素 定位器：qml中用于放置元素對象的元素，qml提供Row Column Grid Flow等定位器 色塊：代碼都如下不過是對顔色值進行了修改 Rectangle{ width:48; height: 48 color: "#ea7025" border.color: Qt.lighter( color) // Qt.lighter(color)是基于填充色的邊界高亮 } column：列定位 是将加入定位元素中的元素按照加入順序進行 列排列顯示而已。下圖代碼部分的DarkCube就是圖中的黑框，不過就是一個底色設定黑色的矩形而已
Row：行定位 是将加入定位元素中的元素按照加入順序進行 行排列顯示而已。下圖代碼部分的DarkCube就是圖中的黑框，不過就是一個底色設定黑色的矩形而已
Grid：網格定位 是将加入定位元素中的元素按照加入順序以及确定的行數和列數進行 網格排列顯示而已。下圖代碼部分的DarkCube就是圖中的黑框，不過就是一個底色設定黑色的矩形而已
Flow：流定位 是将加入定位元素中的元素按照加入順序以及确定的行數和列數進行 流排列顯示而已。下圖代碼部分的DarkCube就是圖中的黑框，不過就是一個底色設定黑色的矩形而已。在下圖中 layoutDirection決定了對象加入的方向，其可取值，下圖也有提示
Repeater重複元素與定位器一起使用：重複元素與for循環或者疊代器是一緻的。 下圖中定義了一個自定義的顔色數組，此處對于此顔色數組的首字元不能大寫，大寫的話報錯應該是重名 重複元素Repeater在建立的時候需要制定model的個數。下面關于随機色塊的選取還是用了js的Math.random()函數此函數的具體 使用檢視文頭的網址即可
布局元素 qml使用錨定對元素進行布局。anchoring是基礎元素對象的基本屬性，可被所有可視化qml元素使用。錨定是相對布局。元素的6條錨定線如下圖：
元素的6條錨定線：top頂，bottom底 left 左 right右 horizontalCenter水準中 verticalCenter垂直中；在文本元素中隻有一條錨定基線baseline 。 top頂，bottom底 left 左 right右也叫邊距；horizontalCenter水準中 verticalCenter垂直中，基線baseline也叫偏移值。
| 元素填充父元素 | anchors.fill:parent |
| 元素左對齊父元素 | anchors.left:parent.left |
| 元素左邊對齊父元素右邊 | anchors.left:parent.right |
| 元素中間對齊 | anchors.horizontalCenter:parent.horizontalCenter |
| 元素在父元素内居中 | anchors.centerIn:parent.centerIn |
| 元素水準居中對齊父元素，并向後偏移12像素；垂直方向居中 | anchors.horizontalCenter:parent.horizontalCenter anchors.horizontalCenteroffset:12 anchors.verticalCenter:parent.verticalCenter |
輸入元素 TextInput文本輸入 僅僅允許使用者輸入一行文本，此元素支援使用正規表達式來限制輸入。示例： TLineEdit.qml
另外對于文本輸入元素的焦點切換： 對于焦點的切換在直接使用TextInput的時候可以直接使用 KeyNavigation.tab: 其他的TextInput 。 在對TextInput進行了二次封裝後，在單純使用 KeyNavigation.tab: 其他的TextInput 已經不能完成焦點切換。這時候需要向上圖一樣建立焦點區域FocusScope. 焦點區域：如果焦點區域接收到焦點，則此焦點區域中的最後一個使用(focus:true)子元素接收焦點。詳細使用樣例如上圖 TextEdit文本編輯 不再支援文本輸入的正規表達式限制，但是支援了已繪制文本大小查詢(paintedHeight,paintedWidth,),同樣可以使用焦點區域來切換焦點，其與TextInput輸入非常類似，示例如下，不再詳述
按鍵元素 就是在qml對鍵盤的某些按鍵的響應，具體不描述，見執行個體：
上述代碼實作，點選 up,down,left right 可以上，下，左，右平移方塊 使用+ -可以實作方塊縮放，使用shift ctrl實作旋轉。