QML学习摘录 01：初识QML

QML概述

完整原文参照：https://github.com/cwc1987/QmlBook-In-Chinese
Qt Quick是Qt5用户界面技术的涵盖，包括：QML,JavaScript(动态脚本语言)和Qt C++（具有高度可移植性的C++库）。
QML是⼀种描述⽤户界⾯的声明式语⾔，Qt5中⼤量使⽤了这种声明⽤户界⾯的语⾔。它将⽤户界⾯分解成⼀些更⼩的元素，这些元素能够结合成⼀个组件。QML语⾔描述了⽤户界⾯元素的形状和⾏为。⽤户界⾯能够使⽤JavaScript来提供修饰，或者增加更加复杂的逻辑。从这个⾓度来看它遵循HTML-JavaScript模式，但QML是被设计⽤来描述⽤户界⾯的，⽽不是⽂本⽂档。

1. 基本元素

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

1.1 基础元素对象

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

Group	Properties（属性）
Geometry（⼏何属性）	x,y（坐标）定义了元素左上⾓的置，width，height（长和宽）定义元素的显⽰范围，z（堆叠次序）定义元素之间的重叠顺序。
Layouthandling （布局操作）	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）。

1.2 几个常用元素

通过示例代码了解：

• Rectangle：矩形框元素，对Item的扩展，增加color 属性和支持边界颜色border.color
• Image： 能够显⽰不同格式的图像（例如PNG,JPG,GIF,BMP）。source属性提供了图像⽂件的链接信息，fillMode属性能够控制元素对象的⼤⼩调整⾏为。
• Text：显⽰⽂本需要使⽤Text元素。这个元素会使⽤给出的text（⽂本）与font（字体）来计算初始化的宽度与⾼度。可以使⽤字体属性组来（font property group）来改变当前的字体，例如font.family，font.pixelSize。
• MouseArea：为了与不同的元素交互，你通常需要使⽤MouseArea元素。这是⼀个矩形的⾮可视化元素对象，你可以通过它来捕捉⿏标事件。当⽤户与可视化端⼝交时，mouseArea通常被⽤来与可视化元素对象⼀起执⾏命令。

示例代码：

import QtQuick 2.3
/* 基本元素 basic elements*/
Rectangle{//01 矩形框元素
    id:root
    width:800; height: 450
    color:"lightblue"
    border.color:"red"
    Image { //02 图片元素
        id: backgroundImage
        x:10;y:20
        width: root.width;height: root.height
        horizontalAlignment: Image.horizontalCenter;
        verticalAlignment: Image.verticalCenter
         /*fillMode: Image.Pad               //不拉伸
          fillMode: Image.Stretch            //拉伸
          fillMode: Image.PreserveAspectFit  //按比例缩放，不裁剪
          fillMode: Image.PreserveAspectCrop //按比例缩放，裁剪
          fillMode: Image.Tile               //图片在水平和垂直方向上平铺
          fillMode: Image.TileHorizontally   //在水平方向平铺，垂直方向拉伸
          fillMode: Image.TileVertically     //在水平方向拉伸，垂直方向平铺*/
        fillMode: Image.Pad
        source: "bg.png"
    }
    /*鼠标区域：
      Qt Quick 中输入处理和显示分开  */
    MouseArea{//04 鼠标区域元素
        id:mousearea
        width: parent.width
        height: parent.height
        onClicked: backgroundImage.visible = !backgroundImage.visible;

    }

    Text{//03 文本元素
        x:10;y:20
        width:root.width
        horizontalAlignment: Text.AlignHCenter;
        text:'Hello Qt Quick!'
    }
}

2. 组件

⼀个组件是⼀个可以重复使⽤的元素，QML提供⼏种不同的⽅法来创建组件。这里只介绍⼀种⽅法：⼀个⽂件创建一个组件。⼀个以⽂件为基础的组件在⽂件中创建了⼀个QML元素，并且将⽂件以元素类型来命名（例如Button.qml）。你可以像任何其它的QtQuick模块中使⽤元素⼀样来使⽤这个组件。下⾯的例⼦使⽤代码作⼀个Button（按钮）来使⽤。

示例代码：

import QtQuick 2.3
/*Button.qml 
组件 ComPontents 一个可以重复使用的元素，例如一个文件即为一个基础组件(Button.qml),可以像使用其他元素一样使用这个组件
*/
Rectangle{
    id:root
    //导出按钮属性
    property alias text: label.text
    signal clicked

    width:116; height: 30
    border.color: "white"
    color:"blue"
     Text{
        id:label
        anchors.centerIn: parent
        color:"red"
        text:"Start"
    }
    MouseArea{
        id:mousearea
        anchors.fill: parent
        onClicked: {
             root.clicked()
        }
    }
}

注意： 1. 我们在根级导出了⽂本和点击信号。通常我们命名根元素为root让引⽤更加⽅便。我们使⽤了QML的alias（别名）的功能，它可以将内部嵌套的QML元素的属性导出到外⾯使⽤。有⼀点很重要，只有根级目录的属性才能够被其它⽂件的组件访问。
2. 就个⼈⽽⾔，可以更进⼀步的使⽤基础元素对象（Item）作为根元素。这样可以防⽌⽤户改变我们设计的按钮的颜⾊，并且可以提供出更多相关控制的API。我们的目标是导出⼀个最⼩的API。实际上我们可以将根Rectangle替换为⼀个Item，然后将⼀个Rectangle嵌套在这个根元素（root item）就可以完成了。

3. 简单变换

转换操作改变了⼀个对象的⼏何状态。QML元素对象通常能够被平移，旋转，缩放。下⾯我们将讲解这些简单的操作。
- 位移:改变对象的x,y实现
- 旋转:改变rotation实现
- 缩放:改变scale实现

示例代码：

/*ClickableImage.qml文件
  组件：可点击的图片*/
Image{
    id:root
    signal clicked
    width: 100;height: 100
    fillMode: Image.Stretch
    MouseArea{
        anchors.fill: parent
        onClicked: {
             root.clicked()
        }
    }
}

import QtQuick 2.3
/*调用文件：
  实现简单的转换 Simple Transformation 平移，旋转，缩放*/
Item{
    id:root
    width:800; height: 450
    MouseArea{
        id:backgroundClicker
        anchors.fill: parent
        onClicked: { //点击空白区域，复位初始状态
            rocket1.x = 20
            rocket2.rotation = 0
            rocket3.rotation = 0
            rocket3.scale = 1.0
        }
    }
    ClickableImage{
        id:rocket1
        x:20;y:100
        source:"bg.png"
        onClicked: {
            x+=5//平移 
        }
    }
    ClickableImage{
        id:rocket2
        x:120;y:100
        source:"bg.png"
        onClicked: {
            rotation +=5//旋转
        }
    }
    ClickableImage{
        id:rocket3
        x:240;y:100
        source:"bg.png"
        onClicked: {//旋转+缩放
            rotation +=5
            scale -=0.05
        }
    }

}