qml简介

  • 前言
    本文主要对qml语言进行一个基本介绍,主要涉及qml简介、qml基本语法、以及qml与Qt相互调用、qml开发工具等。

  • qml简介
    从Qt4.7版本引入Qt Quick,qml (Qt Meta-Object Language),是Qt推出的Qt Quick技术的一部分,是一种新增的简便易学的语言。QML是一种陈述性语言,用来描述一个程序的用户界面。文件格式以.qml结尾。语法格式非常像CSS,但又支持javacript形式的编程控制。在QML,一个用户界面被指定为具有属性的对象树。 这使得Qt更加便于很少或没有编程经验的人使用。 JavaScript在QML中作为一种脚本语言,对QML进行逻辑方面的编程。

  • qml详细介绍
    首先我们先看一个例子:
    helloworld.qml
    qml简介_第1张图片
    1)import导入一个QtQuick包
    2)Rectangle被称为界面元素,描述一个矩形,每个界面元素后面跟着一对大括号,括号内描述元素信息
    3)Text是一个文本消息,可以设置元素id、文本内容等

  • 1、界面元素
    界面元素(如上例中的Rectangle)是QML实现的界面中的基本单位。多个元素平行定义。QML提供了很多定义好的界面元素(也可以自己定义),
    常用元素:Item, Rectangle, Image, Text, MouseArea等。

  • 2、界面元素属性
    界面元素属性用于描述界面元素,放在界面元素大括号中,每一属性独占一行,多个属性放在一行时,之间用逗号分开。qml提供x、y 、width、height、parent等等属性同样QML提供了丰富的界面元素属性。详细可查阅帮助文档。

  • 3、布局
    qml提供了两种布局方式:Anchor 布局管理和布局器
    1)Anchor布局管理:
    一个元素可以参考另外一个元素位置就是由Anchor实现的。每个qml元素都有6个方位和4个边缘,如图:
    qml简介_第2张图片
    使用:Rectangle { id: rectTest1; … }
    Rectangle { id: rectTest2; anchors.left: rectTest1.right; … }
    2)布局器
    a.Grid布局(网格布局)
    b.Row布局(纵向布局)
    c.Column布局(横向布局)

  • 4、事件
    1)键盘事件
    TextInput和TextEdit两个元素使用到键盘事件。(前者为单行文本,后者为多行文本)不但可以向普通界面元素一样,可以设置其长度,位置,颜色等属性。还可以可设置focus属性觉得焦点停留的位置。
    2)鼠标事件
    鼠标事件在界面元素中加入MouseArea元素,MouseArea元素中设置相应的属性来设置事件。有两种方法具体实现处理鼠标事件:信号处理即信号槽、动态属性绑定。参照如下代码:

import QtQuick 2.0
Rectangle
{
     
    width: 100; height: 100
    Text {
     
        id: cusText
        x:0; y:50; width:50
        text: qsTr("My First qml---> helloworld")
    }
    //信号
    MouseArea{
     
        anchors.fill: parent;
        onClicked: {
     
            parent.color="red"
        }
    }
    //id动态绑定
    color: mouseTest.containsMouse?"red":"blue"
    MouseArea{
     
        id: mouseTest
        anchors.fill: parent;
    }
}
  • qml和Qt交互
    1)qml调用Qt
    qml可以调用槽函数,也可以在函数前添加Q_INVOKABLE。例如:Q_INVOKABLE void myFunc();
    2)Qt使用qml
    Qt通过QQuickWidget或者QQuickVIew加载qml,(QQuickWidget可以直接放入布局,QQuickVIew需要进行转化)
 QQuickWidget *pQmlWgt = new QQuickWidget(this);//定义QuickWidget
 pQmlWgt ->setSource(QUrl(QStringLiteral("helloworld.qml")));//加载qml文件
 pQmlWgt ->rootContext()->setContextProperty("testObj",this);//向qml注册Qt对象,qml中可以直接使用Qt注册对象
  • qml开发工具
    1)在Qt的bin目录下,Qt提供了一个工具QML Viewer可以查看.qml文件生成的效果。
    2) Qt Creatorr是一个用于Qt开发的轻量级跨平台集成开发环境。提供首个专为支持跨平台开发而设计的集成开发环境 (IDE)。Qt Creator包含了一套(一个高级的C++代码编辑器 、上下文感知帮助系统、可视化调试器、源代码管理、项目和构建管理工具)用于创建和测试基于Qt应用程序的高效工具。

你可能感兴趣的:(qml,js,javascript,qml)