QML初学读书笔记（一）

【Qt5概述】

一、Qt4历史：

2005年发布，基本满足对传统pc和智能手机的需求，便捷式开发。

升级原因：不满足当下触屏设备的需求。Qt4.7版本开始引入Qt Quick，Qt Quick可以用简单的元素组成一套界面组件。

二、Qt5主要特点：

——图形能力：Qt Quick2基于OpenGl（ES）场景实现，重写了图形堆栈。

——高效开发模式：前后端分离 JavaScript+QML。

——跨平台能力：基于Qt平台的统一抽象，只需移植。

——开源：qt.io主导，社区驱动开发。

三、Qt Quick

Qt Quick是Qt5界面开发技术的统称，是以下技术的结合：

——QML 界面标记语言

——JavaScript 动态脚本语言

——Qt C++跨平台C++封装库

1、界面功能的实现可以通过：a、JavaScript开发  b、Qt C++函数接口

四、Qt模块

Qt基础模块+Qt附加模块（以下是基础模块）

五、支持的平台

各种不同的平台。

六、应用程序类型

1、控制台应用程序：通常控制台应用程序不需要提供任何人机交互页面，被称为系统服务，或通过命令行来运行。

Qt5附带一系列现成组件来有效创建跨平台的控制台应用程序

2、窗口应用程序：是基于用户界面的应用程序，需要后端来写入/读取文件，使用网络进行通讯或者保存数据到一个容器中。

【Qt Creater使用】 

一、定位器：Ctrl+k 它可以让开发者迅速的找到指定代码的位置， 或者获得帮助。定位器也接收通配符，比如*main.qml也可以查找。例如寻找一个QML矩形框的帮助， 输入?rectangle。

二、调试：Qt Creator支持C++与QML代码调试。

查看Qt Creater documentation可获取帮助。

三、快捷键

• Ctrl+B - 构建项目
• Ctrl+R - 运行项目
• Ctrl+Tab - 切换已打开的文档
• Ctrl+k - 打开定位器
• Esc - 返回
• F2 - 查找对应的符号解释。
• F4 - 在头文件与源文件之间切换（ 只对c++代码有效）

出自Qt Creater shortcuts文档。
修改快捷键

【命令行执行.qml文件】

$ qtbase/bin/qmlscence

$ $QTDIR/bin/qmlscene rectangle.qml
//将$QTDIR替换为你的Qt的安装路径。 qmlscene会执行Qt Quick运行环境初始化，
并且解释这个QML文件。

【注册Qt工具箱Kit】 

一、最开始使用Qt Creator时最困难的部分可能是Qt Kit。 一个Qt Kit由Qt的版本， 编译系统和设备等等其它设置来配置它。 它使用唯一标识的工具组合来构建你的项目。
       一个典型的桌面kit（ 工具箱） 可能包含一个GCC编译程序， 一个Qt版本库（ 比如Qt5.1.1） 和一个设备（ ”桌面“） 。 在你创建好你的项目后你需要为项目指定一个kit（ 工具箱） 来构建项目。 在你创建一个kit（ 工具箱） 之前你需要先安装一个编译程序并注册一个Qt版本。Qt版本的注册由指定qmake的执行路径完成。 Qt Creator通过查询qmake的信息来获取Qt的版本标识。添加kit（ 工具箱） 与注册Qt版本在Settings->Bulild & Run entry中完成， 在这里你也可以查看有哪些编译程序已经被注册了的。
       注意，请首先确保你的Qt Creator中已经注册了正确的Qt版本， 并且确保一个Kit（ 工具箱） 指定了一个编译程序与Qt版本和设备的组合。 你无法离开Kit（ 工具箱） 来构建一个项目。

【工具】--【选项】

【数据适配，模型概念】

存储应用程序的结构体数据 普遍方法：链表等 /SQL

一、如何在项目中使用SQL数据，这里我们只需要知道他的存在就可以了

 【Qt Quick应用程序】

QML声明语言需要运行时启动。Qt提供了一个典型的运行环境叫做qmlscene。

一、写一个自定义运行环境，我们需要一个视图(quick view)并将QML文档作为它的资源。

【书写习惯&&属性】

