立即注册 找回密码

微雪课堂

搜索
微雪课堂 树莓派 树莓派QT教程 查看内容

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

2020-7-15 09:29| 发布者: dasi| 查看: 9374| 评论: 0|原作者: dasi

摘要: 这一节将学习一下QML的语言基础。

前言

我们在上一篇文章中教大家如何创建工程,接下来是不是要学习控件部分的知识了?先不要着急,在此之前,我们先通过上一节中的工程项目来学习一下QML的语言基础,如果你不是零基础小伙伴,可以略过这一节哦!

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

后面我们会涉及到其他的控件,最常用的就是需要导入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就可以啦!

总结

学习完了这一节,是不是对Qt quick有了更浓厚的兴趣?毕竟这个界面效果是真香。接下来就是各种控件啦,大家先自己预习一下吧!我们下节再会。

236

顶一下

刚表态过的朋友 (236 人)

相关阅读

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2024-11-2 22:35 , Processed in 0.012395 second(s), 13 queries .

返回顶部