qt5开发及实例章编程基础.pptx

第19章QML编程基础ML概述19.119.2QML可视元素QML元素布局19.319.4QML事件处理19.5QML集成JavaScript

19.1ML概述19.1.1第一个QML程序【例】（简单）这里先由一个最简单的QML程序入手，介绍QML的基本概念。实例文件见光盘CH1901。创建QML应用程序，步骤如下。（1）启动QtCreator，单击主菜单“文件”→“新建文件或项目…”项，弹出“新建”对话框，如图19.1所示，选择项目“Application”下的“QtQuickApplication”模板。

19.1.1第一个QML程序（2）单击“Choose…”按钮，在“新建QtQuick程序”对话框的“项目介绍和位置”页输入项目名称“QmlDemo”，并选择保存项目的路径，如图19.2所示。

19.1.1第一个QML程序（3）单击“下一步”按钮，在“SelectQtQuickComponentSet”页选择“QtQuick2.4”，如图19.3所示。

19.1.1第一个QML程序（4）单击“下一步”按钮，在“KitSelection”页，系统默认已指定程序的编译器和调试器，如图19.4所示，直接单击“下一步”按钮进入下一步骤即可。

19.1.1第一个QML程序（5）在“项目管理”页上自动汇总出要添加到该项目的文件，如图19.5所示，单击“完成”按钮完成QML应用程序的创建。

19.1.1第一个QML程序此时，系统自动将这些文件组织起来生成项目工程，并预生成了一个QML代码的框架，其中main.qml为项目启动的主程序文件，代码如下：importQtQuick2.4importQtQuick.Window2.2Window{visible:trueMainForm{anchors.fill:parentmouseArea.onClicked:{Qt.quit();}}}

19.1.1第一个QML程序单击运行程序，弹出如图19.6所示的窗口，显示“HelloWorld”。

19.1.2QML文档构成QML程序的源文件又叫“QML文档”，以.qml为文件名后缀，例如，上面项目中的main.qml是一个QML文档。每一个QML文档都由两部分构成：?import部分此部分导入需要使用的QtQuick库，这些库由Qt5提供，包含了用户界面最通用的类和功能，如本程序main.qml文件开头的两句：importQtQuick2.4 //导入QtQuick2.4库importQtQuick.Window2.2 //导入QtQuick窗体库导入这些库后，用户就可以在自己编写的程序中访问QtQuick所有的QML类型、接口和功能。

19.1.2QML文档构成?对象声明这是一个QML程序代码的主体部分，它以层次化的结构定义了可视场景中将要显示的诸元素，如矩形、图像、文本以及获取用户输入的对象……它们都是QtQuick为用户界面开发提供的基本构件。例如，main.qml的对象声明部分：Window{ //对象visible:true //属性MainForm{ //子对象 …}}

19.1.3QML基本语法在项目视图中双击MainForm.ui.qml文件（与main.qml位于同一目录）打开，切换到编辑模式，可以看到其代码（为便于讲解，加了注释），如下：/*import部分*/importQtQuick2.3 //导入QtQuick2.3库/*对象声明*/Rectangle{ //根对象：RectanglepropertyaliasmouseArea:mouseArea //属性别名width:360 //属性（宽度）height:360 //属性（高度）MouseArea{ //子对象1：MouseAreaid:mouseArea //对象标识符anchors.fill:parent}Text{ //子对象2：Textanchors.centerIn:parenttext:HelloWorld}}

19.1.3QML基本语法1．对象和属性对象由它们的类型指定，以大写字母开头，后面跟一对大括号{}，{}之中是该对象的属性，属性以键值对“属