qml_qml groupbox - CSDN
qml 订阅
QML是一种描述性的脚本语言,文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子),但又支持javascript形式的编程控制。QtDesigner可以设计出·ui界面文件,但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互,但是有一个缺点,如果要在脚本中创建一个继承于QObject的图形对象非常不方便,只能在Qt代码中创建图形对象,然后从QtScript中进行访问。而QML可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C++代码进行方便的交互,使用起来非常方便。 展开全文
QML是一种描述性的脚本语言,文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子),但又支持javascript形式的编程控制。QtDesigner可以设计出·ui界面文件,但是不支持和Qt原生C++代码的交互。QtScript可以和Qt原生代码进行交互,但是有一个缺点,如果要在脚本中创建一个继承于QObject的图形对象非常不方便,只能在Qt代码中创建图形对象,然后从QtScript中进行访问。而QML可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C++代码进行方便的交互,使用起来非常方便。
信息
支    持
以.qml结尾
外文名
QML
性    质
脚本语言
QML来源
QML是Qt推出的Qt Quick技术的一部分,是一种新增的简便易学的语言。QML是一种陈述性语言,用来描述一个程序的用户界面:无论是什么样子,以及它如何表现。在QML,一个用户界面被指定为具有属性的对象树。 这使得Qt更加便于很少或没有编程经验的人使用。QML实际上是Qt Quick (Qt4.7.0中的新特性)核心组件之一:Qt Quick是一组旨在帮助开发者创建在移动电话,媒体播放器,机顶盒和其他便携设备上使用越来越多的直观、现代、流畅UI的工具集合。
收起全文
  • 跟着项目学习QT QML跨平台移动APP编程技术,从QML的基本组件Lable、TextField到StackView、ListView,再到C++的算法、QML和C++的结合,最后到部署在IOS和Android平台,全方位的体验跨平台移动APP的开发流程及QT QML...
  • 从 Qt 4.7 开始,Qt 引入了一种声明式脚本语言,称为 QML(Qt Meta Language 或者 Qt Modeling Language),作为 C++ 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库。 QML 是一种基于 JavaScript 的声明...

    从 Qt 4.7 开始,Qt 引入了一种声明式脚本语言,称为 QML(Qt Meta Language 或者 Qt Modeling Language),作为 C++ 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库QML 是一种基于 JavaScript 的声明式语言。在 Qt 5 中, QML 有了长足进步,并且同 C++ 并列成为 Qt 的首选编程语言。也就是说,使用 Qt 5,我们不仅可以使用 C++ 开发 Qt 程序,而且可以使用 QML。虽然 QML 是解释型语言,性能要比 C++ 低一些,但是新版 QML 使用 V8,Qt 5.2 又引入了专为 QML 优化的 V4 引擎,使得其性能不再有明显降低。在 Nokia 发布 Qt 4.7 的时候,QML 被用于开发手机应用程序,全面支持触摸操作、流畅的动画效果等。但是在 Qt 5 中,QML 已经不仅限于开发手机应用,也可以用户开发传统的桌面程序。
    QML 文档描述了一个对象树。QML 元素包含了其构造块、图形元素(矩形、图片等)和行为(例如动画、切换等)。这些 QML 元素按照一定的嵌套关系构成复杂的组件,供用户交互。
    ——摘自《Qt学习之路2》

    helloworld实例:

    新建项目如图:
    这里写图片描述
    选择Qt Quick Application,组件选择Qt Quick 2.1
    这里写图片描述
    创建项目成功之后,Qt会为我们自动生成一系列文件:
    这里写图片描述

    我们真正需要关注的是:main.qml 里面的内容

    import QtQuick 2.1
    import QtQuick.Window 2.0
    
    Window {
        visible: true
        width: 360
        height: 360
    
        MouseArea {
            anchors.fill: parent
            onClicked: {
                Qt.quit();
            }
        }
    
        Text {
            text: qsTr("Hello World")
            anchors.centerIn: parent
        }
    }
    

    如上述代码所示,一个 QML 文档分为 import 和 declaration 两部分。前者用于引入文档中所需要的组件(有可能是类库,也可以是一个 JavaScript 文件或者另外的 QML 文件);后者用于声明本文档中的 QML 元素。
    每一个 QML 有且只有一个根元素,类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素,在这个例子中就是一个 Window 对象。注意一下这个 QML 文档的具体语法,非常类似于 JSON 的定义,使用键值对的形式区分元素属性。所以我们能够很清楚看到,我们定义了一个窗口,可见性为真,宽度为 360 像素,高度为 360 像素。记得我们说过,QML 文档定义了一个对象树,所以 QML 文档中元素是可以嵌套的。在这个窗口中,我们又增加了一个 Text 元素,顾名思义,就是一个文本。Text 显示的是 Hello World 字符串,而这个字符串是由 qsTr()函数返回的。qsTr()函数就是 QObject::tr()函数的 QML 版本,用于返回可翻译的字符串。Text 的位置则是由锚点(anchor)定义。示例中的 Text 位置定义为 parent 中心,其中 parent 属性就是这个元素所在的外部的元素。anchors.centerIn: parent同理,我们可以看到MouseArea 是充满父元素的。MouseArea 还有一个 onClicked 属性。这是一个回调,也就是鼠标点击事件。 MouseArea可以看作是可以相应鼠标事件的区域。当点击事件发出时,就会执行 onClicked 中的代码。这段代码其实是让整个程序退出。注意我们的 MouseArea充满整个矩形anchors.fill: parent,所以整个区域都可以接受鼠标事件。
    运行效果示例:
    这里写图片描述
    接下来我们可以改变 main.qml 文件中的“Hello World”字符串,不重新编译直接运行,就会看到运行结果也会相应的变化。这说明 QML 文档是运行时解释的,不需要经过编译。所以,利用 QML 的解释执行的特性,QML 尤其适合于快速开发和原型建模。另外,由于QML 比 C++ 简单很多,所以 QML 也适用于提供插件等机制。

    展开全文
  • Qt Quick&QML快速入门

    千人学习 2019-04-24 10:57:32
    Qt Quick&QML快速入门 我的淘宝店:;">https://shop111724109.taobao.com</span> ;">淘宝店里有更多内容,感谢支持。 </p>
  • QT QML 零基础动画教程

    2020-05-26 15:21:39
    针对QML可视化组件的详细动画教程,零基础学习,系统性的介绍QML动画中,所涉及的状态、转换、及动画的相关概念,同时详细的说明了动画运作的三种方式,1、直接使用动画,2、通过转换使用动画,3、通过行为使用动画...
  • Qt Quick 4小时入门

    万人学习 2019-06-26 11:52:18
    Qt Quick(QML)是Qt 5里推荐的UI开发框架,能够为各种设备搭建流畅且绚丽的用户界面。本课程删繁就简,精心选择主题,通过短短的几节课,即可让大家跨越Qt Quick的入门门槛,为进一步学习奠定坚实基础。
  • 使用QML进行界面开发

    万次阅读 2018-08-24 16:48:37
    1、概述    ESM6802是英创公司推出的基于Freescale i.MX6DL双核处理器(ARM Cortex-A9,...ESM6802支持Qt 5.8版本,支持使用QML进行界面开发,而且能够利用硬件图像加速处理模块优化QML构建的图像界面的渲染。...

    1、概述

     

      ESM6802是英创公司推出的基于Freescale i.MX6DL双核处理器(ARM Cortex-A9,主频1GHz)的高性能工控主板,imx6dl内部带有硬件3D、2D图像处理模块,能够对图像界面绘制进行硬件加速,使得应用程序显示更加快速流畅。ESM6802支持Qt 5.8版本,支持使用QML进行界面开发,而且能够利用硬件图像加速处理模块优化QML构建的图像界面的渲染。本文将会简单介绍一下QML的基础知识,给客户提供一种新的界面的开发方案。

     

      QML是Qt提供的一种描述性的脚本语言,类似于CSS(Cascading Style Sheets),可以在脚本里创建图形对象,并且支持各种图形特效,以及状态机等,同时又能跟Qt写的C++代码进行方便的交互,使用起来非常方便。采用QML加插件的方式主要是为了将界面设计与程序逻辑解耦,一般的系统开发中界面设计的变动往往多于后台逻辑,因此采用QML加插件的方式将界面设计与逻辑分离有利于开发人员的分工,加速产品迭代速度,降低后期维护成本。而且QML解释性语言的特性使得其语法更加简单,可以将界面设计部分交给专业的设计人员开发,而不要求设计人员会c++等编程语言。Qt底层对QML做了优化,将会优先使用硬件图形加速器进行界面的渲染,也针对触摸屏应用做了优化,使用QML能够更简单快捷的搭建流畅、优美的界面。QML也支持嵌入Javascript处理逻辑,但是底层逻辑处理使用Qt C++编写插件,能够更好的控制数据结构,数据处理也更加高效,Qt提供了多种方式将C++数据类型导入QML脚本中,更多详细资料可以查看Qt官方的文档,本文将简单介绍一下QML语言的语法以展示QML相对于以往的Qt C++界面编程的区别,文中所有代码均在ESM6802 Linux上运行测试过了,有需要的客户可以向我们索取,QML文件是脚本文件,不需要编译,可以使用/usr/bin/qt5/qmlscene程序直接打开QML脚本文件查看效果。

     

    2、QML基础介绍

     

      QML将界面分解为一个一个小的元素,通过使用QML描述各元素的排列以及对特定事件的响应来搭建一个动态的界面。QML中的元素是以层级的形式进行描述的,子元素继承父元素的坐标系统,子元素的坐标以父元素作为参考,父元素的左上角为子元素的坐标原点,子元素中可以以parent关键字引用父元素。

     

      在一个QML文件中,每个元素都可以设定唯一的id,在其他元素中可以引用id来更改此元素的属性等。QML提供一系列内置的元素类型供开发中快速搭建界面,包括最常用的Rectangle、Image、Text、MouseArea、Item等。元素都有自己内置的属性,比如之前介绍的id,以及用于指定坐标的x、y,和width、height等,同时也支持使用property关键字自定义属性。一个简单的QML文件如下:

     

     

    import QtQuick 2.0

     

    Rectangle {

        width: 100

        height: 100

        color: "red"

    }

     

     

      这个QML文件将会展示一个红色的正方形,如下图:

     

    使用QML进行界面开发.gif

     

      在上面的例子中为Rectangle增加radius属性的设置就可以得到圆角长方形:

     

     

    Rectangle {

        width: 100

        height: 100

        color: "red"

        radius: 10

    }

     

     

    使用QML进行界面开发.gif

     

      使用Rectangle就可以构建出消息展示框和按钮等大部分的界面元素了,而Text类型可以用于在Rectangle中增加文字信息,Image可以加载图片,MouseArea提供鼠标/触摸屏事件,组合使用这几个元素就能够快速的搭建基本的交互界面了。

     

      当然现实开发中由于需要展示的数据往往会以数组等更复杂形式进行管理,他们具有相同的属性,需要展示的外形效果(背景、对事件的相应)是一样的,而每个元素的需要展示的内容不一样,这时就可以使用Row、Column、ListView、GridView等更复杂的元素。这类元素的设计理念是将数据与展现效果分开,数据用model来存放,而展示效果用view来描述,model和view通过delegate联系起来,一个简单的ListView的用法示例如下:

     

     

    Background {

      width: 480

      height: 80

      ListView {

      anchors.fill: parent

      anchors.margins: 20

      spacing: 4

      clip: true

      model: 100

      orientation: ListView.Horizontal

      delegate: numberDelegate

    }

    Component {

      id: numberDelegate

      GreenBox {

        width: 40

        height: 40

        text: index

      }

    }

     

     

      上面中的GreenBox是使用Rectangle元素和Text元素构建的长方形,上面的代码显示效果如下:

     

    使用QML进行界面开发.gif

     

      QML也内置了一些类型来描述显示元素的转变、动画效果,例如PropertyAnimation、NumberAnimation、ColorAnimation、RotationAnimation以及State、Transition等,使用这些类型能够快速实现界面的动画效果,比如下面展示一个绿灯闪烁的界面的QML代码:

     

     

    import QtQuick 2.0

     

    Rectangle {

        id: backgroud

        width: 100

        height: 100

        color: "grey"

     

      Rectangle {

        id: greenlight

        width: 60

        height: 60

        x: 20

        y: 20

        color: "green"

        radius: 30

        Component.onCompleted: flick.start()

     

        SequentialAnimation{

          id: flick

          ColorAnimation { target: greenlight; properties: "color"; to: "black"; duration: 1000 }

          ColorAnimation { target: greenlight; properties: "color"; to: "green"; duration: 1000 }

          ColorAnimation { target: greenlight; properties: "color"; to: "black"; duration: 1000 }

          ColorAnimation { target: greenlight; properties: "color"; to: "green"; duration: 1000 }

          ColorAnimation { target: greenlight; properties: "color"; to: "black"; duration: 1000 }

          }

      }

    }

     

     

      上面的代码会使id为greenlight的图形从绿色变为黑色,在由黑色变为绿色,重复三次,模拟绿灯闪烁的效果。由于动画效果不方便以图片展示,客户可以自行复制上面的代码运行查看效果。

     

    使用QML进行界面开发.gif

     

      从上面的介绍可以看到,QML的语法非常简单,整个文件的结构很清楚,比起使用Qt C++开发界面的更加简单快速,不需要管理各种不同的类(class),降低了编程难度,而且整个界面元素以长方形为基础来搭建,非常适合触摸屏设备。另外QML文件不需要编译,可以直接运行,搭建的界面能够快速的预览然后进行优化,也一定程度上加快了开发速度。当然由于QML的设计理念,QML只是对界面显示进行描述,虽然可以内嵌JavaScript处理数据,但是处理数据的效率不高,所以显示所需数据的生成、管理还是建议使用Qt C++进行处理。这样底层数据能够高效的进行处理,而上层界面又能够快速搭建,数据处理和界面构建分离,程序开发分工也更加明确,也更加方便程序的维护和更新换代。

     

    3、使用C++扩展QML

     

      Qt提供了C++的函数接口来方便的将C++程序中的数据提供给QML文件进行显示,这些接口可以分为两种,一种是直接在C++中注册QML类型,然后在C++中执行QML文件,这样QML文件中就可以直接访问注册的类型;另一种是创建QML插件,之后可以在QML文件中引入插件,作为独立的类型进行实例化。限于篇幅,我们这里只简单介绍一下创建QML插件,QML文件代码基于我们之前一片文章《Linux双进程应用示例》中介绍的,插件的功能我们不再具体介绍,只在此使用代码进行展示。

     

      使用qtcreator的指导界面创建QML插件,设置插件名称为com.emtronix.qmlcomponents,在QML中通过语句import com.emtronix.qmlcomponents加载插件,插件编译过后以共享库的形式存在,需要放到/usr/lib/qt5/qml/com/emtronix/目录下:

     

    使用QML进行界面开发.gif

     

    使用QML进行界面开发.gif

     

      插件使用Qt C++进行开发,实现插件的C++类需要继承QQmlExtensionPlugin类,并且实现registerTypes()函数,如下:

     

     

    #include <QQmlExtensionPlugin>

    class MsgClientPlugin : public QQmlExtensionPlugin

    {

        Q_OBJECT

        Q_PLUGIN_METADATA(IID QQmlExtensionInterface_iid)

    public:

        void registerTypes(const char *uri);

    };

    void MsgClientPlugin::registerTypes(const char *uri)

    {

        // @uri com.emtronix.qmlcomponents

        qmlRegisterType<MsgClient>(uri, 1, 0, "MsgClient");

    }

     

     

     

      上面的代码qtcreator会自动生成,MsgClient类即为这个插件注册的新的QML类型,之后在QML文件中使用import语句加载插件,就可以在QML文件中实例化MsgClient类型了。

     

     

    import com.emtronix.qmlcomponents 1.0

    MsgClient{

      id: msgclient

    }

     

     

      实现MsgClient类与Qt中其他的类类似,只要注意需要在QML中能访问的变量需要用Q_PROPERTY宏定义为MsgClient的属性,而需要在QML文件中访问的函数需要用Q_INVOKABLE进行修饰,如下:

     

     

    class MsgClient : public QQuickItem

    {

        Q_OBJECT

        Q_DISABLE_COPY(MsgClient)

        Q_PROPERTY(int m_interface READ interface WRITE setif NOTIFY ifChanged)

        Q_PROPERTY(QString rmsg READ rmsg WRITE setRmsg NOTIFY rmsgChanged)

        Q_PROPERTY(QString smsg READ smsg WRITE setSmsg NOTIFY smsgChanged)

        Q_PROPERTY(int serverConnection READ serverConnection NOTIFY serverConnected())

        Q_PROPERTY(DynamicEntryModel* pinstate READ pinstate WRITE setPinState NOTIFY pinStateChanged)

        Q_PROPERTY(DynamicEntryModel* outSwitch READ outSwitch WRITE setOutSwitch NOTIFY outSwitchChanged)

    public:

        MsgClient(QQuickItem *parent = nullptr);

        ~MsgClient();

        Q_INVOKABLE void getAll();

        Q_INVOKABLE void getNew();

     

     

      使用slots定义的函数也可以在QML中直接访问,而使用signals定义的消息也可以在QML文件中访问:

     

     

    public slots:

        void sendMsg();

        void setPinState(DynamicEntryModel* obj) { Q_UNUSED(obj) };

        void setOutSwitch(DynamicEntryModel* obj) { Q_UNUSED(obj) };

        ……….

    signals:

        void ifChanged(int id);

        void newMsgRcved(void);

        void rmsgChanged(void);

        void smsgChanged(void);

        void sendMsgSignal(void);

        void serverConnected(void);

     

     

      这些函数以及变量都是正常的C++函数和变量,使用C++来实现函数需要实现的功能以及操作变量,例如sendMsg实现如下:

     

     

    void MsgClient::sendMsg()

    {

        struct msg_head buf_h;

        sprintf((char *)&buf_h.to[0], "S1");

        int buf_lenth = m_smsg.size();

        buf_h.lenth = buf_lenth;

        printf("Client sending msg: %d bytes\n", buf_lenth);

        write(sockedfd, (void *)&buf_h.to[0], 6);

        write(sockedfd, (void *)m_smsg.data(), buf_lenth);

        return;

    }

     

     

      signals信号的访问需要做一定的转换,例如上面的ifChanged消息,在QML中需要使用onIfChanged来访问,即将函数首字母大写,然后在前面加上‘on’。

     

      MsgClient类型在QML中的实际调用如下:

     

     

    MsgClient{

      id: msgclient

      m_interface: interfaceId.currentButton

      onNewMsgRcved:{

        getNew()

        console.log("got new msg" + rmsg)

      }

      onIfChanged: {

        console.log("interface changed to " + msgclient.m_interface)

        getAll()

        console.log("all history msg:" + rmsg)

      }

      onServerConnected: {

        notReady.destroy()

      }

    }

     

     

      可以见到MsgClient类型的使用和QML内置的类型使用没有什么区别,而插件中定义的signals消息以及其他可调用的函数方法也可以在QML中直接访问,MsgClient本身并不会产生显示输出,只是处理数据然后提供给QML其他的类型进行显示。我们使用QML搭建了整个显示界面,显示效果如下:

     

    使用QML进行界面开发.gif

     

      有兴趣的客户可以向我们索要例程的源码文件。

     

    4、总结

     

      ESM6802带有GPU硬件加速模块,能够加速QML的渲染,而且QML语法简单,使用QML进行程序开发能够快速的构建流畅的交互式界面,同时使用QML开发使得界面开发与程序数据处理、硬件管理分开,明确程序开发的分工,降低程序维护成本。对于工业控制系统来说,将界面与底层硬件管理分开,一定程度上增加了底层硬件管理部分的程序的稳定性,而界面又可以实现快速的迭代,适应市场的需求,用户在使用过程中可以考虑使用这种方式进行程序开发。有兴趣的客户可以参考更多的网上资料以及Qt的官方文档。在ESM6802的使用过程中如有问题可以和我们联系。

     

            成都英创信息技术有限公司 http://www.emtronix.com

            原文链接 http://www.emtronix.com/article/article20181109.html

    展开全文
  • qml----坑系列

    2019-05-20 11:35:05
    下面列举一下所遇到的部分坑: 1.SwipeView不要为子page或者Item指定width和height,不然会白屏界面直到界面卡死退出。 2.FolderListModel不支持自然数排序。 3.尽量不要用loader加载视图和界面,不然无法通过...

    下面列举一下所遇到的部分坑:

    1.SwipeView不要为子page或者Item指定width和height,不然会白屏界面直到界面卡死退出。

    2.FolderListModel不支持自然数排序。

    3.尽量不要用loader加载视图和界面,不然无法通过rootObjct()方法获取对象。

    4.win条件下为source指定本地文件的时候,必须加上"file:///"。

    5.json文本不支持  \\  转义符号。

    6.尽量不要用top,left这种ID,不然有可能随时报错。

    7.属性绑定并非任何时候都有效,例如本地json转对象是异步操作的。

    还有一种情况是数组,当你绑定某个状态的时候,它并非实时改变。

    8.

    展开全文
  • 解读QML之三

    万次阅读 2013-03-08 23:52:56
    QML语法 1.QML基本语法 1.1导入声明  导入声明允许客户端告诉QML引擎可以在QML文档中使用哪些模块,JavaScript资源以及组件目录。文档中可以使用的类型依赖于在文档中导入的模块、资源以及目录。 导入类型  ...

                                     QML语法

    1.QML基本语法

    1.1导入声明

            导入声明允许客户端告诉QML引擎可以在QML文档中使用哪些模块,JavaScript资源以及组件目录。文档中可以使用的类型依赖于在文档中导入的模块、资源以及目录。

    导入类型

            总共有三种类型的导入。对于每一种导入类型在语法上都有细微的差别,并且不同的导入类型有着不同的语义。

    *模块(命名空间)的导入

           最常用的导入类型就是模块导入。客户端可以导入那些已经注册QML对象类型和JavaScript资源到给定命名空间的QML模块。

    导入模块最通用的格式如下:


    a)        <ModuleIdentifier>使用URI格式指定,用于唯一标示该模块提供的类型命名空间

    b)        <Version.Number>是以如下格式MajorVersion.MinorVersion标示模块版本号的

    c)        <Qualifier>是一个可选的,本地命名空间标示符。模块的对象类型和JavaScript资源都安装到这个命名空间中。如果没有指       定,那么该模块的对象类型和JavaScript资源则安装到了全局的命名空间。

             一个没有使用限定语的模块导入声明如下:


              这个导入示例允许使用者使用QtQuick模块提供的所有类型而不用指定限定词。例如,客户端可以如下创建一个矩形区域:


              一个使用了限定词的导入声明的示例如下:


             注意:如果一个QML文档使用了模块并未导入的对象类型,那么将会产生错误。例如,下面的文档没有导入QtQuick但是却试图使用Rectangle类型:


            在这种情况下,QML引擎将会触发一个错误,并且拒绝加载该QML文件。

      【非模块命名空间的导入】

             类型可以直接通过C++中的多种注册方法(例如qmlRegisterType())注册到命名空间中。如果类型通过这种方式注册到命名空间中,而且该命名空间又是模块的标示符,那么我们可以通过导入该命名空间来导入该类型。

      【 导入到一个本地限定的命名空间】

            导入声明可选的使用as关键词将类型导入至指定的文档范围有效的本地命名空间中。如果指定了一个命名空间,那么之后使用           这些类型就必须加上这个限定词作为前缀。

            在下面,QtQuick模块被导入到命名空间”CoreItems”。现在,任何引用QtQuick模块中的类型必须加上CoreItems名称前缀:

      

            一个命名空间就像是一个模块在文件内的标示符。命名空间不能成为根对象的属性,根对象可以使用属性、信号和方法。

           命名空间导入对于在两个不同模块提供了相同名称的QML对象的情况下十分有效。在这种情况下我们可以将两个模块导入两个不同的本地命名空间中,以此来确保代码可以引用到需要的类型。


    注意:多个模块可以导入到同一个命名空间中,同理多个模块可以导入到全局命名空间中。例如:


    *目录的导入

             我们可以导入包含QML文档的目录到QML文档中。这提供一种重用QML类型的方式:文件系统上的目录

             导入目录的一般形式如下:


            注意:导入的路径是网络可传输的:应用程序可以像导入本地路径那样导入远端路径。可以查看QML文档网络传输一节中URL解析的规则。如果导入的是远端的目录,那么那么它必须包含一个目录导入列表文件,因为如果qmldir文件不存在,那么QML引擎就不能识别出远端目录中的内容。

            至于<Qualifier>的语义跟前面介绍的一样。关于这种类型的导入,更新信息请见“目录导入”。

    【目录导入】

           一个包含QML文件的本地目录可以无需任何额外配置直接导入。一个包含QML文件的远端目录也可以被导入,但是需要一个目录列表qmldir文件存在。一个本地目录也可以有一个可选的目录列表qmldir文件用以定义那些必须导入给客户端的类型名称以及指定那些必须导入给客户端的JavaScript资源。

    【本地目录导入】

           任何本地文件系统上的QML文件都可以使用导入声明以及目录的绝对或者相对路径导入本地目录,使得QML文件可以使用定义在该目录中的对象系统。

            如果本地目录包含一个目录列表qmldir文件,那么可以使用qmldir文件中指定的对象类型,否则就会使用来自QML文档文件名作为类型名。如果目录中没有qmldir文件,那么仅仅那些文件名以大写字母开头,以”.qml”结尾的文件名会作为对象类型。

    示例:

           考虑如下的QML工程目录结构。在顶层目录myapp下,有一个用于存放公共UI组件的子目录mycomponents,主要的程序代码在子目录main下:


             Main/application.qml文件可以使用相对路径导入mucomponents目录,使得应用程序可以使用该目录下的QML对象类型:


             在导入该目录的时候也可以指定一个限定词:


            导入本地路径是十分方便的,但是当目录的位置发生变化,那么我们不得不更新应用程序中的导入声明。但是这也可以通过QML模块来避免,因为一个安装的模块用一个唯一确定的字符串就可以导入,而不需要文件系统路径。

       【远端目录导入】

    如果远端目录包含一个目录列表qmldir文件,那么QML文件也可以导入远端目录。

    例如,如果之前的应用程序myapp目录存放在”http://www.my-example-server.com”,mycomponents目录包含如下定义的qmldir文件:


            接着,我们就可以使用URL来导入mycomponents远端目录了:


    注意:当导入一个远端目录,我们仅仅可以访问qmldir文件中声明的QML和JavaScript文件。

    警告:当导入远端目录时,开发者必须十分小心仅仅加载那些信任的资源而应该避免加载非法代码。

      【目录列表qmldir文件】

            目录列表文件qmldir区别于模块定义qmldir文件。目录列表qmldir文件允许一组QML文档快速简单的共享,但是它并不定义类型命名空间到文档中,它也不支持QML对象类型版本。

            目录列表qmldir文件语法如下:


            上面两行的区别在于:没有internal的代表导入该目录的QML文档可使用该对象类型;而包含internal则代表这部分的对象类型为内部的,不能供客户端使用。

             一个本地目录可选的包含qmldir文件。这允许引擎仅仅暴露明确罗列在qmldir文件中的对象类型和JavaScript资源给客户端。

      [导入目录示例]( qtdeclarative\examples\quick\tutorials\gettingStartedQml)





    *JavaScript资源的导入

            JavaScript资源可以在QML文档中直接导入。每一个JavaScript资源都必须有一个标示符用以标示对该资源的引用。

      通用的JavaScript资源导入声明如下:


     注意:这里的<Identifier>必须在文档中是唯一的,而不能像本地命名空间那样可以应用在多个模块的导入。

        模块中的JavaScript资源

      模块可以提供JavaScript文件,通过添加JavaScript资源标示符到标示模块的qmldir文件中 。

      例如,如果projects.MyQMLProject.MyFunctions模块使用如下qmldir文件指定,并且安装到了QML导入路径之中:


            那么一个应用程序就可以通过导入该模块来导入JavaScript资源,并且使用JavaScript资源的标示符来引用JavaScript资源:


           如果该模块被导入到本地的命名空间中,那么在JavaScript资源标示符之前还要加上本地命名空间的限定词才可以引用JavaScript资源,如下所示:


    更多信息

            关于JavaScript资源的更多信息,可以参见文档在QML中定义JavaScript资源,对如何导入JavaScript资源以及如何在JavaScript资源中使用导入,则可以参见文档在QML中导入JavaScript资源。

    [JavaScript资源导入示例]( qtdeclarative\examples\quick\demos\photoviewer)





    QML导入路径

         当已安装的模块被导入,QML引擎就会在导入路径中搜寻匹配的模块。

         导入路径可以使用QQmlEngine::importPathList()方法获取,定义了引擎默认搜索的路径。默认情况下包含:

    ²  当前文件所在目录

    ²  由QLibraryInfo::Qml2ImportsPath指定的路径

    ²  由环境变量QML2_IMPORT_PATH指定的路径

             我们可以通过QQmlEngine::addImportPath()或者是环境变量QML2_IMPORT_PATH添加导入路径。当执行qmlscene工具的时候,你也可以使用-I选项添加导入路径。

    调试

      在寻找以及加载模块出错的时候QML_IMPORT_TRACE环境变量就十分有用。可以查看模块导入调试获取更多的信息。

    【小结】

    QML是一种声明语言,允许定义对象和对象的属性,以及它们是如何和其它对象交互的。与原生代码相比较,在原生代码中属性和状态的改变都是经过一系列的处理传递的,但是声明性的QML语言直接在独立的对象中集成了属性和状态的改变。

    QML源代码一般都是通过QML文档由QML引擎加载的,QML引擎和QML代码是分离的。这就允许我们定义可重用的QML对象类型。

    一个QML文档的开始部分可能有一个或多个导入声明。一个导入声明可能是以下几种情况之一:

    *一个带有版本号的命名空间,对象都注册到该命名空间中(例如:插件)

    *一个包含了QML文档定义类型的相关目录

    *一个JavaScript文档

          注意:JavaScript文档导入的时候必须制定限定词,这样我们就可以引用它所提供的属性和方法。

    一般的导入类型如下:


    例如:



    1.2对象声明

            一个QML代码块定义了将被创建的QML对象树。对象都是使用对象声明定义的,对象声明描述了对象的类型以及赋予该对象的属性。每一个对象都可以使用嵌套的声明语法定义子对象。

    一个简单对象的声明如下:


           上例中声明了一个Rectangle类型的对象,之后跟着一对括号包围了该对象的属性。Rectangle对象是QtQuick模块提供的,这里定义的三个属性也都是rectangle的width,height和color属性。

            如果上述对象的声明是QML文档的一部分,那么它就可以被QML引擎加载。不过该文档必须导入QtQuick模块:


        将上述内容存入.qml文件并使用QML引擎加载,则效果如下


          注意:如果定义的对象只有少数几个属性,那么就可以像这样写在一行,各个属性之间用分号分隔:


           显然,在这个例子中定义的Rectangle对象十分简单,只是仅仅定义了它的几个属性值。要创建更加有用的对象,一个对象也许就有许多的属性:这个在QML对象属性文档中描述。另外,一个对象也可能包含子对象,我们下面就来讨论这种情况。

     1.2.1子对象

           任何对象都可以通过嵌套对象声明子对象。在这种情况下,任何对象的声明都隐式的声明了一个可能包含任意数目子对象的对象树。

           例如,一个Rectangle对象的声明可以包含一个Gradient对象的声明,而Gradient对象又包含了两个GradientStop对象的声明:


            当这个代码被QML引擎加载时,QML引擎就会创建一个以Rectangle为根对象的对象树;该根对象有一个Gradient子对象,该子对象又包含两个GradientStop子对象。

            注意:在QML对象树的上下文中是父-子关系的对象在可视化场景的上下文中不是父-子关系。在可视化场景中的父-子关系是由QtQuick模块提供的Item类型表达的,Item类型是QML类型的基本类型,因为绝大多数的QML对象都会被渲染。例如:Rectangle和Text都是基于Item类型的对象,在下面的例子中Text被作为Rectangle对象的可视化子对象声明的:


            在上述代码中,如果Text对象引用它父亲的值,那么它引用的就是它的可视化场景中的父亲,而不是对象树中的父亲。在这个例子中,它们是相同的:此时Rectangle既是Text在对象树中的父对象也是Text在可视化场景中的父对象。然而,父亲属性是可以被修改的用以改变可视化场景中的父对象,而我们是无法在QML中修改来修改对象树上下文中的父对象。

            另外,注意:Text对象并没有作为Rectangle的一个属性声明,不像之前的例子中Gradient对象是指定为rectangle的gradient属性。这是因为Item的孩子属性直接设置为了该类型的默认属性,这样可以使得语法更简单。

    可以查看可视化父对象文档获取Item类型的关于可视化父对象更多概念信息。

    1.3注释

     QML中的注释和JavaScript中的注释十分类似:

    *单行的注释是以//开始直到行尾结束;

    *多行注释是以/*开始,以*/结束


    QML引擎在处理QML代码的时候会忽略注释信息。


    展开全文
  • QML 运行环境

    千次阅读 2018-05-30 09:43:57
    QML 文档由 QML 运行环境加载和执行。这包括 Declarative UI 引擎以及内置的 QML 类型和插件模块,并且它还提供了对第三方 QML 类型和模块的访问。 使用 QML 的应用程序,需要调用 QML 运行环境才能执行 QML 文档。...
  • 《细说 QML

    万次阅读 多人点赞 2018-05-30 11:23:58
    原本想给本系列文章起一个很“叼”的名字,无奈笔者语言匮乏,绞尽脑汁才想出一个还算凑合的名字 - 《细说 QML》,关于“细说”,新华词典中有记载: 细说 [xì shuō]:详细地解说,也叫“细谈”。 果然,不仅...
  • 发现了一个很好的中文翻译的入门手册。上链接 QML中文文档
  • Qt Quick 之 QML 与 C++ 混合编程详解

    万次阅读 多人点赞 2014-08-07 12:47:14
    但它不是万能的,也有很多局限性,原来 Qt 的一些技术,比如低阶的网络编程如 QTcpSocket ,多线程,又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等,在 QML 中要么不可用,要么用起来不方便,...
  • QML官方系列教程——QML Applications

    万次阅读 多人点赞 2014-11-18 19:39:24
    QML Applications QML是一种声明式语言,它提供了一组接口用来描述视觉组件以及他们的互动和相关性。它是一个高度可读的语言,并且被设计成使组件以一个动态的方式相互连接。同时它使组件很容易被复用以及创建定制的...
  • 人脸识别系统开发(2) -- QML基础语法

    万次阅读 2018-01-02 17:21:06
    本文以代码注释的形式来说明QML的基础语法。若需要了解相关布局、控件的详细用法可以参考Qt5的在线文档:http://doc.qt.io/qt-5/,Qt官方提供了详细的示例。 QML的教程可以参考《Qt Quick核心编程》qml文件可以直接...
  • 但它也有很多局限性,比如在网络访问、硬件操作、文件处理等方面,所以在很多时候我们需要混合使用C++和QML,比如使用QML构建界面,使用C++来实现非界面的业务逻辑等。这样也就涉及到了QML和C++之间的交互了。其实,...
  • 人脸识别系统开发(5) -- QML显示QImage

    万次阅读 2018-01-03 15:59:15
    QML显示QImage的流程大致如下:1. 定义一个QQuickImageProvider派生类,实现requestImage和requestPixmap接口,返回需要显示的图片。示例:#pragma once #include #include #include <QQuickImageProvider>class ...
  • 在 C++ 中与 QML 对象交互

    万次阅读 2018-05-30 09:42:42
    所有的 QML 对象类型 - 无论由引擎内部实现还是由第三方源定义,都是 QObject 派生的类型。这意味着,QML 引擎可以使用 Qt 元对象系统动态实例化任何 QML 对象类型并检查创建的对象。 这对于在 C++ 中创建 QML 对象...
  • 用了N年的QWidget,因为项目需求而开始学习QML做一些动态的界面,下面开始记录学习QML的新路历程。 注:学习有误的望指点一二,不喜勿喷!!! QML对象类型 用语法术语来说,QML对象类型是一种可以用来声明对象的...
  • QmlBusyIndicator: Qml自定义等待指示器 QmlCheckBox: Qml自定义复选框 QmlDragDrop: Qml拖放 QmlFace: Qml表情选择框 QmlHyperlink: Qml超链接 QmlImageProvider: QmlImageProvider QmlLog4Qml: Qml写日志 Qml...
  • 用了N年的QWidget,因为项目需求而开始学习QML做一些动态的界面,下面开始记录学习QML的新路历程。 注:学习有误的望指点一二,不喜勿喷!!! C++定义QML类型 使用C++代码扩展QML时,可以在QML类型系统中注册C++类...
1 2 3 4 5 ... 20
收藏数 20,043
精华内容 8,017
关键字:

qml