文章鋼要：

1、qml基礎知識

2、qml語言技巧

一、QML basic types

QML Language提供的基礎類型：int ，bool，string，double，real，var，url，enumeration，list，color

QML Modules（QtQuick）提供的基礎類型：date， point ，rect，size，Qt，QtObject，Component，Connections，Bingding

導出到QML環(huán)境中的C++類型。

注意事項：

1、list類型必須和object類型關(guān)聯(lián)使用

2、enumeration必須 must be defined by a registered QML object type。

3、id屬性首字符必須是小寫字母或下劃線

4、列表屬性(list)是包含在【】內(nèi)，以逗號分隔的多個元素集合。和js的數(shù)組類似。

5、信號處理器on<Signal>形式：onClicked:{ Qt.quit(); }

6、附加屬性如：item{  Keys.enabled:false ;} ,Component.onCompleted:console.log("hello Qt");

二、QML入門

程序框架一：QQmlApplicationEngine 搭配 Window，QML有控制權(quán)

main（int argc,char *argv[]）{
　　QGuiApplication app(argc,argv);
　　QQmlApplicationEngine engine;
　　engine.load(QUrl(QStringListeral("qrc://main.qml")));
　　return app.exec();//主循環(huán)
}

import QtQuick.Window 2.1
Window{
  width:360;
　height:240;
  MouseArea{
    anchors.fill:parent;
    onClicked:{  Qt.quick(); }
  }  
   Text{
        text:"Hello Qt Quick";
        anchors.centerIn:parent;
    }
}

程序框架二：Item作為QML根對象 (QQuickView 搭配 Item )，c++有控制權(quán)

main(int argc, char * argv[]){
      QGuiApplication app(argc,argv);
      QQuickView viewer;
      viewer.setSource(QUrl("qrc://main.qml"));
      viewer.show();
      return app.exec();
}    

Window用于創(chuàng)建一個與OS相關(guān)的頂層窗口，text，Rectangle，image都是在里面表演的演員。

Rectangle :color和gradient同時設置，那么gradient生效。如果設置color的屬性為transparent，那么可以達到只繪制邊框不填充的效果。

　　　　　　border.width設置邊框的寬度，border.color指定邊框顏色 

color：“#RRGGBB”，“#AARRGGBB”，Qt.rgba(0.8, 0.6, 0.4, 1.0)、Qt.lighter()

　　類型參考：https://doc.qt.io/qt-5/qml-color.html

item: 自帶通用屬性x，y，width，height，anchoring，button處理

 　　本身不可見，可以用它來分組其他可視圖元

anchors錨布局：top，bottom，verticalCenter，horizontalCenter，baseline

響應按鍵：通過附加屬性Keys來處理按鍵。特定按鍵信號returnPressed，普通信號pressed和released

　　　　Keys.enabled:true

　　　　keys.onEscapePressed:Qt.quit();

　　　　Keys.onBackPressed:Qt.quit();

　　　　keys.onPressed:{

　　　　event參數(shù)：KeyEvent類型。

　　　　event.key :case  Qt.Key_0, Qt.Key_1,,Qt.Key_2,,Qt.Key_3,,Qt.Key_4,,Qt.Key_A。等}

Text：有font，text，color，elide（省略），textFormat，wrapMode，style等屬性

Button：activeFocusOnPress屬性指定按鈕被按下時獲取焦點。

ButtonStyle：有background（Component類型），control，label三個屬性

　　　　style:ButtonStyle{ background: Rectangle { } }

Image: fillMode屬性可以設置圖片的填充模式，Image.Stretch(拉伸)，PreserveAspectFit（等比縮放），Image.PreserveAspectCrop(最大填充，必要時裁剪)

　　　　Tile（水平和垂直兩個方向平鋪，就像貼瓷磚那樣），TileVertically（垂直平鋪），TileHorizontally（水平平鋪），Pad（原樣不變）

　　　　Image默認是阻塞加載圖片，可以設置asynchronous屬性true開啟異步。當status的值為Image.Ready時 可屏蔽加載等候界面。

　　　　Image{ source: "images/myImage.png")}

　　　　Image{ onStatusChanged:{ } } //status屬性變化時會發(fā)射statusChanged信號

BusyIndicator：一個等待圖元，耗時操作時使用

　　　　running屬性：true時顯示

　　　　style：可定制樣式，默認是一個轉(zhuǎn)圈圈的動畫

FileDialog：文件對話框，通過open() 方法設置visible為true。

　　　　selectExisting：表示選擇已有文件或文件夾

　　　　selectMultiple：ture表示多選

　　　　nameFilters：用于設定一個過濾器列表。nameFilters：[ "Image Files (*.jpg *.png *.gif) ， “Bitmap Filter (*.bmp)” , " * (*.*)" ]  //過濾器列表

　　　　selectedNameFilter:"Image Files (*.jpg  *.png  *.gif)";　　//保存用戶選擇的過濾器

　　　　fileUrl：保存該文件的路徑，如果選擇多個文件則該屬性為空。

　　　　fileUrls：是一個列表

　　　　folder：文件夾的位置

js 語法：Undefined類型只有一個值：undefined，聲明的變量沒有初始化時，就是該值

　　　　如：var oneValue； if( oneValue == undefined){  } // 函數(shù)無明確返回值時，返回的也是undefined

　　　　Null類型也只有衣蛾值，null   // property var reminderWindow：null

　　　　類型轉(zhuǎn)換：toString() ; // var integer = 3.1415;  console.log(integer.toString());

　　　　　　　　parseInt()和parseFloat（）把非數(shù)字的String轉(zhuǎn)換成數(shù)字。

　　　　強轉(zhuǎn)：Boolean（），Number（），String（）

 對象：Object是所有js類的基類，isPrototypeOf(object) ,判斷對象是否為另一個對象的原型

　　　　　　propertyIsEnumerable（property），判斷給定的屬性是否可以用for...in 語句進行枚舉。

　　　　　　toString(),返回對象的字符串表示，對于Rectangle.toString()返回其對應的C++類型名字或QML類型名字。

　　　　　　valueOf（），返回最適合該對象的原始值，對于許多類，該方法返回的值都與toString一樣。

　　　　動態(tài)增加屬性：var person = new object();   person.name = "zhangsan";  person.year = 20;

　　　　動態(tài)增加方法：person.printInfo = function printInfo() {  };

　　　　使用數(shù)組下標訪問方法：person["printInfo"]() ; //這個有點意思

　　　　for ...in :訪問對象屬性： for (var prop in person) {  console.log(prop  , " , ",  person[prop] )};

　　　　字面量表示法：var person = { "name" : "zhangsan" ; "year" : 20 }

　　　　console提供定時器，可以用于計算代碼耗時

　　　　　　console.time(tag) //啟動定時器 ，字符串類型的tag是必需的

　　　　　　console.timeEnd(tag) // 停止計時器

三、測試