QML笔记

文章钢要：

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{
  width: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) // 停止计时器

三、测试