文章钢要：
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环境中的C++类型。
注意事项：
1、list类型必须和object类型关联使用
2、enumeration必须 must be defined by a registered QML object type。
3、id属性首字符必须是小写字母或下划线
4、列表属性(list)是包含在【】内，以逗号分隔的多个元素集合。和js的数组类似。
5、信号处理器on<Signal>形式：onClicked:{ Qt.quit(); }
6、附加属性如：item{ Keys.enabled:false ;} ,Component.onCompleted:console.log("hello Qt");
二、QML入门
程序框架一：QQmlApplicationEngine 搭配 Window，QML有控制权
main（int argc,char *argv[]）{ QGuiApplication app(argc,argv); QQmlApplicationEngine engine; engine.load(QUrl(QStringListeral("qrc://main.qml"))); return app.exec();//主循环 }
import QtQuick.Window 2.1 Window{ 360;
height:240; MouseArea{ anchors.fill:parent; onClicked:{ Qt.quick(); } } Text{ text:"Hello Qt Quick"; anchors.centerIn:parent; } }
程序框架二：Item作为QML根对象 (QQuickView 搭配 Item )，c++有控制权
main(int argc, char * argv[]){ QGuiApplication app(argc,argv); QQuickView viewer; viewer.setSource(QUrl("qrc://main.qml")); viewer.show(); return app.exec(); }
Window用于创建一个与OS相关的顶层窗口，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参数：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属性变化时会发射statusChanged信号
BusyIndicator：一个等待图元，耗时操作时使用
running属性：true时显示
style：可定制样式，默认是一个转圈圈的动画
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){ } // 函数无明确返回值时，返回的也是undefined
Null类型也只有衣蛾值，null // property var reminderWindow：null
类型转换：toString() ; // var integer = 3.1415; console.log(integer.toString());
parseInt()和parseFloat（）把非数字的String转换成数字。
强转：Boolean（），Number（），String（）
对象：Object是所有js类的基类，isPrototypeOf(object) ,判断对象是否为另一个对象的原型
propertyIsEnumerable（property），判断给定的属性是否可以用for...in 语句进行枚举。
toString(),返回对象的字符串表示，对于Rectangle.toString()返回其对应的C++类型名字或QML类型名字。
valueOf（），返回最适合该对象的原始值，对于许多类，该方法返回的值都与toString一样。
动态增加属性：var person = new object(); person.name = "zhangsan"; person.year = 20;
动态增加方法：person.printInfo = function printInfo() { };
使用数组下标访问方法：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) // 停止计时器