QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

本章在QmlBook in chinese中第4章节中的基础的几个例子，同时对qml最基础的东西做个记录，可能学过qml的小伙伴们基本上可以不用看这篇文章了，都是非常基础的东西。

第一个例子：效果图

代码：

import QtQuick 2.12
import QtQuick.Window 2.12

Rectangle{
    // name this element root
    id:root
    // properties: <name>: <value>
    width: 1020; height: 540

    //color property
    color: "#D8D8D8";

    Image {
        id: rocket
        x:(parent.width - width)/2; y: 40
        source: "assets/background.png"
    }

    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'
    }
}

代码一点一点记录：

import声明导入了一个指定的模块版本。一般来说会导入QtQuick2.0来作为初始元素的引用。
使用//可以单行注释，使用可以多行注释，就像C/C++和JavaScript一样。
每一个QML文件都需要一个根元素，就像HTML一样。
一个元素使用它的类型声明，然后使用{}进行包含。
元素拥有属性，他们按照name:value的格式来赋值。
任何在QML文档中的元素都可以使用它们的id进行访问（id是一个任意的标识符）。
元素可以嵌套，这意味着一个父元素可以拥有多个子元素。子元素可以通过访问parent关键字来访问它们的父元素

id:root

id是一个非常特殊的属性值，它在一个QML文件中被用来引用元素。id不是一个字符串，而是一个标识符和QML语法的一部分。一个id在一个QML文档中是唯一的，并且不能被设置为其它值，也无法被查询（它的行为更像C++世界里的指针）。

width: 1020; height: 540

一个属性能够设置一个值，这个值依赖于它的类型。如果没有对一个属性赋值，那么它将会被初始化为一个默认值。你可以查看特定的元素的文档来获得这些初始值的信息。

color: "#D8D8D8";

表示了一个Rectangle中的颜色，可以采用”#FFFFFF“三个字节来表示颜色，也可以采用 ”red“ 这样的文章来输入。

Image {
        id: rocket
        x:(parent.width - width)/2; y: 40
        source: "assets/background.png"
    }

    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'
    }

这里面有个image 一个 text ，x 是对应的起始位置，source 是图片加载的路径值，horizontalAlignment表示水平中处理方式，这里是采用了文字中心方式，text: 'Rocket'，名字是Rocket

基础元素对象

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

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

矩形框元素（Rectangle Element）

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

import QtQuick 2.0

Item {
    width: 200
    height: 320

    Rectangle {
        id: rect1
        x: 12
        y: 12
        width: 76
        height: 96
        color: "lightsteelblue"
    }

    Rectangle {
        id: rect2
        x: 112
        y: 12
        width: 76
        height: 96
        border.color: "lightsteelblue"
        border.width: 4
        radius: 8
    }

    Rectangle {
        id: rect3
        x: 12
        y: 132
        width: 176
        height: 96
        gradient: Gradient {
            GradientStop {
                position: 0.0
                color: "lightsteelblue"
            }
            GradientStop {
                position: 1.0
                color: "slategray"
            }
        }

        border.color: "lightsteelblue"
    }
}

输出结果：

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

颜色的命名是来自SVG颜色的名称。你也可以使用其它的方法来指定颜色，比如RGB字符串（'#FF4444'），或者一个颜色名字（例如'white'）。

一个渐变色是由一系列的梯度值定义的。每一个值定义了一个位置与颜色。位置标记了y轴上的位置（0 = 顶，1 = 底）。GradientStop（倾斜点）的颜色标记了颜色的位置。

文本元素（Text Element）

显示文本你需要使用Text元素（Text Element）。它最值得注意的属性时字符串类型的text属性。这个元素会使用给出的text（文本）与font（字体）来计算初始化的宽度与高度。可以使用字体属性组来（font property group）来改变当前的字体，

例如font.family，font.pixelSize，等等。改变文本的颜色值只需要改变颜色属性就可以了。

import QtQuick 2.0

Item {
    width: 400
    height: 120

    Text {
        id: text1
        text: "the quick brown fox"
        color: "#303030"
        font.family: "Ubuntu"
        font.pixelSize: 24
    }
}

输出结果：

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

跟书中的差不多，可以达到我们的目的。

图像元素（Image Element）

