QML基础

一 基本语法

QML将用户界面分解成一些更小的元素，多个元素可以结合为一个组件。QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript或C++来提供修饰，或者增加更加复杂的逻辑。QML主要用于描述用户界面，区别于描述文本文档JavaScript。

QML的元素组织是基于层次结构的，子元素总是会继承一些父元素的特性，如坐标系统、鼠标点击区域等。

简单实例程序：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")


    Rectangle {
        // name this element root
        id: root

        // properties: <name>: <value>
        width: 400; height: 400

    Image {
        id: image
        source: ':/a.png'
        width: 200; height: 200
        fillMode: Image.Pad
        anchors.fill: parent
    }
    }

    Text {
            // un-named element

            // reference element by id
            y: rocket.y + rocket.height + 20

            // reference root element
            width: root.width

            horizontalAlignment: Text.AlignHCenter
            text: 'Rocket'
        }
}

二 基本元素

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

常用的几个基础的可视化元素有：Item（基础元素对象），Rectangle（矩形框），Text（文本），Image（图像）和MouseArea（鼠标区域）。

Item（基础元素对象）是所有可视化元素的基础对象，所有其它的可视化元素都继承自Item。

Item（基本元素对象）通常被用来作为其它元素的容器使用，它自身不会有任何绘制操作，但是定义了所有可视化元素共有的属性：

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（转变）属性列表来定义状态转变动画。

实例代码：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    /*
    Rectangle（矩形框）是基本元素对象的一个扩展，增加了一个颜色来填充它。它还支持边界的定义，
    使用border.color（边界颜色），border.width（边界宽度）来自定义边界。你可以使用radius（半径）属性来创建一个圆角矩形。
    */
    Rectangle{
        id:rect1  //设置id名称
        x:20; y:20 //设置x,y的位置
        width: 80 ; height: 90  //设置宽和高
        color: "lightsteelblue" //设置颜色
    }

    Rectangle{
        id:rect2
        x:120; y:20
        width: 80; height: 90
        border.color: "cadetblue"  //设置边框颜色
        border.width: 10  //设置边框宽度
        radius: 10  //设置半径
    }

    Rectangle{
        id:rect3
        x:220;  y:20
        width: 80; height: 90

        //设置渐变色：一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。
        //位置标记了y轴上的位置（0 = 顶，1 = 底）。GradientStop（倾斜点）的颜色标记了颜色的位置。
        // 注意：一个矩形框如果没有width/height（宽度与高度）将不可见
        gradient: Gradient{
            //渐变停止
            GradientStop{position: 0.0; color: "cyan"}
            GradientStop{position: 1.0; color: "darkorchid"}
        }
        //设置边框颜色
        border.color: "fuchsia"

    }

    //显示文本的元素Text
    Text {
        id: text  //设置id
        text: "this is show text ,it is very strong ," //设置需要显示的文本
        x:0; y:120
        width: 300; height: 90 //设置宽度高度，不设置的话控件不会显示
        color: "lightskyblue"

        //设置字体属性
        font.pixelSize: 50
        font.family: "windows"
        font.bold: true
        //设置文本右边对齐
        horizontalAlignment: Text.AlignRight
        //设置文字外框效果
        style: Text.Sunken
        styleColor: "gold"
        //设置显示长文本的展示方式
        //elide: Text.ElideMiddle  //显示长文本时，在中间用省略号 ... 代替
        wrapMode:  Text.WordWrap //换行展示所有文本


    }

    //显示图像，默认情况下裁剪是被禁用的（clip:false）。你需要打开裁剪（clip:true）来约束边界矩形的绘制。这对任何可视化元素都是有效的。
    //使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器，这允许你动态创建图像并且使用线程加载。
    Image {
        clip: true //启用图片剪裁
        id: image
        x:300; y:120
        width: 200; height: 200

        //设置图片文件路径，可以是本地资源、电脑本地图片、网络图片
        //source: "qrc:/image/q.png" //Qt工程本地地址

        //网络图片地址
        source: "https://ts3.cn.mm.bing.net/th?id=OIP-C.NUsPzvX20YVoSLo6kIgvQgHaLZ&w=201&h=310&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"

        //图片填充模式：避免裁剪图像数据被渲染到图像边界外
        fillMode: Image.PreserveAspectCrop //保证图片始终在图像显示区域内
    }

    //鼠标区域元素MouseArea
    Rectangle{
        id:rect4
        x:0;  y:320
        width: 100; height: 100
        color: "lightpink"

        //设置鼠标点击响应区域: 这里输入处理与可视化显示分开，可以对交互区域进行控制，这点非常的重要
        MouseArea{
            id:area
            //设置鼠标点击响应区域的宽高度为父控件的宽高度
            width: rect4.width
            height: rect4.height
            //鼠标点击响应函数:  点击鼠标时，隐藏rect2，再次点击显示rect2
            onClicked: rect2.visible=!rect2.visible
        }
    }

}

三 组件

一个组件是一个可以重复使用的元素，QML提供几种不同的方法来创建组件。

常见的一个 .qml文件就是一个基础组件。一个以文件为基础的组件在文件中创建了一个QML元素，并且将文件以元素类型来命名（例如Button.qml）。你可以像任何其它的QtQuick模块中使用元素一样来使用这个组件。之后在其他代码中把Button.qml作为一个Button（按钮）来使用。

特别注意：只有根元素的属性外部可以访问。

新建一个组件 QButton.qml文件，代码内容如下：

import QtQuick

//新建一个Button.qml文件作为组件，

//Item {

Rectangle{

    property alias text: label.text
    signal clicked


    id:button
    x:20;  y:20
    width: 150; height: 150
    color: "bisque"
    border.color: "chartreuse"
    Text {
        id:label
        anchors.centerIn: parent
        text: "开始"
    }

    MouseArea{
        anchors.fill: parent
        onClicked: {
            //status.text="按钮被点击"
           button. clicked()
        }
    }
}

//Text {
//    id: status
//    x:20;  y:30
//    text: "等待...."
//    horizontalAlignment: Text.AlignHCenter
//}
//}

在main.qml文件中使用QButton.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    Button{
        id:button
        x:40; y:40
        text: "开始"
        onClicked: {
            status.text="按钮被点击"
        }
    }

    Text {
        id: status
        x:20;  y:0
        text: "等待...."
        horizontalAlignment: Text.AlignHCenter
    }
}

运行效果：