目录

QML与Qt Quick简介

  1. QML模块为QML应用程序提供了基础框架，比如QML API和C++ API。它是Qt Quick开发技术的一部分，全称Qt Meta-Object-Language，是一种描述性的脚本语言。QML编写的脚本后缀名为qml，在这个文件中可以定义类似CSS中的元素，元素可以具有属性，信号以及槽函数。
  2. Qt Quick模块是一个开发QML应用的标准库，提供了许多可视化组件，模型视图支持，动画框架以及更多用于构建用户界面的功能。这个模块也提供QML API和C++ API。

QML常用元素

  1. 在QML文件中，只有一个根元素，一般有很多元素。元素的声明形式为type{property:value}。QML文件中的任意元素可以通过元素的id进行访问
  2. QML文件中，元素可以嵌套，父元素可以有子元素，子元素通过使用parent进行访问父元素。
  3. QML中元素分为视觉元素和非视觉元素
    1. 视觉元素：具有几何形状
    2. 非视觉元素：比如Timer，提供一般功能，用于控制视觉元素
元素的属性
  1. 常用元素具有通用属性，比如说：
    1. id（等同于CSS中的id选择器）：唯一标识一个元素
    2. parent：当前元素的父元素
    3. anchors：用于定位一个元素
      1. anchors.fill：provides a convenient way for one item to have the same geometry as another item
  2. 元素属性的添加：
    1. 使用property <类型> <名称>:<值>进行定义，前面加default关键字表示默认属性，加readonly表示只读属性，加required表示要求属性
    2. 这种方式进行元素属性的添加，元素的类型有int，real，string，var，point等
  3. 属性的别名：property alias <名称>：<引用>
  4. 属性的监视：方法名定义为onPropertyChanged
Window（顶层窗口）
Item（基础元素对象）

所有其他的可视化元素都继承自Item，它本身不会有绘制操作，类似于HTML中的div元素。但是定义了所有可视化元素的共有属性，如下所示：

  1. 几何属性：
    1. x,y：定义了元素左上角的位置
    2. width，height：定义元素的显示范围
    3. z：定义元素之间的重叠次序
    4. implicitWidth：Defines the natural width or height of the Item if no width or height is specified.对于图片就是原始像素宽度
  2. 布局操作：
    1. anchors：其值有left，right，top，bottom，vertical center，horizontal center，用于相对于其他元素定位
  3. 按键操作：附加属性key和keyNavigation(按键定位)属性用来控制按键操作，focus属性用于启用键处理
  4. 转换：
    1. 旋转rotate：值以0~360°表示
    2. 缩放scale：大于1表示放大，小于1表示缩小。
    3. 平移：通过改变x,y的位置完成简单的平移
  5. 可视化：
    1. opacity：控制透明度
    2. visible：控制元素是否显示
    3. clip：控制元素边界的绘制，是否剪裁
    4. smooth：用于增强渲染质量
  6. 状态定义：
    1. states：提供了元素当前所支持的状态列表，包含一个或者多个state属性
  7. 过渡：
    1. transitions
  8. 图层：用于控制元素的离屏渲染和行为
    1. layer.enabled：是否启用图层的开关，默认为 false
    2. layer.effect：应用于图层的特效组件，通常ShaderEffect，ColorOverlay（颜色叠加）
Rectangle（矩形框）
  1. z属性：设置元素的层级
Window {
    width: 480
    height: 480
    visible: true
    title: qsTr("QML TEST")
    x: 100
    y: 100

    Rectangle {
        x: 100
        y: 100
        color: "red"
        width: 100
        height: 100
        z: 1    // 设置元素的层级
    }

    Rectangle {
        x: 100
        y: 100
        color: "blue"
        width: 100
        height: 100

    }
}
  1. focus属性：焦点
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12

Window {
    width: 480
    height: 480
    visible: true
    title: qsTr("QML TEST")
    x: 100
    y: 100

    Rectangle {
        x: 100
        y: 100
        color: "red"
        width: 100
        height: 100
        focus: true
        MouseArea {
            // 鼠标区域与父元素大小一致
            anchors.fill: parent
            // 点击了Rectangle区域就会打印
            onClicked: {
                console.log("on clicked")
            }
        }
        // 方向键左键按下就打印
        Keys.onLeftPressed: {
            console.log("on left key clicked")
        }
    }
}
Text（文本）
  1. text属性：文本内容
  2. font.family：文本的字体
  3. font.pixelSize：文本大小
  4. wrapMode：设置换行效果
  5. elide：允许将省略符位置设置为文本的左侧，右侧，中间
  6. horizontalAlignment：设置水平对齐方式
