找回密码
 立即注册
收起左侧

第6篇 Qt Quick入门教程之基础(六)Qt Quick模块之Item

3
回复
6356
查看
[复制链接]
累计签到:794 天
连续签到:4 天
来源: Qt教程 2019-3-7 20:53:58 显示全部楼层 |阅读模式

导语

从这一篇开始,我们将讲述Qt Quick模块的内容, 也就是说马上可以设计漂亮的图形界面了。

Qt Quick模块简介

Qt Quick模块作为一个编写QML应用程序的标准库,提供了用于创建用户界面的所有基本类型,使用这些类型可以创建动态可视化组件、接收用户输入、创建数据模型和视图。 Qt Quick模块既提供了QML 语言接口,可以使用 QML 类型来创建用户界面,也提供了 C++ 语言接口,可以使用 C++ 代码来扩展 QML 应用。大家可以在帮助中索引Qt Quick关键字查看相关文档。

Qt Quick 就是为了炫酷流畅的触摸界面效果而生的,所以在Qt Quick中动画和过渡效果是最核心的概念,另外,还可以通过粒子或着色特效来强化视觉效果。在我们使用的Qt 5.12.0 版本中,最新的 QtQuick 模块的版本是 2.12,如果要使用这个版本,就要添加如下导入代码:

import QtQuick 2.12

当然,这个在我们以前的代码中已经多次看到了。另外,该模块还包 XmlListModel 、LocalStorage 、Particles 、Window 、Dialogs 、Controls 、Layouts 、QtTest等子模块,来提供一些特殊功能。这就是我们在第一个程序中看到的QtQuick.Window 2.2 的由来。

Item 类型

在 Qt Quick 模块中包含了众多类型,其中的 Item 类型比较特殊,因为它是所有其他可视化类型的基类型。在这里我们又要引入一个新的概念,就是 项目 , 因为英文items 翻译过来就是项目,而在Qt Quick中所有可视化类型都基于 Item,它们都被称为 可视化项目(visual items)。在后面的教程中,大家根据语境应该可以判断我们所说的项目,到底是可视化项目,还是应用程序本身。对于这个概念的翻译,在其他教程中可能会有别的叫法,但是在我们这里,咱们就统一这样来用。

尽管一个 Item 对象本身没有一个可视化的外观,但是它定义了可视化项目中所有常见的特性,比如 x 、y 、width 、height 、anchors 和键盘处理等。Item 类型最常见的用法是作为其他项目的容器,这样就可以把其他项目作为一个整体,例如:

Item {
    Image {
        source: "tile.png"
    }
    Image {
        x: 80
        width: 100
        height: 100
        source: "tile.png"
    }
    Image {
        x: 190
        width: 100
        height: 100
        fillMode: Image.Tile
        source: "tile.png"
    }
}

下面我们新建 Qt Quick Application - Empty 应用,完成后添加代码,格式如下图所示。

这里我们创建了六组代码,用于对比不同属性组合的效果。整体运行效果如下图所示。

这里主要涉及四个属性:

  • z属性:用来设置兄弟项目之间的堆叠顺序,默认值为0,也就是说后面出现的项目默认绘制在前面的项目之上;而如果设置了z值,那么拥有较大z值的项目会出现在较小z值的兄弟项目之上;如果z值为负值,那么这个项目会绘制在其父项目的下面。
  • opacity属性:opacity翻译过来就是不透明度,默认值为1.0,取值范围0.0-1.0,当为0.0的时候完全透明。
  • rotation属性:设置顺时针旋转的度数,默认值为0。
  • scale属性:这个用来设置比例因子,也就是进行缩放。默认值为1.0,当值小于1.0时,会进行缩小;当值大于1.0时,会进行放大;当值为负数时,会进行镜像翻转。

下面我们来看一下这六组代码,大家可以先看看代码,脑补下运行效果,然后看图对比下结果:

Item {
    id: group1
    x: 10; y: 10
    Text { z: 10; text: qsTr("group1") }
    Image {
        z: 1
        source: "img1"
        width: 250; height: 150
    }
    Image {
        source: "img2"
        x: 50; y: 50; width: 250; height: 150
    }
}
Item {
    id: group2
    x: 400; y: 10
    Text { z: 10; text: qsTr("group2") }
    Image {
        opacity: 0.7
        source: "img1"
        width: 250; height: 150
    }
    Image {
        source: "img2"
        x: 50; y: 50; width: 250; height: 150
        rotation: 30
    }
}
Item {
    id: group3
    x: 800; y: 10
    Text { z: 10; text: qsTr("group3") }
    Image {
        source: "img1"
        width: 250; height: 150
    }
    Image {
        opacity: 0.7
        source: "img2"
        x: 50; y: 50; width: 250; height: 150
        scale: 1.3
    }
}
Item {
    id: group4
    x: 10; y: 400
    Text { z: 10; text: qsTr("group4") }
    Image {
        opacity: 0.7
        source: "img1"
        width: 250; height: 150
        Image {
            z: -1
            source: "img2"
            x: 50; y: 50; width: 250; height: 150
        }
    }
}
Item {
    id: group5
    x: 400; y: 400
    Text { z: 10; text: qsTr("group5") }
    Image {
        opacity: 0.7
        source: "img1"
        width: 250; height: 150
        rotation: 30
        Image {
            source: "img2"
            x: 50; y: 50; width: 250; height: 150
        }
    }
}
Item {
    id: group6
    x: 850; y: 450
    Text { z: 10; text: qsTr("group6") }
    Image {
        source: "img1"
        width: 250; height: 150
        scale: -1.3
        Image {
            z: -1
            opacity: 0.7
            source: "img2"
            x: 50; y: 50; width: 250; height: 150
        }
    }
}

结语

Item 作为基类型,拥有众多属性和方法,这里咱们只是演示了以后会常用的几个属性,更多的内容会在后面慢慢讲到。


源码:

返回目录

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

累计签到:12 天
连续签到:1 天
2019-3-27 11:00:40 显示全部楼层
这是打算更新Qt5 编程入门 这本书吗,买这本书,结果里面都是5.3的,有点尴尬呀

点评

不尴尬,内容都可以用的。  详情 回复 发表于 2019-3-27 20:58
回复 支持 反对

使用道具 举报

累计签到:794 天
连续签到:4 天
2019-3-27 20:58:50 显示全部楼层
北辰 发表于 2019-3-27 11:00
这是打算更新Qt5 编程入门 这本书吗,买这本书,结果里面都是5.3的,有点尴尬呀 ...

不尴尬,内容都可以用的。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册