天天看点

QT QUICK

作者:C加加Qt技术开发老杰

 Qt Quick是Qt提供的一种高级用户界面工具包:包括描述性语言QML、语言运行时、大量的用户界面元素、QtCreate对QML的完美支持、QtQuick设计器、QML与C++混合编程支持等众多技术

  Qt Quick是一些新UI技术的集合,主要由3部分组成:Qt Creator IDE ( 包含 Qt Quick 设计器 )、QML语言、Qt库中的QtDeclarative模块(Qt4)

QML是对JavaScript的一种扩展,利用一个声明性语法,使用QML元素指定每一个用户界面,这些元素组合在一起形成各种组件,Qt的QtDeclarative模块实现了QML语言和对它适用的元素之间的接口,该模块还提供了一个C++接口,可以用来在Qt/C++应用程序中加载QML文件并与之通信(QtDeclarative Module的作用就是将QML元素与以前的标准C++类相结合)

   Qt5图形引擎基于GPU,应用开发套件Qt Quick2(适用于触摸屏的UI开发),增加了对C++11支持,加强了对JavaScript和QML的支持,可以混合编程,Qt5是Qt4渐进而平缓的升级,与Qt4高度兼容

  Qt5下,QWidget系列从QtGui中被剥离出去,成为单独的QtWidget模块,随着Qt Quick2的引入,QtDeclarative也逐渐和QWidget系列脱离关系,在Qt5下的GUI编程,有两套不同的东西:QtWidget (使用BackingStore)、QtQuick (使用Scene Graph)

  相对于Qt4,Qt5将Qt Declarative模块分解成为与界面无关的Qt Qml和基于QML语言的一个类库Qt Quick2.0

Qt资料领取→「链接」

第一章 QML( Qt Meta-Object Language )

------ ECMAScript、Qt对象系统、Qt Quick标准库 

  QML是Qt Quick技术的核心与基础,是一种简便易学的标记性语言,用来描述一个程序的用户界面。注:Meta-Object,元对象

  一、ECMAScript语言,仅仅是一个描述,定义了脚本语言的所有属性、方法和对象,其他语言可以实现ECMAScript来作为功能的基础,正如JavaScript那样,ECMAScript描述了如下内容:语法、类型、语句、关键字、保留字、运算符、对象

  QML提供了,为编写QML应用程序而量身定制的,JavaScript环境,此环境不同于浏览器提供的主机环境或服务器端JavaScript环境(如Node.js),比如它不提供浏览器环境中常见的窗口对象或DOM接口,QML运行时,实现了ECMAScript语言规范标准

  二、QML语法格式非常像CSS,但又支持JavaScript形式的编程控制,在QML中,通过具有属性的对象树来表示用户界面,每个QML基本元素都对应了一个C++类,当你写的QML文件被加载时,QML引擎最终会为文件中的每一个基本类型建立一个C++类对象,这些对象被按照树的结构组织起来

  可以使用 Qt Quick 为手机、多媒体播放器、机顶盒以及其他的便携式设备开发具有直观、现代、流畅的用户界面的应用程序

  1、QML的语法

  1.1 对象是类的实例

Rectangle{
    width:320;
    height:480;
    
    Image{
        source:"images/IMG_001.jpg";
        anchors.centerIn:parent;
    }
}             

  对象要用一对花括号来描述,花括号前要写上对象的类型名字(类名),在花括号之间,是对象的属性初始化语句

  示例QML文档中有两个对象:一个是Rectangle,一个是Image,它们都是Qt Quick提供的内置类

  1.2 QML支持ECMAScript表达式

Rectangle{
    width:23*10;
    height:6*80;
    color:"#121212";
}           

  1.3 在QML中注释与C++中一样,单行以"//"开始,多行以"/*"开始、以"*/"结束

  1.4 QML中的属性,对应于C++中的类的成员变量

  QML文档中使用的类型大概有三类:由QML语言本身提供的类型,由QML模块提供的类型,导出到QML环境中的C++类型,QML中对象的属性是有类型安全检测的,只能指定与属性类型匹配的值

  基本类型、id属性、列表属性、信号处理器、分组属性、附加属性

  1.4.1 QML支持的基本类型包括int、real、double、bool、string、color、list、font等等

Rectangle{
    width:320;  //int
    height:480;
    
    Button{
        id: quit;
        text: "退出"; //string
        anchors.left:openFile.right;
        anchors.leftMargin:4;
        anchors.bottom:openFile.bottom;
        z:1.5; //real
        visible: false //bool
    }
}           

  1.4.2 一个对象的id属性是唯一的,在同一个QML文件中不同对象的id属性的值不能重复,当给定了一个对象的id后,可以在其他对象或脚本中通过id来引用该对象

  1.4.3 QML对象的列表属性,类型是list,列表是包含在方括号内,以逗号分隔的多个元素的集合,列表内只能包含QML对象,不能包含任何基本类型的字面量,非要包含,需要使用var变量,如果一个列表内只有一个元素,也可以省略方括号

Item{
    children:[
        Text{
            text:"textOne";
        },
        Text{
            text:"textTwo";
        }
    ]
    Component.onCompleted:{
        for(var i=0; i<children.length; i++){
            console.log("text of label ", i, " : ", children[i].text);
        }
    }
}           

  1.4.4 信号处理器,等价于Qt中的槽,类似于C++中的明确定义的函数,就是ECMAScript中的代码块,它的名字一般是on<Signal>这种形式,比如Qt Quick中的Button有一个信号clicked(),信号处理代码:

Rectangle{
    width:320;  //int
    height:480;
    
    Button{
        id: quit;
        text: "退出"; //string
        anchors.left: parent.left;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        onClicked{     //信号处理器
            Qt.quit();
        }
    }
}           

  1.4.5 使用"."操作符或分组符号将相关的属性形成一个逻辑组,分组属性赋值

  font属性的类型本身是一个对象,这个对象又有pixelSize、bold、italic、underline等属性,对于类型为对象的属性值

  可以使用"."操作符展开对象的每一个成员对其赋值

Text{
    font.pixelSize: 18;
    font.bold: true;
}           

  可以通过分组符号(一对花括号)把要赋值的成员放在一起给它们赋值

Text{
    font{
        pixelSize: 18;
        font.bold: true;
    }
}           

  1.4.6 附加属性,是附加到一个对象上的额外的属性,与附加属性相似的概念还有附加信号处理器

Item{
    width:100;
    height:100;
    
    focus: true;
    Keys.enabled: false; //附加属性
}           

  2、QML数据类型,是构成QML文档的基础

  2.1 基本类型:QML支持C++常见的数据类型,基本类型一般用于两种值:单值,一个包含了一组简单的“属性-值”对的值,如size

  基本类型有QML默认支持的,有模块提供的(需要导入模块才能使用),Qt全局对象提供的一些函数操作基本类型的值

  2.2 JavaScript类型:QML引擎直接支持javaScript对象和数组,任何标准JavaScript类型可以在QML中使用var类型进行创建和存储

  2.3 对象类型: QML对象类型,用于QML对象的实例化,对象类型可以通过指定类型名称并在其后的一组大括号里面包含相应属性的方式声明一个对象

  QML对象类型,继承自QtObject,由各个模块提供,除了导入模块,可以自定义QML对象类型

  三、Qt Quick模块是开发QML应用的标准库,提供了使用QML创建用户界面所需的一切东西,包括可视化类型、交互类型、动画、模型与视图、粒子特效与着色器等

文章转自博客园(金色省略号):https://www.cnblogs.com/GoldenEllipsis/p/16453711.html

Qt资料领取→Qt资料领取(视频教程+文档+代码+项目实战)