QML之三：基本元素

目录

基本元素

基础元素对象

矩形框元素

文本元素

图像元素

鼠标区域元素

---

基本元素

元素可以被分为可视化元素与非可视化元素：

• 可视化元素（例如矩形框 Rectangle）有着几何形状并且可以在屏幕上显示

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

基础元素对象

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 通常被用来作为其它元素的容器使用

矩形框元素

Rectangle（矩形框）是基本元素对象的一个扩展：

• 增加了一个颜色来填充它

• 它还支持边界的定义，使用 border.color（边界颜色），border.width（边界宽度）来自定义边界

• 可以使用 radius（半径）属性来创建一个圆角矩形

• 可以使用 Gradient 创建渐变色

import QtQuick 2.2
import QtQuick.Window 2.2
​
Window{
    height: 600;width: 800
​
    Rectangle {
        id: rect1
        x: 10; y: 10
        width: 100; height: 100
        color: "lightsteelblue"
    }
​
    Rectangle {
        id: rect2
        x: rect1.width + 100; y : 10
        width: 100; height: 100
        border.color: "lightsteelblue"
        border.width: 4
        radius: 8
    }
​
    Rectangle {
        id : rect3
        x: rect1.width + 100 + rect2.width + 100; y : 10
        width: 100;height: 100
        color: "red"
        border.color: "black"
        border.width: 5
        radius: 10
    }
​
    Rectangle{
        id : rect4
        x: rect1.width + 100 + rect2.width + 100 + rect3.width + 100; y : 10
        width: 100;height: 100
        gradient: Gradient{
            GradientStop{position: 0.0;color: "green"}
            GradientStop{position: 1.0;color: "red"}
        }
​
        border{width:2;color: "blue"}
    }
}

运行：

注意:

• 颜色的命名，可以使用：

  • SVG 颜色的名称

  • 也可以使用 RGB 字符串，例如 #FF4444 ，或者颜色名字，如 white

• 一个矩形框如果没有width/height（宽度与高度）将不可见

文本元素

显示文本需要使用 Text元素（Text Element）：

• 会使用给出的 text（文本）与 font（字体）来计算初始化的宽度与高度

• 可以使用字体属性组来（font property group）来改变当前的字体，例如：font.family，font.pixelSize

• 改变文本的颜色值只需要改变颜色属性就可以了

• 可以使用 horizontalAlignment 与 verticalAlignment 属性来设置它的对齐效果

• 可以使用 style 和 styleColor 属性来配置文字的外框效果，浮雕效果或者凹陷效果

• 对于过长的文本，可能需要使用省略号来表示，例如：A very ... long text，可以使用 elide 属性来完成这个操作，elide 属性允许你设置文本左边，右边或者中间的省略位置。如果你不想 .... 省略号出现，并且希望使用文字换行的方式显示所有的文本，你可以使用 wrapMode 属性（这个属性只在明确设置了宽度后才生效）

• 一个 text 元素（text element）只显示的文本，它不会渲染任何背景修饰

import QtQuick 2.2
import QtQuick.Window 2.2
​
Window{
    height: 600;width: 400
​
    Text {
        id: text1
        text: "The quick brown fox"
        color: "#303030"
        font.family: "Ubuntu"
        font.pixelSize: 28
    }
​
    Text {
        x : 0
        y : text1.height + 50
        width: 100; height: 120
        text: 'A very long text'
        // '...' shall appear in the middle
        elide: Text.ElideMiddle
        // red sunken text styling
        style: Text.Sunken
        styleColor: '#FF4444'
        // align text to the top
        verticalAlignment: Text.AlignTop
        // only sensible when no elide mode
        // wrapMode: Text.WordWrap
        font.pixelSize: 20
    }
}

运行：

注意:

• 知道一个文本元素的初始宽度与高度是依赖于文本字符串和设置的字体这一点很重要。一个没有设置宽度或者文本的文本元素将不可见，默认的初始宽度是0

• 想要对文本元素布局时，你需要区分文本在文本元素内部的边界对齐和由元素边界自动对齐。前一种情况需要使用 horizontalAlignment 和 verticalAlignment 属性来完成，后一种情况你需要操作元素的几何形状或者使用 anchors 来完成。

图像元素

一个图像元素（Image Element）能够显示不同格式的图像，例如：PNG，JPG，GIF，BMP。

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

import QtQuick 2.2
import QtQuick.Window 2.2
​
Window{
    height: 1000;width: 800
​
    Image {
            id : img1
            x: 12; y: 12
            source: "./lena.jpg"
        }
​
    Image {
        x: 12
        y: img1.height +20
        width: 200
        height:200
        source: "./lena.jpg"
        fillMode: Image.PreserveAspectCrop
        clip: true
    }
}

注意:

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

• 图像元素使用 PreserveAspectCrop 可以避免裁剪图像数据被渲染到图像边界外。默认情况下裁剪是被禁用的（clip:false）。你需要打开裁剪（clip:true）来约束边界矩形的绘制。这对任何可视化元素都是有效的

鼠标区域元素

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

import QtQuick 2.2
import QtQuick.Window 2.2
​
Window{
    height: 1000;width: 800
​
    Rectangle {
            id: rect1
            x: 12; y: 12
            width: 76; height: 96
            color: "lightsteelblue"
            MouseArea {
                id: area
                width: parent.width
                height: parent.height
                onClicked: rect2.visible = !rect2.visible
            }
        }
​
        Rectangle {
            id: rect2
            x: 112; y: 12
            width: 76; height: 96
            border.color: "lightsteelblue"
            border.width: 4
            radius: 8
            MouseArea{
                width: parent.width
                height: parent.height
                onClicked: rect1.visible = !rect1.visible
            }
        }
}

运行：

注意:

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