树莓派Qt系列教程6： QML语言基础

前言

QML语言基础

import语句

在Qml中使用import语句的作用是为了导入模块，类似于c++中的include。空白工程中我们导入了QtQuick 2.9，此模块为创建图形用户界面提供了最基本的类型，又因为代码中使用了window类型，所以还导入了QtQuick.Window模块，window类型可以为Qt Quick场景创建一个顶级窗口。

QML对象

当对象类型被实例化以后，就叫做该对象类型的对象。如Window，它在代码中现在就是一个对象。大家可以不用十分理解。只需要记住对象就是以大写字母开头，后面跟一对大括号，在括号中包含对象的属性就可以了，后面慢慢的代码练习大家自然而然就懂啦！

QML元素和属性

Qt Quick作为一个标准库，提供了很多基本元素和控件，事实上，qml中没有对元素有一个明确的概念，我更愿意将其理解为我们接下来要学习的控件。我们先简单介绍几个常用的元素。

1. Item
Item是所有可视元素的基类，它本身不可见，但是我们可以使用Item来分组其他的可视图元,它定义了绘制图元所需要的大部分的通用属性。如x,y,width,height等
2. Rectangle
用来绘制一个填充矩形，可以带边框，也可以不带，还可以填充颜色。我们在Window对象中输入以下代码

Rectangle{
        width: 320
        height: 240
        anchors.centerIn: parent
        color: "blue"
        border.width: 2
        border.color: "black"
        radius: 4
    }

看一下属性部分，width和height是由Item定义的，anchors.centerIn定义了矩形基于window对象居中，下面的属性也很好理解，无非就是对于矩形的填充颜色以及边框的设定，最后看一下radius,这个可能稍微陌生点，它定义了矩形的四周的圆滑角度，数值越大越平滑。然后运行程序，看一下运行效果。

3. Text
可以显示纯文本或者富文本，它有非常多的属性，如果将所有的属性都讲一遍的话，那估计得好几篇文章了，不过大家看一下属性名称就基本知道是啥作用，所以还需要大家自己多学习。我们还是在上面的window对象中添加Text元素。

Text {
        id: text1
        text: qsTr("Hello World!")
        anchors.centerIn: parent
        font.pixelSize: 32
        font.bold: true
        font.italic: true
        font.capitalization: Font.AllUppercase
        font.family: "Corber"
        color: "orange"
    }

属性我们就只选了少部分给大家讲一下，需要注意的是id并不是一个属性，设置id的作用是为了在其他的对象中来获取text属性的值。所以一般需要在开头设置一个id,id值是唯一的，而且必须使用小写字母或者下划线开头，不能使用其他字符。

• text:设置显示的文字
• font.pixelSize：字体大小
• font.bold：文字是否加粗，默认false
• font.italic:文字是否倾斜，默认false
• font.capitalization:文字大小写
• font.family：文字样式
• color:文字颜色

我们运行一下，看一下这个美丽的效果

关于其他的元素，可以参考一下连接
qml中的元素

Qt Quick Controls

Qt Quick Controls 与 Qt Quick Controls 2的区别

简单理解起来就是在某些语法和控件上的区别，大家可以通过在代码中分别导入两个模块看一下控件部分的不同

直接在代码中同时调用两个模块会出错，因为qml文件只能识别到一个版本的控件。如果同时调用会出现无法识别QtQuick.Controls 2的属性或QtQuick.Controls中的style的错误。所以建议大家只使用一种就可以。我们后期的代码中会和官方文档一样，使用QtQuick.Controls 2的版本。遇到QtQuick.Controls 1的控件时会改用QtQuick.Controls 1。
最后有的小伙伴实际应用时可能会发现自己的qt里面没有安装QtQuick.Controls 2，一般如果是通过sudo apt-get install 方式安装qt的都会遇到这个问题，不要慌！在终端中输入sudo apt-get install qml-module-qtquick-controls2就可以啦！

总结