QT开发（五十二）———QML语言

Posted 2020-08-23

QT开发（五十二）———QML语言

    QML是一种声明语言，用于描述程序界面。QML将用户界面分解成一块块小的元素，每一元素都由很多组件构成。QML定义了用户界面元素的外观和行为；更复杂的逻辑则可以结合javascript脚本实现。

一、QML基础语法

1、Import语句

    QML代码中，import语句一般写在头几行，主要用途如下： 
    A、包含类型的全名空间
    B、包含QML代码文件的目录
    C、JavaScript代码文件

格式如下：

import Namespace VersionMajor.VersionMinor

import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier

import "directory"

import "file.js" as ScriptIdentifier

实例如下：

import QtQuick 2.0

import QtQuick.LocalStorage 2.0 as Database

import "../privateComponents"

import "somefile.js" as Script

2、对象声明

QML代码都定义一个对象树。所有的QtQuick元素都是继承于QQuickItem（QML中的Item类型），包括Rectangle、Text等。 对象类型以大写字母开头。
在定义对象的同时，对象的属性也会被赋初值。每个对象都可在其内部再声明子对象。每个对象的内容都由大括号包围。

Rectangle

{

    width: 100

    height: 100

    color: "red"

}

等价于：Rectangle { width: 100; height: 100; color: "red" }

3、子对象

    每个QML对象内可声明无限个子对象。

import QtQuick 2.0

 

Rectangle

{

    width: 200

    height: 200

    color: "red"

    Text

    {

        anchors.centerIn: parent

        text: "Hello, QML!"

    }

}

4、注释

    QML的注释类似于C++、Java和Javasript等，有两种：

    A、单行注释时使用双斜杠//

    B、多行注释使用 /* … */

5、模块声明

    QML每个类都单独存放一个文件，每个文件都是一个模块，但不能单独声明一个函数，函数必须写在类内，或者用Javascript代码。
    引用时以模块名使用。如果不考虑C++扩展的话，所有的QML代码都是使用已有的QML元素类型完成的。

6、表达式

    表达式可以包含其它的对象与属性的引用，会建立约束关联。

Item

{

     Text

     {

         id: text1

         x:2;y:2

         text: "Hello World"

     }

     Text

     {

         id: text2

         x:2;y:20

         text: text1.text

     }

 }

7、信号处理器

    信号处理器允许响应事件时处理动作。例如，MouseArea元素有信号处理器来处理鼠标按下，释放以及单击。

MouseArea 

{

    acceptedButtons: Qt.LeftButton | Qt.RightButton

    onPressed: 

    {

        if (mouse.button == Qt.RightButton) 

            console.log("Right mouse button pressed")

    }   

}

本文出自 “生命不息，奋斗不止” 博客，谢绝转载！