Qt葵花宝典阅读感受1

警告

1. 文本改变操作onTextChanged 会将每次空格键按下导致的文本改变输出到控制 台。

2. 当文本元素接收到空格键操作（用户在键盘上点击空格键），会调用 JavaScript函数increment()。

3. 定义一个JavaScript函数使用这种格式function (){....}，在这个例子中是增加 spacePressed的计数。每次spacePressed的增加都会导致它绑定的属性更 新。

注意

QML的：（属性绑定）与JavaScript的=（赋值）是不同的。 绑定是一个协议，并 且 存在于整个生命周期 。然而JavaScript赋值（=）只会产生一次效果。当一个新

的绑定生效或者使用JavaScript赋值给属性时，绑定的生命周期就会结束。例如一 个按键的操作设置文本属性为一个空的字符串将会销毁我们的增值显示：

Keys.onEscapePressed: {

    label.text = ''

}

在 点击取消 （ESC）后，再次 点击空格键 （space-bar）将不会更新我们的显示， 之前的text属性绑定（text: "Space pressed:" + spacePresses +  "times")被销 毁。

当你对改变属性的策略有冲突时（文本的改变基于一个增值的绑定并且可以被 JavaScript赋值清零），类似于这个例子，你最好不要使用绑定属性。你需要使用

赋值的方式来改变属性，属性绑定会在赋值操作后被销毁（销毁协议！）。

基本元素（Basic Elements）

元素可以被分为 可视化元素与 非可视化元素。一个可视化元素（ 例如矩形框 Rectangle ）有着几何形状并且可以 在屏幕上显示 。

一个非可视化元素（例如计时 器Timer ）提供了常用的功能， 通常用于操作可视化元素 。

现在我们将专注于 几个基础的可视化元素，例如 Item（基础元素对象）， Rectangle（矩形框） ， Text（文本） ， Image（图像）

和MouseArea（鼠标区 域）。

基础元素对象（Item Element）

Item（基础元素对象）是所有可视化元素的 基础对象，所有 其它的可视化元素都继 承自Item。它自身不会有任何绘制操作，

但是定义了所有可视化元素共有的属性：

为了更好的理解不同的属性，我们将会在这章中尽量的介绍这些元素的显示效果。 请记住这些基本的属性在 所有可视化元素 中都是 可以使用 的，

并且在这些元素中的 工作方式都是相同的。

注意

Item（基本元素对象）通常被用来 作为其它元素的容器使用，类似HTML语言中的 div元素（div element）。

矩形框元素（Rectangle Element）

Rectangle（矩形框）是 基本元素对象的一个扩展，增加了一个 颜色来填充它。它 还 支持边界 的定义，使用 border.color （边界颜色），

border.width（边界宽度）来 自定义边界。你可以使用 radius （半径）属性来 创建一个圆角矩形 。

注意：

颜色的命名是来自SVG颜色的名称（查看 http://www.w3.org/TR/css3- color/#svg-color可以获取更多的颜色名称）。你也可以使用其它的方法来指定颜

色，比如RGB字符串（'#FF4444'），或者一个颜色名字（例如'white'）。 此外，填充的颜色与矩形的边框也支持自定义的渐变色。

一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。位置标 记了y轴上的位置（0 = 顶，1 = 底）。

GradientStop（倾斜点）的颜色标记了颜色 的位置。

注意

一个 矩形框如果没有width/height（宽度与高度）将不可见。如果你有几个相互关 联width/height（宽度与高度）的矩形框，

在你组合逻辑中出了错后可能就会发生 矩形框不可见，请注意这一点。

注意

这个函数无法创建一个梯形，最好使用一个已有的图像来创建梯形。有一种可能是 在旋转梯形时，旋转的矩形几何结构不会发生改变，

但是这会导致几何元素相同的 可见区域的混淆。从作者的观点来看类似的情况下最好使用设计好的梯形图形来完 成绘制。

文本元素（Text Element）

