# QML_Lesson

**Repository Path**: yanjun_coder/QML_Lesson

## Basic Information

- **Project Name**: QML_Lesson
- **Description**: 一个学习QML的项目
- **Primary Language**: C++
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 11
- **Created**: 2023-04-04
- **Last Updated**: 2023-04-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# QML_Lesson

## 项目介绍
一个学习QML的项目,使用QT5.10版本开发

## 软件架构
使用QtCreator进行基于QML的软件开发

## QT QML Lesson1：使用QtCreator创建QML Project

### 目的
能够通过创建helloworld界面了解QML基本概念

### 主要内容
1. 创建一个Hello World界面
2. 选择创建合适的工程的意义（本次使用 QmlProject 做纯UML界面开发）
3. 创建自己的Button.qml，并加载到主qml中
4. Rectangle、Text、MouseArea三个类型的使用
5. anchors的使用
6. onClicked槽的使用，了解UML的信号机制

## QT QML Lesson2：使用QtCreator创建QML Plugin

### 目的
以插件的方式提供C++封装

### 主要内容
1. 创建一人个插件项目
2. 明白.pro中，编译文件输出的控制
3. 明白插件的命名空间、UML引用名称、C++类名
4. 明白QML如何使用插件

## QT QML Lesson3：QML加载QML Plugin并调用其函数

### 目的
以插件的方式提供C++封装，通过UML动态加载运行

### 主要内容
1. 将插件与QML Project放置到一个工程中，通过UML调用Plugin
2. 明白如何配置qmlproject（注意：importPaths配置到插件动态库文件夹的上一层），使QML可以加载插件
3. 明白UML中添加哪些内容以加载插件

## QT QML Lesson4：QML加载图片

### 目的
通过使用QML image类型加载图片

### 主要内容
1. 明白image类型的使用
2. 明白image加载图片的状态
3. 明白UML中添加哪些内容以加载插件

## QT QML Lesson5：仿界面开发之QML SplitView

### 目的
1. 掌握QML SplitView 对窗口进行布局
2. 逐步仿制以下界面
![这里写图片描述](https://img-blog.csdn.net/20180701215843404?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
3. 仿制效果
![这里写图片描述](https://img-blog.csdn.net/20180701221851704?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

### 主要内容
1. 明白SplitView类型的主要属性
2. 掌握QML的编码规范

## QT QML Lesson6：仿界面开发之搜索框（QML Row、TextInput、SplitView）

### 目的
1. 掌握QML中使用其他QML类型
2. 掌握Row
3. 掌握TextInput
4. 逐步仿制以下界面
![这里写图片描述](https://img-blog.csdn.net/20180701215843404?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
5 仿制效果
![这里写图片描述](https://img-blog.csdn.net/20180701220013129?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

### 主要内容
1. SplitView类型使用，注意Layout.fillWidth的说明
2. Row使用，在Row有元素宽度不变时的处理（width: parent.width-searchButton.width）
3. TextInput的使用，onActiveFocusChanged槽和activeFocus属性

## QT QML Lesson7：仿界面开发之树状列表（TreeView）

### 目的
1. 掌握QML中使用Model/View框架
2. 掌握TreeView
3. 逐步仿制以下界面
![这里写图片描述](https://img-blog.csdn.net/20180701215843404?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
5 仿制效果
![这里写图片描述](https://img-blog.csdn.net/20180711234813600?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

### 主要内容

 1. Model部分封装数据结构，由C++实现
 2. 通过Plugin机制，QML加载
 3. TreeView展示Model
 4. rowDelegate和itemDelegate通过委托改变显示效果
 5. headerVisible控制显示

## QT QML Lesson8：仿界面开发之QML Button ButtonStyle Row Column
 
### 目的
 1. 掌握QML中Button的使用
 2.  逐步仿制以下界面
![这里写图片描述](https://img-blog.csdn.net/20180701215843404?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
 3. 仿制效果
![这里写图片描述](https://img-blog.csdn.net/2018071223213342?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

### 主要内容
 1. Button的使用
 2. ButtonStyle的使用
 3. Row、Column的使用
 
## QT QML Lesson9：仿界面开发之QML Button ButtonStyle Row Column

### 目的
 1. 在QML中实现动态按钮
 2.  逐步仿制以下界面
![这里写图片描述](https://img-blog.csdn.net/20180701215843404?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
 3. 仿制效果
![这里写图片描述](https://img-blog.csdn.net/20180724224550871?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
![这里写图片描述](https://img-blog.csdn.net/20180724224617641?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4bXV5dQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

### 主要内容
 1. 动态按钮的思想：核心内容为属性变换PropertyAnimation，通过设置不同的State，切换不同的效果（点击，再次点击等），State由Connections进行连接，State切换过程中，通过Transition实现连续的动态效果，使用Canvas实现背景效果的显示；当前的背景显示中，中心按钮与环绕按钮共用一个中心点，环绕按钮通过Context2D绘制
 2. State、Transition、PropertyAnimation的使用
 3. Connections的使用
 4. Canvas、Context2D的使用
 
### 项目源码
https://gitee.com/lxmuyu/QML_Lesson.git