Image（图像）
  1. source属性：设置图像地址
  2. fillMode：控制大小调整行为
    1. Image.Stretch: 默认值。缩放图像以适合项目
    2. Image.PreserveAspectFit: 图像均匀缩放以适应而不裁剪
    3. Image.PreserveAspectCrop: 图像均匀缩放以填充，必要时进行裁剪
    4. Image.Tile: 水平和垂直复制图像
    5. Image.TileVertically: 图像水平拉伸并垂直平铺
    6. Image.TileHorizontally: 图像被垂直拉伸并水平平铺
    7. Image.Pad: 图像未转换
MouseArea（鼠标区域）
DropArea（拖拽区域）

For specifying drag and drop handling in an area

TextField（文本输入框）
  1. placeholderText：预置文本
TextArea（多行文本输入框）
Button（按钮）
DelayButton（延时按钮）
Switch（开关）
RadioButton（单选按钮）
Popup（弹出窗口）
  1. visible：默认为false，表示不可见
  2. modal：设置弹出窗口为模态还是非模态
  3. closePolicy：弹出窗口的关闭策略
Dialog（对话框）
  1. modality：设置对话框为模态还是非模态
  2. standardButtons：设置对话框中的按钮组
FileDialog（文件对话框）
FolderDialog（文件夹对话框）
ColorDialog（颜色选择对话框）
FontDialog（字体对话框）
MessageDialog（消息对话框）
BrightnessContrast（亮度与饱和度）
Colorize（HSL颜色调整）

Sets the color in the HSL color space

Slider（滑块）
ColorOverlay（颜色覆盖）
Blend（混合）
发光
  1. Glow
  2. RectangleGlow
Canvas（画布）
  1. 画布元素：一个可以动态绘制图形的矩形区域

布局

参考Qt之布局

Flickable（可滑动的可视区域）
  1. 属性contentHeight：内容的实际高度

动画

动画常见属性
  1. id属性
  2. target属性表示动画作用的目标
  3. property属性表示哪个属性
  4. easing.type：Specifies the easing curve used for the animation
动画分类
  1. 属性动画PropertyAnimation
  2. 颜色动画ColorAnimation
  3. 数值动画NumberAnimation
  4. 串行动画SequentialAnimation
  5. 并行动画ParallelAnimation
  6. 属性变化的动画：使用Behavior进行定义，比如：
Behavior on xxx{NumberAnimation { duration: 200 }}
QQuickPaintedItem

provides a way to use the QPainter API in the QML Scene Graph

渐变/阴影/模糊

参考Qt之特效

模型视图代理

  1. ListView
  2. ListModel：列表模型，Defines a free-form list data source
    1. ListElement：Defines a data item in a ListModel.
    2. Repeater：使用提供的模型实例化多个基于Item 的组件。这个控件其中包含一个属性model，用于指定从哪个model取数据
  3. StackView
    1. 属性initialItem：StackView创建时默认展示的item
    2. 属性currentItem：The currently top-most item in the stack.

组件封装

  1. 基于文件的形式：QML文件名称首字母大写

多线程异步处理

使用WorkerScript

  1. 示例如下：
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15


Window {
    height: 200
    width: 200
    visible: true
    color: red
    Rectangle {
        width: 100
        height: 100
        anchors.centerIn: parent
        color: "yellow"
        Text {
                 id: text
                 text: 'Click anywhere'
        }

         WorkerScript {
             id: worker
             source: "qrc:/script.js"

             onMessage: (messageObject)=> text.text = messageObject.reply
         }

         MouseArea {
             anchors.fill: parent
             // Sends the given message to a worker script handler in another thread
             onClicked: (mouse)=> worker.sendMessage({ 'x': mouse.x, 'y': mouse.y })
        }

    }
}


// script.js如下

//  the operations to be performed in the new thread

WorkerScript.onMessage = function(message) {
    // ... long-running operations and calculations are done here
    WorkerScript.sendMessage({ 'reply': 'Mouse is at ' + message.x + ',' + message.y })
}

QMl内置对象

  1. QML 引擎启动时，自动注入一个名为"Qt"的全局对象。
  2. console：日志/调试输出
  3. Math：数学函数
  4. Date：日期时间
  5. JSON：JSON 解析
  6. Iterator：迭代器

两种加载方式

  1. Qt.resolvedUrl()：使用文件系统中的相对/绝对路径，需要随程序一起部署文件
  2. qrc路径：使用编译进二进制文件的资源，资源打包在exe内部