【QML 快速入门】基本元素

目录

• 一、可视化元素
  • 1.1 基本项元素（Item）
  • 1.2 矩形元素（Rectangle）
  • 1.3 文本元素（Text）
  • 1.4 图像元素（Image）
• 二、 非可视化元素
  • 2.1 鼠标区域元素（MouseArea）
  • 2.2 按键元素（Keys）

 

---

元素可以被分为可视化元素与非可视化元素。一个可视化元素（例如矩形框 Rectangle）有着几何形状并且可以在屏幕上显示。一个非可视化元素（例如计时器 Timer）提供了常用的功能，通常用于操作可视化元素。

现在我们将专注于几个基础的可视化元素，例如 Item（基本项元素），Rectangle（矩形框），Text（文本），Image（图像）和 MouseArea（鼠标区域）。

回到顶部

一、可视化元素

1.1 基本项元素（Item）

Item 是所有可视化元素的基类，所有其它的可视化元素都继承自 Item。它自身不会有任何绘制操作，但是定义了所有可视化元素共有的属性：

Group（分组）	Properties（属性）
Geometry（几何属性）	x,y（坐标）定义了元素左上角的位置，width，height（长和宽）定义元素的显示范围，z（堆叠次序）定义元素之间的重叠顺序。
Layout handling（布局操作）	anchors（锚定），包括左（left），右（right），上（top），下（bottom），水平与垂直居中（vertical center，horizontal center），与margins（间距）一起定义了元素与其它元素之间的位置关系。
Key handlikng（按键操作）	附加属性key（按键）和keyNavigation（按键定位）属性来控制按键操作，处理输入焦点（focus）可用操作。
Transformation（转换）	缩放（scale）和rotate（旋转）转换，通用的 x, y, z 属性列表转换（transform），旋转基点设置（transformOrigin）。
Visual（可视化）	不透明度（opacity）控制透明度，visible（是否可见）控制元素是否显示，clip（裁剪）用来限制元素边界的绘制，smooth（平滑）用来提高渲染质量。
State definition（状态定义）	states（状态列表属性）提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions（转变）属性列表来定义状态转变动画。

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

注意：

• Item 通常被用来作为其它元素的容器使用，类似 HTML 语言中的 div 元素（div element）。
• Item 的属性 opacity 可以指定一个图元的透明度，取值在 0.0 到 1.0 之间。
• z 属性用来指定图元在场景中的 Z 序。z 属性的类型是 real，数值越小，图元就越垫底（远离我们）；数值越大，图元就越靠近我们。
• 虽然 Item 本身不可见，但你可以使用 Item 来分组其他的可视图元。分组后可以通过 Item 的 children 或 visibleChildren 属性来访问子对象元素。

1.2 矩形元素（Rectangle）

Rectangle 是基本元素对象的一个扩展，增加了一个颜色来填充它。它还支持边界的定义，使用 border.color（边界颜色），border.width（边界宽度）来自定义边界。你可以使用 radius（半径）属性来创建一个圆角矩形。

Rectangle {
    id: rect1
    x: 12; y: 12
    width: 176; height: 96
    gradient: Gradient {
    	GradientStop { position: 0.0; color: "lightsteelblue" }
    	GradientStop { position: 1.0; color: "slategray" }
    }
    border.color: "slategray"
}

注意：

• 颜色的命名是来自 SVG 颜色的名称（查看http://www.w3.org/TR/css3-color/#svg-color可以获取更多的颜色名称）。
• gradient 属性则用来设置渐变色供填充使用，如果你同时指定了 color 和 gradient，那么 gradient 生效；如果你设置 color 属性为 transparent，那么就可以达到只绘制边框不填充的效果。
• 一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。位置标记了y轴上的位置（0 = 顶，1 = 底）。GradientStop（倾斜点）的颜色标记了颜色的位置。

1.3 文本元素（Text）

Text 可以显示纯文本或者富文本。

• 可以使用Html标记：text: “<b>HELLO</b>” 。
• 换行：wrapMode 属性，没有设置，则单行（这个属性只在明确设置了宽度后才生效）。
• horizontalAlignment：水平对齐方式； verticalAlignment: 垂直对齐方式。
• 为了提高文本的渲染效果，你可以使用 style 和 styleColor 属性来配置文字的外框效果，浮雕效果或者凹陷效果。
• elide 属性允许你设置文本左边，右边或者中间的省略位置。
• Text 只显示文本，不会渲染任何背景修饰。除了显示的文本，Text 背景是透明的。为一个文本元素提供背景是你自己需要考虑的问题。

Text {
    text: "The quick brown fox"
    color: "#303030"
    font.family: "Ubuntu"
    font.pixelSize: 28
}

1.4 图像元素（Image）

Image 能够显示不同格式的图像（例如 PNG, JPG, GIF, BMP）。它只能显示静态图片，对于 GIF 等格式，只会把第一帧显示出来。如果要显示动画，则可以使用 AnimatedSprite 或者 Animatedlmage 元素。

