当前位置:   article > 正文

QML学习【一】QML语言基础

qml

QML语言基础

首先我们要理解QML语言是什么,我们可以了联想C++与STL的关系来理解QML与Qt Quick的关系、QML是一种说明性语言,支持ECMAScript表达式。如果说你有学习过QT那么学习QML我相信也不是一件难事,之前在QT时用QSS来制作很好看到样式,在QML中这一切都变得简单,QML提供了高可读性、声明式、类CSS的语法

1.对象

如果我们创建一个最简单的qml文件:

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这个文件最上面的import语句,就是将QtQuick模块引入,下面的window{} 语句就是定义了一个window对象,对象的后面需要加上花括号{}。那么我们第一步定义对象就很简单只需要类名+{},其他的我们先省略。

那么我们再看一组例子

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageView")
    Image {
        id: mqm
        source: "image/14.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
    }
 }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

这里我们创建了一个ApplicationWindow的对象其中又包含了一个Image对象,说明对象之间可以进行嵌套。

这里所提到的Window、 ApplicationWindow和Image都是Qt Quick所提供的内置类,我们这里先只讲对象

2.属性

QML当中的属性就相当于类的成员变量,拿我们上面的例子来说

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageView")
	Image {
    	id: mqm
   		 source: "image/14.png"
    	anchors.fill: parent
    	fillMode: Image.PreserveAspectFit
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

width、height以及下面的都是我们对象的属性,如你所见,他们的初始化语句为

property:value
  • 1

本人非常喜欢这种可以不写;的语句,也是我一直学习QML的动力,但是可以在后面写上;也是自然没有问题,如果说多个属性不想分行书写想写在一行,就必须用;隔开如:

Image {  id: mqm;source: "image/14.png";anchors.fill: parent;fillMode: Image.PreserveAspectFit;}
  • 1

2.1 属性的类型

一个属性所对应的值都是有类型的,下面是我们常用的类型:

属性类型

这些类型都是ECMAScript语言的基本类型相对性的
在这里插入图片描述

也可以在帮助文档中搜索QML Basic Types 进行了解

注意:属性类型的值只能为该属性匹配的值,拿我们上面的例子举例

Window {
    width: 640 //int
    height: 480 //int
    visible: true //bool
}
  • 1
  • 2
  • 3
  • 4
  • 5

2.2列表属性

QML对象的列表属性(类型为list) 话不错说我们先看例子

import QtQuick 2.0

Item {
    width: 100; height: 100

    states: [
        State { name: "activated" },
        State { name: "deactivated" }
    ]

    Component.onCompleted: {
        console.log("Name of first state:", states[0].name)
        for (var i = 0; i < states.length; i++)
            console.log("state", i, states[i].name)
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

看着很长我们把我们来简化一下:

Item { 
states: [
    State { },
    State {  }
]
Component.onCompleted: {}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

这里states就是我们的代码块和Array一样 可以用[value1,value2…]来给list对象赋值,相信大家也发现了我们可以通过states[i]进行访问其中的变量。

注意 QML中列表中包含的只能是QML对象,如果想要包含int bool 等字面量就要用val 变量,这点与其他语言不同。

大家肯定会对例子中Component.onCompleted有疑问,如果你学过QT这个就是QT当中的槽函数,我把这部分内容放到了最下面

3.表达式

其实如我们开头所说,QML是支持ECMAScript表达式的,我们上面的代码实际上就是ECMAScript表达式

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageView")
	Image {
    	id: mqm
   		 source: "image/14.png"
    	anchors.fill: parent
    	fillMode: Image.PreserveAspectFit
	}
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

可能不好看我们就将他简化

ApplicationWindow {
    width: 640
    height: 480
    visible: true
}
  • 1
  • 2
  • 3
  • 4
  • 5

这样就初始化了ApplicationWindow对象的宽和高以及是否可见等属性。若你很想知道上面长代码的意思,这里的id(mqm)就是这里Image对象的唯一id ,每个对象都可以指定一个id,我们可以通过这个id来引用某个对象 ,访问他自身所拥有的属性和方法,就相当于C++中的全局变量。source就是指出图片所在路径,anchors这个这里就先掠过,fillmode我们也先别管吧。我们先知道QML语法就ok了。

4.信号处理器(槽)

在QT中我们定义槽都是要直接定义槽函数,QML作为替代品肯定将这一概念进行延续,在QML中我们是直接定义on就可以对槽函数进行定义了

Component.onCompleted: {
        console.log("Name of first state:", states[0].name)
        for (var i = 0; i < states.length; i++)
            console.log("state", i, states[i].name)
    }
  • 1
  • 2
  • 3
  • 4
  • 5

那如果是QT中的按钮的clicked()就可以写成:onClicked:

结语

本人在学习QML时在网上发现资源太少太杂,本人英语基础很差,硬生生的逼着自己开始看帮助文档,发现学QT以及QML总归不能脱离帮助文档,希望本文章对你有帮助,之前C++也出过类似文章,不过由于太耗费时间,网上也肯定有比我总结的更好的文章,还看到了别的博主的总结,写的太好了,于是就没有更新下去,希望能跟大家一起进步,如果感觉还不错麻烦点个赞,能够给予我继续更下去的动力,如果觉得不好或者说有错误,欢迎评论指正,希望我们一同学习一同进步。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/117407
推荐阅读
相关标签
  

闽ICP备14008679号