导语不知不觉中春天已经来了,突然的一个晴天,久违的蓝天白云,让一切都显得那么美好!建议大家抽时间出去走走,感受一下大自然的美好和无限生机! 这一篇我们来看一下前面经常用到的 Rectangle 项目,在讲解中还会涉及坐标系统的基本概念。 可视化画布 (The visual Canvas)在前面的示例中我们已经看到,Qt Quick界面的左上角的坐标为 (0, 0) ,也就是常说的原点。在这里我们做一个规范点的总结: Qt Quick提供了一个拥有 z 排序的二维可视画布,它包含两个坐标系统,分别是项目坐标和场景坐标。
下面再通过一段代码来具体看一下坐标系统: Window { 代码运行效果如下图所示。 红色矩形没有指定x、y属性,默认值均为0,所以其原点就在窗口的左上角,这时左上角也是场景的原点;蓝色矩形放置在了其父项目也就是红色矩形的 (100, 100) 点;绿色矩形也没有指定x、y属性,所以默认也会放置在(0, 0)点,但是因为它的父项目为蓝色矩形,所以它在蓝色矩形的左上角。 RectangleRectangle可以说是Qt Quick中最简单的可视化项目之一,它可以使用纯色或渐变色来填充一个区域,并且可以提供一个矩形的边框。在帮助文档中索引关键字 Rectangle ,可以查看该项目的的介绍,开头如下图所示:这里的 Import Statement: import QtQuick 2.12 表明要使用该项目需要添加 import QtQuick 2.12 导入语句;而 Inherits: Item 表明该项目继承自 Item ; 下面的 List of all members, including inherited members 表明可以点击查看该项目的包括从父项目继承过来的所有成员;而下面 Properties 中是Rectangle特有的属性。可以看到除了从Item继承过来的属性之外,它只包含下面几个属性:
先看 color 和 gradient 属性,前者用来设置纯色,后者用来设置渐变色;border 是属性组,包括边框宽度 border.width 和边框颜色 border.color ,默认是没有边框的,除非设置了边框宽度,但如果边框宽度设置为很大的值会怎样呢?大家先思考下;然后是 radius,用于绘制圆角矩形的角半径,四个角会同时使用相同的角半径,角半径要设置为多少合适呢?这个大家也可以自己研究下;当绘制圆角矩形时 antialiasing 属性默认为 true,用于抗锯齿,否则为 false,所以一般这个属性不用设置。 下面来看一个例子: Window { 代码运行效果如下图所示。 这里大家主要看一下绿色圆形的边界和蓝色正方形的边界,得到结论:边框会绘制在矩形的边界之内,所以边框的宽度并不影响矩形的位置和布局。 结语本篇的内容比较简单,不过里面也包含了一些重要的技能,比如在帮助中查看一个项目的文档,以及如何来研究一个属性的具体使用及一些模糊问题。 相关文章第6篇 Qt Quick入门教程之基础(六)Qt Quick模块之Item ---------------------------------------------------------------------------------------------------------------------- 我们尊重原创,也注重分享,文章来源于微信公众号:yafeilinux和他的朋友们,建议关注公众号查看原文。如若侵权请联系qter@qter.org。 ---------------------------------------------------------------------------------------------------------------------- |