显示文本你需要使用 Text元素（Text Element）。它最值得注意的属性时字符串类 型的 text属性 。这个元素会使用给出 的text（文本）

与font（字体）来计算初始化的 宽度与高度。可以使用字体属性组来（font property group）来改变当 前的字体， 例如font.family，

font.pixelSize，等等。 改变文本的颜色值只需要改变颜色属性 就 可以了。

文本可以使用 horizontalAlignment与verticalAlignment属性来设置它的对齐效果。为 了提高文本的渲染效果，你可以使用style和

styleColor属性来配置文字的外框效 果 ，浮雕效果或者凹陷效果。对于过长的文本，你可能需要使用省略号来表示，例 如A very ...

 long text，你可以使用elide属性来完成这个操作。elide属性允许你设置 文本左边，右边或者中间的省略位置。如果你不想'....'省略号

出现，并且希望使用 文字换行的方式显示所有的文本，你可以 使用wrapMode属性 （这个属性只在明确 设置了宽度后才生效）：

一个text元素（text element） 只显示的文本，它不 会渲染任何背景修饰。除了显示 的文本， text元素背景是透明的 。为一个文本元素提供

背景是你自己需要考虑的问 题。

注意

知道一个文本元素（Text Element）的 初始宽度与高度是依赖于文本字符串和设置 的字体这一点很重要。一个没有设置宽度或者文本的文本

元素（Text  Element）将 不可见，默认的初始宽度是0。

注意

通常你想要 对文本元素布局时，你需要区分文本 在文本元素内部的边界对齐和由 元 素边界自动对齐。前一种情况你需要使用horizontalAlignment

和 verticalAlignment属性 来完成，后一种情况你需要 操作元素的几何形状 或者使用 anchors（锚定）来完成。

图像元素（Image Element）

一个图像元素（Image Element）能够显示不同格式的图像（例如 PNG,JPG,GIF,BMP）。想要知道更加详细的图像格式支持信息，可以查看Qt的相

关文档。 source属性（source property）提供了图像文件的链接信息， fillMode（文 件模式）属性能够 控制元素对象的大小 调整行为。

注意

一个URL可以是 使用'/'语法的本地路径（"./images/home.png"）或者一个 网络链 接（"http://example.org/home.png"）。

注意

图像元素（Image element）使用 PreserveAspectCrop可以避免裁剪图像数据被 渲染到图像边界外。默认情况下裁剪是被禁用

的（clip:false）。你需要打开裁剪 （clip:true） 来约束边界矩形的绘制。这 对任何可视化元素都是有效 的。

建议

使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器，这允许 你动态创建图像并且使用线程加载。

鼠标区域元素（MouseArea Element）

为了与不同的元素交互，你通常需要使用MouseArea（鼠标区域）元素。这是一个 矩形的 非可视化元素对象 ，你可以通过它来 捕捉

鼠标事件。当用户与可视化端口交 互时，mouseArea通常被用来与可视化元素对象 一起执行命令 。

注意

这是QtQuick中非常重要的概念， 输入处理与可视化显示分开。这样 你的交互区域 可以比你显示的区域大很多 。

组件（Compontents）

一个组件是一个可以重复使用的元素，QML提供 几种不同的方法来创建组件。但是 目前我们只对 其中一种方法 进行讲解： 一个文件就是一个基础组件 。

一个以文件为 基础的组件在文件中创建了一个QML元素，并且将文件以元素类型来命名（例如 Button.qml）。你可以像任何其它的QtQuick模块中

使用元素一样来使用这个组件。

在我们下面的例子中，你将会使用你的代码作为一个Button（按钮）来使用。 让我们来看看这个例子，我们 创建了一个包含文本和鼠标区域的矩形框 。

它类似于 一个简单的按钮，我们的目标就是让它足够简单。

我们的目标是 提取这个按钮作为一个可重复使用的组件。我们可以简单的考虑一下 我们的按钮会有的哪些API（应用程序接口），

你可以自己考虑一下你的按钮应该 有些什么。下面是我考虑的结果：