1、id定义为root的习惯，可在复杂的QML文档中快速引用最顶层的元素。你会经常使用id或者关键字parent来访问你的父对象。 有一个比较好的方法是命名你的根元素对象id为root（ id:root） ，这样就不用去思考你的QML文档中的根元素应该用什么方式命名了。

// rectangle.qml
import QtQuick 2.0

Rectangle {
    id: root                              // properties: : 
    width: 120; height: 240
    color: "#D8D8D8"                      // color property
    Image {
        id: rocket
        x: (parent.width - width)/2; y: 40    // reference the parent
        source: 'assets/rocket.png'
    } 
    Text {
        y: rocket.y + rocket.height + 20
        width: root.width
        horizontalAlignment: Text.AlignHCenter
        text: 'Rocket'
    }
}

2、使用//可以单行注释， 使用/**/可以多行注释， 就像C/C++和JavaScript一样。

3、每一个QML文件都需要一个根元素， 就像HTML一样。一个元素使用它的类型声明， 然后使用{}进行包含。

4、元素拥有属性， 他们按照name:value的格式来赋值。

5、任何在QML文档中的元素都可以使用它们的id进行访问（ id是一个任意的标识符） 。

6、元素可以嵌套， 这意味着一个父元素可以拥有多个子元素。 子元素可以通过访问parent关键字来访问它们的父元素。

7、import声明导入了一个指定的模块版本。 一般来说会导入QtQuick2.0来作为初始元素的引用。

Text {
    id: thisLabel                     // (1) identifier
    x: 24; y: 16                      // (2) set x- and y-position
    height: 2 * width                 // (3) bind height to 2 * width

    property int times: 24                         // (4) custom property
    property alias anotherTimes: thisLabel.times   // (5) property alias
    text: "Greetings " + times                     // (6) set text appended by value

    font.family: "Ubuntu"                 // (7) font is a grouped property
    font.pixelSize: 24

    KeyNavigation.tab: otherLabel        // (8) KeyNavigation is an attached property

    onHeightChanged: console.log('height:', height) // (9) signal handler for property changes

    focus: true                       // focus is need to receive key events

    color: focus?"red":"black"        // change color based on focus value
}

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

9、一个属性可以设置一个值，这个值依赖于它的类型。如果没有一个属性赋值，那么它将被初始化一个默认值

10、添加自己定义的属性需要使用property修饰符，然后跟上类型，名字和可选择的初始化值（property：）使用default关键字你可以将一个属性定义为默认属性。

11、另一个重要的声明属性的方法是使用alias(别名)关键字（ property alias : ）。 alias关键字允许我们转发一个属性或者转发一个属性对象自身到另一个作用域。

12、text属性依赖于自定义的timers（ int整型数据类型） 属性。 int整型数据会自动的转换为string字符串类型数据。

13、对于每个元素你都可以提供一个信号操作。 这个操作在属性值改变时被调用。例如这里我们完成了当height（ 高度） 改变时会使用控制台输出一个信息。

警告：一个元素id应该只在当前文档中被引用。 QML提供了动态作用域的机制， 后加载的文档会覆盖之前加载文档的元素id号， 这样就可以引用已加载并且没有被覆盖的元素id， 这有点类似创建全局变量。 但不幸的是这样的代码阅读性很差。 目前这个还
没有办法解决这个问题， 所以你使用这个机制的时候最好仔细一些甚至不要使用这种机制。 如果你想向文档外提供元素的调用， 你可以在根元素上使用属性导出的方式来提供。

【脚本JavaScript】

 

【anchor锚点】

QML的布局方式一般采用两种，一种就是直接设置，X与Y坐标的值。一种是采用相对位置布局，anchors锚布局。使用锚布局的能够使界面更紧凑，更有整体化。

一、作用：指定对象与父对象或同级对象的相对几何位置。

除了更传统的网格，行和列，Qt Quick还提供了一种使用锚点概念布局项目的方法。 每个项目都可以视为具有7条不可见的“锚线”：左，水平居中，右，顶部，垂直居中，基线和底部。Qt快速锚定系统允许您定义不同项目的锚定线之间的关系。

每一条锚定线都有一个偏移(offset)值，在top,bottom,left,right的锚定线中他们也叫边距。