一个图像元素（Image Element）能够显示不同格式的图像（例如PNG,JPG,GIF,BMP）。想要知道更加详细的图像格式支持信息，可以查看Qt的相关文档。source属性（source property）提供了图像文件的链接信息，fillMode（文件模式）属性能够控制元素对象的大小调整行为。

import QtQuick 2.0

Rectangle {
    width: 400
    height: 100

    color: "#333333"

    Image {
        x: 12
        y: 12
        // width: 72
        // height: 72
        source: "assets/triangle_red.png"
    }

    Image {
        x: 12 + 64 + 12
        y: 12
        // width: 72
        height: 72 / 2
        source: "assets/triangle_red.png"
        fillMode: Image.PreserveAspectCrop
        clip: true
    }
}

输出效果:

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

如果把最后两行语句给注释掉，就会出现下图：

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

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

鼠标区域元素（MouseArea Element）

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

import QtQuick 2.0

Item {

    width: 200
    height: 120

    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
    }
}

结果图,点击蓝色区域，另一个隐藏于显示:

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

脚本（Scripting）

QML与JavaScript是最好的配合。在JavaScrpit的章节中我们将会更加详细的介绍这种关系，现在我们只需要了解这种关系就可以了。

Rectangle {
    width: 240
    height: 120

    Text {
        id: label
        x: 24
        y: 24
        property int spacePresses: 0
        text: 'Space pressed: ' + spacePresses + ' times'

        // handler for text changes
        onTextChanged: console.log('text changed to:', text)

        focus: true

        //(2) handler with some JS
        Keys.onSpacePressed: {
            increment()
        }

        Keys.onEscapePressed: {
            //     label.text = ''
            spacePresses = 0
        }

        function increment() {
            spacePresses = spacePresses + 1
        }
    }
}

效果按空格键加，按Esc建变成0：

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

文本改变操作onTextChanged会将每次空格键按下导致的文本改变输出到控制台。
当文本元素接收到空格键操作（用户在键盘上点击空格键），会调用JavaScript函数increment()。QmlBook In Chinese

QML语法（QML Syntax）
定义一个JavaScript函数使用这种格式function (){....}，在这个例子中是增加spacePressed的计数。每次spacePressed的增加都会导致它绑定的属性更新

属性（Properties）

元素使用他们的元素类型名进行声明，使用它们的属性或者创建自定义属性来定义。一个属性对应一个值，例如 width:100，text: 'Greeting', color: '#FF0000'。一个属性有一个类型定义并且需要一个初始值。

import QtQuick 2.0


Rectangle{
   width: 240
   height: 120
   Text {
       id: thisLabel
       x:24; y:16
       height: 2 * width
       property int times: 24
       property alias anotherTimes: thisLabel.times

       text: "Greeting " + times
       font.family: "Windows"
       font.pixelSize: 24
       KeyNavigation.tab: otherLabel  //按键改变

       onHeightChanged: console.log('height ',height) //高度改变后提示
       focus: true
       color: focus?"red":"black"
   }

   Text {
       id: otherLabel
       x: 24
       y: 64
       text: "Other Label"

       font.family: "Ubuntu"
       font.pixelSize: 24
       KeyNavigation.tab: thisLabel
       color: focus?"red":"black"
   }
}

运行效果,按tab键可以变换焦点使之变色:

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

已上都是这本书的例子，基础语法，还是比较简单的，尤其学过html，css的小伙伴们，这里不多说了，每天坚持去进步，都会有收获的。

QmlBook in chinese 编程之二 ------（语法与基本元素 basic ）

基础元素对象

矩形框元素（Rectangle Element）

文本元素（Text Element）

图像元素（Image Element）

鼠标区域元素（MouseArea Element）

脚本（Scripting）

属性（Properties）

继续阅读

qt使用QML编译好的exe程序，脱离开发环境运行方法

【BB10开发】通过编译QML为二进制代码来加速启动兼保护源代码

错误: failed to open stream: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。

[VB.NET]多线程——线程池

最新数据：微信及WeChat月活12.5亿多，2021年第二季游戏收入430亿元

取消MFC的自动菜单折叠

新iPhone SE曝光：苹果启用新外形

vb6 轉 vb.net

有关 Reliability（可靠性）的一点资料

C++ STL基本容器比较

中国软件业只能招超人？？

【IT精英】IT传奇人物比尔盖茨的故事

看看牛人们是怎么评价编程语言的

DataTable..::.ToString 方法

Medical Image Analysis Task

写在工作13周年