QML学习笔记2-基本元素-组件-转换

基本元素

元素类型：可视化元素、非可视化元素

1 基础元素对象 

Item(基础元素)是所有可视化元素的基础对象，所有其他可视化元素都继承自Item，它自身不会有任何绘制操作，它的作用是定义所有可视元素的通用属性

Geomery(几何属性)：x,y(坐标)定义元素左上角位置，width(长) height(宽) z(堆叠次序)定义元素的重叠顺序
     
Layout Handling(布局操作): anchors(锚定)，包括left(左) right(右) top(上) bottom(下),
                           水平与垂直居中(horizontal center / vertical center),
                           与margins(间距)一起定义了元素与其他元素之间的位置关系
                           
KeyHandlikng(按键操作):key和KeyNavigation属性用于控制键盘;focus属性则用于启动键盘处理，也就是获取焦点
  
Transformation(转换): scale(缩放)和rotate(旋转)转换，通过x,y,z属性列表转换(transform), 旋转基点设置(transformOrigin) 
                           
Visual(可视化): Opacity(透明度) 控制透明度          visible(是否可见) 控制元素是否显示
                clip(裁剪)属性用于剪切元素             smooth(平滑)用来提高渲染质量

State Definition(状态定义): states(状态列表属性)提供了元素当前所支持的状态列表，当前属性的改变也可以使用transitions(转换)属性列表来定义转变动画

除了定义通用属性，Item另外一个重要作用是作为其它可视元素的容器。

2 矩形框元素 (Rectangle)

Rectangle(矩形框)继承了Item, 并在Item的基础上增加了颜色属性(color)和边框属性(border), 为了定义圆角矩形还定义了一个radius属性
QML中颜色值可以使用颜色名字， 也可以使#十六进制的形式， 颜色名字同SVG颜色定义一致
Rectangle还有一个 gradient  渐变填充属性
例子：

Rectangle{
    id: rect
    width: 100; height: 150
    border{
        color: "green"
        width: 4
    }
    gradient: Gradient{
        GradientStop{position: 0.0; color: "red"}
        GradientStop{position: 0.4; color: "yellow"}
        GradientStop{position: 1.0; color: "blue"}
    }
}

gradient 要求一个 Gradient 对象, 该对象需要一个GradientStop对象列表， Gdadient对象有两个属性position(位置)和color(颜色)
---> Rectangle必须同时制定宽和高，否则的话不能在屏幕上显示出来，这是一个常见的错误

3 文本元素(Text Element)

Text Element(文本元素)最值得注意的属性是字符串类型的Text属性，这个属性类型是string
这个元素会使用给出的 text(文本)与font(字体)来计算初始化的宽度与高度，一个没有设置宽度或者文本的文本元素将不可见，默认的初始宽度是0。
可以使用字体属性组(font propery group)来改变当前的字体如：font.family, font.pixelSize等。 修改color属性可以调整文本的颜色
例子：

Text{
    id: text
    text: "Hello World"
    font.family: "Century"
    font.pixelSize: 26
}

Text元素中的文本我们可以使用horizontalAlignment和verticalAlignment属性指定对齐方式， 为了进一步增强文本渲染，我们还可以使用style和styleColor属性，‘
这连个属性允许我们指定文本显示的样式和这些颜色颜色以及边框效果， 浮雕效果或者凹陷效果。
文本很长需要末尾显示...则可以使用elide属性， elide属性还允许指定...的显示位置。  clip属性裁剪 基本不用
也可以使用wrapMode属性自动换行

Text{
    width: 200; height: 120
    text: "A very very long text"
    elide: Text.ElideMiddle
    style: Text.Sunken
    styleColor: '#FF4444'
    verticalAlignment: Text.AlignTop
    font.pixelSize: 26
}

elide取值包括： Text.ElideNone(默认) Text.ElideLeft(最左边显示...) Text.ElideMiddle(中间显示...) Text.ElideRight(最右放添加...)
wrapMode取值包括：Text.NoWrap(默认) Text.WordWrap(按单词换行) Text.WrapAnyWhere(按字符换行) Text.Wrap

4 图像元素(Image Element)

Image Elemenet(图像元素) 能够显示不同格式的图像(png, jpg, gif, bmp)
source 属性提供了图像的链接信息(可以通过url从网络上下载)
fillMode(文件模式)属性能够控制元素对象的大小调整行为

Image {
    x: 112; y: 12
    width: 48
    height: 118/2
    source: "assets/rocket.png"
    fillMode: Image.PreserveAspectCrop
    clip: true
}

注：图元元素使用perserveAspectCrop可以避免裁剪图像数据被渲染到图像边界外。默认情况下裁剪是被禁用的(clip:false)
这里的URL，可以是本地路径(./assets/rocket.png)，也可以是网络路径(http://example.org/home.png),这也是QML的一大特色： 网络透明，如果URL是网络的， QML会自动从这个地址加载响应的资源
--->上面的代码中 我们使用了Image.PreserveAspectcrop,意思为等比例切割， 此时我们还需要clip属性， 避免所要渲染的对象超出范围

 

5 鼠标区域元素(MouseArea Element)

MouseArea是一个矩形的非可视化对象，可以捕捉鼠标事件， 当用户与可视化端口交互时， MouseArea通常用来与可视化元素对象一起执行命令。
例子：

Rectangle{
    id: rect
    x:12; y: 12
    width: 80; height: 100
    color: "red"
    MouseArea{
        anchors.fill: parent
        onClicked:{
            rect.x -= 10
        }
    }
}

输入处理与可视化显示分开，这是QtQuick中非常重要的概念，这样你的交互区域可以比你显示的区域大很多。6 组件：QML可以使用基本元素组合成一个复杂的元素，方便我们以后重用，这种组合元素被称为组件。 组件就是一种可重用的元素

6组件：QML提供几种不同的方法来创建组件

基于文件的组件 ：将QML元素放置在一个单独的文件中，然后给这个文件一个名字， 我们就能够给通过这个名字来使用这个组件
例子： 创建一个带文本说明的Rectangle, 这个句型将成为一个按钮， 用户库点击矩形来响应事件

//Button.qml
import QtQuick 2.6

Rectangle{
    id: root
    
    property alias text: label.text;
    signal clicked
    
    width: 116; height: 40
    color: "lightsteelblue"
    border.color: "slategrey"
    
    Text{
        id: label
        anchors.centerIn: parent
        text: "start"
    }
    
    MouseArea{
        anchors.fill: parent
        onClicked: {
            root.clicked()
        }
    }
}

如果我们将Button.qml文件放在和使用文件不再同一个目录则需要在使用时import "pathName", 其中path是包含组件的目录路径

7 元素的简单的转换：QML元素对象通常能够被 平移、旋转、缩放 

平移： 通过改变x,y坐标来完成
旋转： 通过改变 rotation(旋转)属性来完成，这个值使用角度作为单位(0~360)
缩放： 通过改变scale(比例)属性来完成 小于1为缩小 大于1为放大
旋转和缩放不会改变对象的集合形状，对象的x,y与widht, height也类似， 只是绘制指令是被转换的对象
例子： clickableImg.qml为包含鼠标区域的图像元素

import  QtQuick 2.6
Image{
    id: root
    signal  clicked
    MouseArea{
        anchors.fill:   parent
        onClicked:  root.clicked()
    }
}