• Image 的 width 和 height 属性用来设定图元的大小，如果没有设置它们，那么 Image 会使用图片本身的尺寸。如果设置了 width 和 height，那么图片就可能会被拉伸来适应这个尺寸。
• Image 默认会阻塞式地加载图片，如果要显示的图片很小，则没什么问题，如果分辨率很高，那麻烦就来了。此时你可以设置 asynchronous 属性为 true 来开启异步加载模式，在这种模式下 Image 使用一个线程来加载图片，而你可以在界面上显示一个等待图标之类的小玩意儿来告诉用户他需要等会儿。然后，当 status （枚举值）的值为 Image.Ready 时再隐藏加载等待图元。
• Image 支持从网络加载图片。它的 source 属性类型是 url，可以接受 Qt 支持的任意一种网络协议，比如 http、ftp 等。而当 Image 识别到你提供的 source 是网络资源 时，会自动启用异步加载模式。此时 Image 的 progress （取值范围是0.0〜1.0）、status （枚举 值）都会适时更新，你可以根据它们判断何时结束加载等候提示界面。
• Image 使用 PreserveAspectCrop 可以避免裁剪图像数据被渲染到图像边界外。默认情况下裁剪是被禁用的（clip:false）。你需要打开裁剪（clip:true）来约束边界矩形的绘制。这对任何可视化元素都是有效的。

下面显示网络上的图片，在下载和加载前显示一个转圈圈的 Loading 图标，图片加载成功后隐藏 Loading 图标，如果加载出错，则显示一个简单的错误消息。示例如下：

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
    id: text
    width: 480
    height: 320

    // 用来显示一个等待图元
    BusyIndicator {
        id: busy
        running: true
        anchors.centerIn: parent
        z: 2
    }

    Text {
        id: stateLabel
        visible: false
        anchors.centerIn: parent
        z: 3
    }

    Image {
        id: imageViewer
        // 开启异步加载模式，专门使用一个线程来加载图片
        asynchronous: true
        // 图片较大的情况下,指定不缓存图像(cache默认为true)
        cache: false
        anchors.fill: parent
        // 设置图片的填充模式为“等比缩放”
        fillMode: Image.PreserveAspectFit
        onStatusChanged: {
            if (imageViewer.status === Image.Loading) {
                busy.running = true; // 图片为“加载状态”，则显示“等待图元”
                stateLabel.visible = false
            }
            else if(imageViewer.status === Image.Ready)
                busy.running = false; // 图片为“准备好的状态”，则不再显示“等待图元”
            else if(imageViewer.status === Image.Error) {
                busy.running = false;
                stateLabel.visible = true // 图片为“加载失败状态”，则显示“Error”文本
                stateLabel.text = "Error"
            }
        }

        // 上面都执行完了，再显示图片
        Component.onCompleted: {
            imageViewer.source = "https://www.cnblogs.com/images/cnblogs_com/linuxAndMcu/1348721/o_o_misaka.jpg"
        }
    }
}

Image对象，设置了 asynchronous 属性为true，不过对于网络资源 Image 默认异步加载， 这个属性不起作用，只有你想异步加载本地资源时才需要设置它。cache 属性设置为 false，告诉 Image 不用缓存图片。fillMode 属性设置了等比缩放模式。

回到顶部

二、 非可视化元素

2.1 鼠标区域元素（MouseArea）

为了与不同的元素交互，你通常需要使用 MouseArea（鼠标区域）元素。这是一个矩形的非可视化元素对象，你可以通过它来捕捉鼠标事件。当用户与可视化端口交互时，mouseArea 通常被用来与可视化元素对象一起执行命令。

很多时候，MouseArea 区域会传递一个鼠标事件作为参数，这个参数中包含了很多鼠标事件信息，例如，单击的位置，具体按下的一个鼠标左键还是右键，以及一些键盘按键信息。

Rectangle {
     width: 100; height: 100
     color: "green"

     MouseArea {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton | Qt.RightButton
         onClicked: {
             if (mouse.button == Qt.RightButton)
                 parent.color = 'blue';
             else
                 parent.color = 'red';
         }
     }
 }

在上面的例子中，当 Rectangle 区域被右键单击时会触发改变颜色。

2.2 按键元素（Keys）

前面提到 Item 可以处理按键，所有从 Item 继承的元素都可以处理按键，比如 Rectangle、 Button。Item 通过附加属性 Keys 来处理按键。

Keys 对象是 Qt Quick 提供的、专门供 Item 处理按键事件的对象。

• 它定义了很多针对特定按键的信号，比如 pressed 和 released 信号，一般地，你可以使用这两个信号来处理按键（请对照 Qt C++ 中的 keyPressEvent 和 keyReleaseEvent 来理解）。
• 它们有一个类型为 KeyEvent、名字是 event 的参数，包含了按键的详细信息。如果一个按键被处理，event.accepted 应该被设置为 true，以免它被继续传递。

这里举一个简单的例子,检测到 Escape 和 Back 键时退出应用，检测到数字键时，就通过 Text 来显示对应的数字。示例程序如下：

import QtQuick 2.0

Rectangle {
    width: 300
    height: 200

    focus: true
    Keys.onEscapePressed: Qt.quit()
    Keys.onBackPressed: Qt.quit()
    Keys.onPressed: {
        switch(event.key) {
        case Qt.Key_0:
        case Qt.Key_1:
        case Qt.Key_2:
        case Qt.Key_3:
        case Qt.Key_4:
        case Qt.Key_5:
        case Qt.Key_6:
        case Qt.Key_7:
        case Qt.Key_8:
        case Qt.Key_9:
            event.accept = true
            keyView.text = event.key - Qt.Key_0;
            break;
        }
    }

    Text {
        id: keyView
        anchors.centerIn: parent
        font{ bold: true; pixelSize: 24}
        text: qsTr("text");
    }
}

参考：

基本元素（Basic Elements）