qml 改变组件大小 其他也随着改变_QML的基本元素简介

QML中元素的分类

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

基础元素对象Item

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

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

注意Item通常被用来作为其它元素的容器使用，类似HTML中的div。

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

Rectangle(矩形框元素)

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

import QtQuick 2.3import QtQuick.Window 2.2Window {    visible: true    width: 640    height: 480    Rectangle {        id: rect1        x: 12; y: 12        width: 76; height: 96        color: "cyan"    }    Rectangle {        id: rect2        x: 112; y: 12        width: 76; height: 96        border.color: "cyan"        border.width: 4        radius: 8    }}

上面的代码效果如下：

上述颜色的命名是直接使用颜色的名字，也可以使用其它的方法来指定颜色，比如RGB字符串('#FF4444')，或者SVG颜色的名称，比如“lightsteelblue”。

此外，填充色与矩形的边框也支持自定义的渐变色。一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。位置标记了y轴上的位置(0=顶部，1=底部)。GradientStop(倾斜点)的颜色标注了颜色的位置。

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"        radius: 8    }

实现效果如下：

注意，一个矩形框如果没有width/height属性，将不可见。如果你有几个相互关联width/height的矩形框，在你组合逻辑中出了错后，可能就会发生矩形框不可见。而且这个元素无法创建一个梯形，最好使用一个已有的图像来创建梯形。

Text(文本元素)

Text可以显示文本，它最值得注意的属性是字符串类型的text属性。这个元素会使用给出的text(文本)与font(字体)来计算初始化的宽度和高度，一个没有设置宽度或者文本的Text元素将不可见，因为默认的初始宽度是0。可以使用字体属性组来改变当前的字体，例如font.family，font.pixelSize，等等。改变文本的颜色值只需要改变颜色属性就可以了。

Text {        text: "我是 Mikasoi 啊!"        color: "red"        font.family: "Sans-serif"        font.pixelSize: 28    }

实现效果如下：

文本可以使用horizontalAlignment与Alignment属性来设置它的对齐效果。为了提高文本的渲染效果，可以使用style和styleColor属性来配置文字的外框效果，浮雕效果或者凹陷效果。对于过长的文本，你可能需要使用省略号来表示，可以使用elide属性来完成这个操作。elide属性允许你设置文本左边，右边或者中间的省略位置。如果不想省略号出现，并且希望使用文字换行的方式显示所有的文本，可以使用wrapMode属性，主要wrapMode属性只在明确设置了宽度后才生效。

Text {        width: 350; height: 120        text: "空山新雨后，天气晚来秋。明月松间照，清泉石上流。竹喧归浣女，莲动下渔舟。随意春芳歇，王孙自可留。"        //省略        //elide: Text.ElideMiddle        //换行        wrapMode: Text.WordWrap        style: Text.Sunken        styleColor: "#FF4444"        font.family: "Sans-serif"        font.pixelSize: 28        verticalAlignment: Text.AlignTop    }

使用省略的效果如下：

使用换行的效果如下：

Image(图像元素)

Image元素能够显示不同格式的图像(例如PNG、JPG、GIF、BMP等)。source属性提供了图像文件的链接信息，fillMode属性能够控制元素对象的大小调整行为。

Image {        x: 12; y: 12        source: "qrc:/image/1.jpg"    }    Image {        x: 12; y: 450        width: 48        height: 118/2        source: "qrc:/image/1.jpg"        fillMode: Image.PreserveAspectCrop        clip: true    }

实现效果如下：

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

MouseArea(鼠标区域元素)

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

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    }

实现效果如下，当点击左侧的Rectangle时，右侧的Rectangle会在显示和隐藏状态之间切换。