二、锚点定义：

通过指定项目与其他项目的关系，锚点提供了一种定位项目的方法。
页边距适用于上，下，左，右和填充锚点。 anchors.margins属性可用于一次将所有各种边距设置为相同的值。 它不会覆盖先前设置的特定边距； 要清除显式边距，请将其值设置为undefined。 请注意，边距是特定于锚点的，如果项目不使用锚点，则不会应用边距。
偏移量适用于水平中心，垂直中心和基线锚点。

三、微小调整

anchors.horizontalCenterOffset 水平中心偏移量

anchors.vertialCenterOffset  垂直中心偏移量

四、实例：

1）fill

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id:root
    color: "black"
    visible: true
    width: 100
    height: 100
    title: qsTr("Hello World")

    GreenSquare{
        anchors.fill:parent
        RedSquare{
            width:12
            anchors.fill:parent
            anchors.margins: 8
        }
    }
}

 

2）left

 

3） 元素左边与他父元素右边对齐

4）元素中间对齐，它的顶部对齐父元素的底部

5）元素在他父对象中居中

6）元素水平方向居中对齐父元素并向后偏移5像素， 垂直方向居中对齐。

【颜色属性】

1、颜色的命名来自SVG颜色名称，可查看Extended color keywords获取更多颜色名称。

2、也可用RGB字符串（‘#FF4444’）

3、渐变色定义：一个渐变色是由一系列的梯度值定义的。 每一个值定义了一个位置与颜色。 位置标记了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"
}

【工作信号】

【mouseArea】

鼠标点击事件交互功能

【基础元素对象Item】

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

【Rectangle 矩形框元素】

        绘制带有可选边框的填充矩形。 矩形项目用于用纯色或渐变填充区域，和/或提供矩形边框。 每个Rectangle项目都使用纯色（使用color属性指定）或渐变（使用Gradient类型定义并使用gradient属性设置）来绘制。 如果同时指定了颜色和渐变，则使用渐变。您可以通过设置border.color和border.width属性，为具有自己的颜色和厚度的矩形添加可选边框。 将颜色设置为“透明”以绘制没有填充颜色的边框。您也可以使用radius属性创建圆角矩形。 由于这会将弯曲的边缘引入矩形的角，因此可能适合设置Item :: antialiasing属性以改善其外观。。

        注意：一个矩形框不设置宽高，将不可见。这个函数无法创建一个梯形。

【Text Element 文本元素】

Text {
    width: 40; height: 120
    text: 'A very long text'
    font.family: "Ubuntu"
    font.pixelSize: 28
    
    elide: Text.ElideMiddle        // '...' shall appear in the middle
    
    style: Text.Sunken             // red sunken text styling
    styleColor: '#FF4444'
    
    verticalAlignment: Text.AlignTop  // align text to the top
    
    // wrapMode: Text.WordWrap        // only sensible when no elide mode
}

 一、对齐效果：horizontalAlignment与verticalAlignment属性

二、外框凹凸浮雕效果：style和styleColor属性

三、文本过长加省略号：elide属性

四、文本换行：wrapMode属性（这个属性只在明确设置了宽度后才生效）

注意：

知道一个文本元素（ Text Element） 的初始宽度与高度是依赖于文本字符串和设置的字体这一点很重要。 一个没有设置宽度或者文本的文本元素（ Text Element） 将不可见， 默认的初始宽度是0。

【Image Element 图像元素】

一、Image尺寸会自动和source设置的图像匹配，否则可以显式的定义宽高。

二、可显示图片格式有：JPG，PNG，GIF，BMP

三、元素对象的大小调整行为：fillMode（ 文件模式） 属性

四、图像文件链接信息：一个URL可以是使用'/'语法的本地路径（ "./images/home.png"） 或者一个网络链接（ "http://example.org/home.png"）

五、裁剪属性：clip。默认情况下裁剪是被禁用的（ clip:false）这对任何可视化元素都是有效的

六、避免裁剪图像数据被渲染到图像边界外：PreserveAspectCrop

七、使用QQmlImageProvider你可以通过C++代码来创建自己的图像提供器， 这允许你动态创建图像并且使用线程加载。

 

下一章：QML初学读书笔记（二）