update document

2025-01-17 20:12:54 +08:00 · 2023-05-12 00:14:03 +08:00 · 2023-05-12 00:14:03 +08:00 · 447a4c7d70
commit 447a4c7d70
parent a258edde9d
7 changed files with 168 additions and 235 deletions
--- a/README-zh.md
+++ b/README-zh.md
@ -25,6 +25,8 @@
  - [各种按钮组件](#各种按钮组件)
  - [数据输入组件](#数据输入组件)
  - [表格组件](#表格组件)
+  - [带选项卡的列表](#带选项卡的列表)
+  - [Edge浏览器选项卡](#edge浏览器选项卡)
  - [矩形框组件](#矩形框组件)
  - [用户向导](#用户向导)
  - [鼠标点击特效](#鼠标点击特效)
@ -35,8 +37,6 @@
 - [项目结构](#项目结构)
 - [核心库 TaoQuick](#核心库-taoquick)
 - [使用核心库TaoQuick](#使用核心库taoquick)
-  - [qmake用法](#qmake用法)
-  - [cmake用法](#cmake用法)
 - [联系作者](#联系作者)
 - [寻找同道中人](#寻找同道中人)
 - [赞助](#赞助)
@ -265,137 +265,7 @@ CusConfig是核心库的全局配置,主要包括字体、颜色等,所有组件

 # 使用核心库TaoQuick 

-详细的使用方法，可以阅读 [入门指南](入门指南.md)
-
-## qmake用法
-
-使用核心库，只需要在项目中导入'.pri'文件，并将qml路径加入到QmlEngine即可。
-
-TaoQuick组件将以本地文件或qrc资源的方式被引用。
-
-此种用法, 与Qml模块、Qml C++插件等方式相比，有以下优势:
-
-* 导入pri后, 不需要额外编译、生成dll或插件
-
-* 发布程序时不需要额外拷贝资源
-
-* 导入pri后, Qt Creater即可支持TaoQuick的Qml代码高亮、双击跳转
-
-* 导入pri后，在Qml中导入模块(import TaoQuick 1.0),即可在Qt Creater 的 designer模式中，通过拖拽使用TaoQuick组件、可视化开发UI (原理: 通过脚本生成designer需要的metainfo)
-
-![](preview/designer.png)
-
-具体使用步骤：
-
-1. 将src文件夹拷贝到你的项目中，任意位置
-
-2. 在你的项目pro文件中,导入对应的src文件夹中的pri文件即可
-
-```qmake
-include(src/TaoQuick.pri)
-```
-
-说明：此pri文件定义两个宏：TaoQuickImportPath 和 TaoQuickImagePath。
-
-debug模式都以本地文件的方式使用，release模型则以qrc资源文件的方式使用。
-
-另外， 这几个变量用来支持QtCreator的语法高亮
-```
-QML_IMPORT_PATH	= $$PWD
-QML2_IMPORT_PATH = $$PWD
-QML_DESIGNER_IMPORT_PATH = $$PWD
-```
-（如果你的语法高亮有问题，但是程序能运行，可以先不管它。
-
-毕竟QtCreator的bug也不是一天两天了）
-
-3. 在CPP代码中，增加导入路径。
-   
-   需要在QmlEngine加载source之前，增加importPath，并把imagePath设置为上下文。
-
-   如果主窗口是由QQuickView加载的，则：
-   
-```C++
-    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
-```
-
-   如果主窗口是由QQmlEngine加载的，则:
-
-```C++
-    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
-```
-
-## cmake用法
-
-详细的使用方法，可以阅读 [入门指南](入门指南.md)
-
-
-TaoQuick 0.5.0以后的版本，增加了cmake支持。
-
-原理和qmake一样，只不过换成了cmake的语法规则。
-
-用法如下：
-
-1. 将src文件夹拷贝到你的项目中，任意位置
-
-2. 将cmake/TaoQuick.cmake文件拷贝到你的项目中，任意位置，并且
-
- 确保TaoQuick.cmake文件中，第一行的TaoQuickPath指向正确的src路径
-
-3. 导入TaoQuick
-
-先在你的项目CMakeLists.txt文件中, 增加cmake扩展路径
-
-```cmake
-  SET(CMAKE_MODULE_PATH ${CMAKE_CURRENT_SOURCE_DIR}/cmake)
-```
-我这里的扩展路径是仓库根目录下的cmake文件夹，其中包含了一些后缀名为 .cmake的文件。
-
-加载好扩展路径，用incude指令导入TaoQuick.cmake即可
-
-```cmake
-include(taoQuick)
-```
-
-说明：taoQuick.cmake会定义两个宏：TaoQuickImportPath 和 TaoQuickImagePath。
-
-debug模式以本地文件的方式使用，release模型则以qrc资源文件的方式使用, 将qrc文件路径定义在了宏TaoQuickRes中。
-
-因此release模式,要在add_executable中增加TaoQuickRes, 例如
-
-```cmake
-if (CMAKE_BUILD_TYPE MATCHES "Release")
-    add_executable(MyApp ${someSource} ${TaoQuickRes})
-else()
-    add_executable(MyApp ${someSource})
-endif()
-```
-
-
-4. 在CPP代码中，增加导入路径。
-   
-   需要在QmlEngine加载source之前，增加importPath，并把imagePath设置为上下文。
-
-   如果主窗口是由QQuickView加载的，则：
-   
-```C++
-    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
-```
-
-   如果主窗口是由QQmlEngine加载的，则:
-
-```C++
-    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
-```
-
-
-
-
-***
+详细的使用方法及示例，可以阅读 [入门指南](入门指南.md)

 # 联系作者

--- a/README.md
+++ b/README.md
@ -20,6 +20,7 @@
  - [Some Button Controls](#some-button-controls)
  - [Data entry Controls](#data-entry-controls)
  - [Table Controls](#table-controls)
+  - [ListView with tab](#listview-with-tab)
  - [Rect Drag Controls](#rect-drag-controls)
  - [Wizard](#wizard)
  - [Mouse Click Effect](#mouse-click-effect)
@ -271,18 +272,18 @@ Compared with 'Qml module' and 'Qml C++ plugin', this usage has the following ad

 detail use step：

-1. copy src to your project, in any location
+1. copy 'TaoQuick' directory and 'TaoQuick.pri' file from TaoQuick/src to your project

-2. Import 'TaoQuick.pri' files in the corresponding src folder in your project 'pro' file
+2. Import 'TaoQuick.pri' files in your project 'pro' file

 for eaxmple: 

 ```qmake
-include(src/TaoQuick.pri)
+include(TaoQuick.pri)
 ```


-TaoQuick.pri will define two MACRO: TaoQuickImportPath and TaoQuickImagePath.
+TaoQuick.pri will define a MACRO: TaoQuickImportPath.

 Debug mode will use TaoQuick as local file, and release mode for qrc resource.

@ -295,14 +296,14 @@ Debug mode will use TaoQuick as local file, and release mode for qrc resource.
   
 ```C++
    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

   if use QmlEngine, TaoQuick can be use as flow:

 ```C++
    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

 ***
@ -312,25 +313,15 @@ TaoQuick start support cmake after version 0.5.0 , it's same as qmake.

 detail use step：

-1. copy src folder to your project, in any location
+1. copy 'TaoQuick' directory and 'taoQuick.cmake' file from TaoQuick/src to your project

-2. copy cmake/taoQuick.cmake to your project, in any location
-
-and make sure the first line of taoQuick.cmake location to correct TaoQuick path
-
-3. add cmake extern path in your CMakeLists.txt
-
-add extern path:
+2. Import 'taoQuick.cmake' files in your project 'CMakeLists.txt' file

 ```cmake
-  SET(CMAKE_MODULE_PATH ${CMAKE_CURRENT_SOURCE_DIR}/cmake)
+include(taoQuick.cmake)
 ```
-then load taoQuick by 'include'

-```cmake
-include(taoQuick)
-```
-taoQuick.cmake will define two MACRO: TaoQuickImportPath and TaoQuickImagePath.
+taoQuick.cmake will define a MACRO: TaoQuickImportPath.

 Debug mode will use TaoQuick as local file, and release mode for qrc resource.

@ -353,14 +344,14 @@ endif()
   
 ```C++
    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

   if use QmlEngine, TaoQuick can be use as flow:

 ```C++
    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

 # Sponsorship
--- a/doc/cmake2.png
+++ b/doc/cmake2.png
--- a/doc/cmake3.png
+++ b/doc/cmake3.png
--- a/doc/cmake4.png
+++ b/doc/cmake4.png
--- a/doc/start2.png
+++ b/doc/start2.png
--- a/入门指南.md
+++ b/入门指南.md
@ -1,27 +1,34 @@
 # 入门指南

 - [入门指南](#入门指南)
- [qmake 使用TaoQuick](#qmake-使用taoquick)
-  - [1. 创建Qml工程](#1-创建qml工程)
-  - [2. 拷贝TaoQuick核心库](#2-拷贝taoquick核心库)
-  - [3. 导入核心库](#3-导入核心库)
-  - [4. 增加导入路径](#4-增加导入路径)
-    - [4.1 两种不同Qml工程的说明](#41-两种不同qml工程的说明)
-    - [4.2 设置路径](#42-设置路径)
-  - [5. 使用TaoQuick组件](#5-使用taoquick组件)
-  - [6. 运行效果](#6-运行效果)
- [cmake 使用TaoQuick](#cmake-使用taoquick)
-  - [1.创建工程](#1创建工程)
-  - [2. 拷贝TaoQuick核心库](#2-拷贝taoquick核心库-1)
-  - [3. 导入核心库](#3-导入核心库-1)
-  - [4. 增加导入路径](#4-增加导入路径-1)
-    - [4.1 两种不同Qml工程的说明](#41-两种不同qml工程的说明-1)
-    - [4.2 设置路径](#42-设置路径-1)
-  - [5. 使用TaoQuick组件](#5-使用taoquick组件-1)
-  - [6. 运行效果](#6-运行效果-1)
-# qmake 使用TaoQuick
+- [1、qmake 使用TaoQuick示例](#1qmake-使用taoquick示例)
+  - [1.1 创建Qml工程](#11-创建qml工程)
+  - [1.2 拷贝TaoQuick核心库](#12-拷贝taoquick核心库)
+  - [1.3 导入核心库](#13-导入核心库)
+  - [1.4 增加导入路径](#14-增加导入路径)
+    - [1.4.1 两种不同Qml工程的说明](#141-两种不同qml工程的说明)
+    - [1.4.2 设置路径](#142-设置路径)
+  - [1.5 Qml中使用TaoQuick组件](#15-qml中使用taoquick组件)
+    - [1.5.1 import TaoQuick](#151-import-taoquick)
+    - [1.5.2 使用蓝色按钮组件](#152-使用蓝色按钮组件)
+  - [1.6. 运行效果](#16-运行效果)
+- [2. qmake用法说明](#2-qmake用法说明)
+- [3.cmake 使用TaoQuick示例](#3cmake-使用taoquick示例)
+  - [3.1 创建工程](#31-创建工程)
+  - [3.2 拷贝TaoQuick核心库](#32-拷贝taoquick核心库)
+  - [3.3 导入核心库](#33-导入核心库)
+  - [3.4 增加导入路径](#34-增加导入路径)
+    - [3.4.1 两种不同Qml工程的说明](#341-两种不同qml工程的说明)
+    - [3.4.2 设置路径](#342-设置路径)
+  - [3.5 使用TaoQuick组件](#35-使用taoquick组件)
+    - [3.5.1 import TaoQuick](#351-import-taoquick)
+    - [1.5.2 使用蓝色按钮组件](#152-使用蓝色按钮组件-1)
+  - [3.6 运行效果](#36-运行效果)
+- [4. Visual Studio 解决方案使用TaoQuick](#4-visual-studio-解决方案使用taoquick)

-## 1. 创建Qml工程
+# 1、qmake 使用TaoQuick示例
+
+## 1.1 创建Qml工程
   
   
 使用QtCreator创建一个简易的Qml工程，或者使用已有的工程。
@ -52,21 +59,18 @@ qrc资源文件中, 仅添加main.qml
 </RCC>
 ```

-## 2. 拷贝TaoQuick核心库
+## 1.2 拷贝TaoQuick核心库

-将TaoQuick核心库文件夹拷贝过来，路径是TaoQuick项目的 src/TaoQuick
+将TaoQuick/src文件夹下的"TaoQuick子文件夹"及"TaoQuick.pri"文件拷贝过来，放在HelloTaoQuick1 工程目录下

-(pro文件不支持绝对路径，所以拷贝一下，使用相对路径)

 ![](doc/start2.png)

 如图所示，HelloTaoQuick1 项目文件夹下，多了一个TaoQuick文件夹，内含 TaoQuick.pri文件和imports文件夹。

-## 3. 导入核心库
+## 1.3 导入核心库

-在项目的pro文件中，增加一行include指令，包含相对工程路径下的TaoQuick.pri文件即可
-
-(pro文件不支持绝对路径，使用相对路径)
+在项目的HelloTaoQuick1.pro文件中，增加一行`include(TaoQuick.pri)`，包含相对工程路径下的TaoQuick.pri文件

 ```pro
 TEMPLATE = app
@ -77,20 +81,20 @@ SOURCES += main.cpp

 RESOURCES += Res.qrc

-include(TaoQuick/TaoQuick.pri)
+include(TaoQuick.pri)
 ```

-此pri文件提供了两个宏定义:
+TaoQuick.pri文件提供了一个宏定义: TaoQuickImportPath 。

-TaoQuickImportPath 指向TaoQuick核心库的qmldir文件所在路径，
+这个宏指向了TaoQuick核心库的导入路径，

-需要将此路径添加到Qml引擎导入路径中(添加方法在下一步)，Qml才能识别TaoQuick库；
+需要将此路径添加到QmlEngine中，Qml才能识别TaoQuick库。

-TaoQuickImagePath 指向TaoQuick核心库的图片资源路径。
+(2023/5/11更新到1.2版本：1.2版本之前是两个宏，1.2版本开始只需要一个宏即可)

-## 4. 增加导入路径
+## 1.4 增加导入路径

-### 4.1 两种不同Qml工程的说明
+### 1.4.1 两种不同Qml工程的说明
 对于一般的Qml工程，最简单的main.cpp内容，可以有两种使用方式，

 使用QQuickView：
@ -136,26 +140,32 @@ int main(int argc, char *argv[])
 }

 ```
-两种用法本质是一样的，细微区别是：QQuickView本身就是一个主窗口，main.qml顶层元素不能再是Window或者Window的子类；QQmlEngine本身不包含主窗口，main.qml顶层元素必须是Window或者Window的子类。
+两种用法本质是一样的，细微区别是：

-### 4.2 设置路径
+QQuickView本身就是一个主窗口，main.qml顶层元素不能是Window或者Window的子类；

-我们需要在QmlEngine加载source之前，增加importPath，并把imagePath设置为上下文。
+QQmlEngine本身不包含主窗口，main.qml顶层元素必须是Window或者Window的子类。
+
+### 1.4.2 设置路径
+
+我们需要在QmlEngine加载source之前，增加importPath，并把importPath设置为上下文属性。

 如果主窗口是由QQuickView加载的，则：
   
 ```C++
    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

 如果主窗口是由QQmlEngine加载的，则:

 ```C++
    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

+注意：上下文属性的首字母要小写。
+
 完整的代码如下:

 QQuickView版本
@ -172,7 +182,7 @@ int main(int argc, char **argv)
    QQuickView view;
    
    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
    //setSource 之前，要设置好路径
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();
@ -194,7 +204,7 @@ int main(int argc, char *argv[])

    QQmlApplicationEngine engine;
    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
@ -209,9 +219,9 @@ int main(int argc, char *argv[])
    return app.exec();
 }
 ```
-## 5. 使用TaoQuick组件
+## 1.5 Qml中使用TaoQuick组件

-一个简单的main.qml,内容如下：
+用一个简单的main.qml来举例,内容如下：

 QQuickView版本
 ```qml
@ -226,10 +236,10 @@ Rectangle {
 }

 ```
-Engine版本
+QQmlEngine版本
 ```qml
-import QtQuick 2.12
-import QtQuick.Window 2.12
+import QtQuick 2.9
+import QtQuick.Window 2.9

 Window {
    width: 640
@ -239,6 +249,7 @@ Window {
 }

 ```
+### 1.5.1 import TaoQuick

 接下来增加一行import,导入TaoQuick

@ -258,6 +269,8 @@ Rectangle {

 只要路径正确，QtCreator就可以识别到TaoQuick库，可以直接使用TaoQuick库中的组件。

+### 1.5.2 使用蓝色按钮组件
+
 这里示例，使用蓝色按钮组件:
 ```qml
 ...
@ -280,15 +293,53 @@ TaoQuick库已经做好了QtCreator的语法高亮和Qml代码跳转

 ![](doc/start4.png)

-## 6. 运行效果
+## 1.6. 运行效果
 
 最后，运行起来看看效果吧

 ![](doc/start5.png)

-# cmake 使用TaoQuick
+# 2. qmake用法说明

-## 1.创建工程
+使用核心库，只需要在项目中导入'TaoQuick.pri'文件，并将qml路径加入到QmlEngine即可。
+
+TaoQuick组件将以本地文件或qrc资源的方式被引用。
+
+此种用法, 与Qml模块、Qml C++插件等方式相比，有以下优势:
+
+* 导入pri后, 不需要额外编译、生成dll或插件
+
+* 发布程序时不需要额外拷贝资源
+
+* 导入pri后, Qt Creater即可支持TaoQuick的Qml代码高亮、双击跳转
+
+* 导入pri后，在Qml中导入模块(import TaoQuick 1.0),即可在Qt Creater 的 designer模式中，通过拖拽使用TaoQuick组件、可视化开发UI 
+
+![](preview/designer.png)
+
+TaoQuick.pri文件定义了一个宏：TaoQuickImportPath ，这个宏指向了TaoQuick的qml导入路径。
+
+这个路径在debug模式指向了本地文件，这样方便快速调试，不用重启程序，编辑后重新加载页面即可生效。
+
+release模型则指向了qrc资源文件，这样方便发布。
+
+TaoQuick.pri提供了这几个变量，来支持QtCreator的语法高亮
+```
+QML_IMPORT_PATH	= $$PWD
+QML2_IMPORT_PATH = $$PWD
+QML_DESIGNER_IMPORT_PATH = $$PWD
+```
+
+(如果你的QtCreater没有语法高亮，可能是QtCreator早期版本Bug较多,可以尝试重启一下QtCreator，
+
+或换个QtCreator版本。
+
+如果程序能正常运行，只是语法高亮无效，你也可以先忽略语法高亮。毕竟QtCreator的bug不是一天两天了)
+
+
+# 3.cmake 使用TaoQuick示例
+
+## 3.1 创建工程

 使用QtCreator创建一个简易的Qml工程，或者使用已有的工程。

@ -334,25 +385,18 @@ target_link_libraries(HelloTaoQuick2

 ```

-## 2. 拷贝TaoQuick核心库
+## 3.2 拷贝TaoQuick核心库

-将TaoQuick核心库文件夹拷贝过来，路径是TaoQuick项目的 src/TaoQuick
+将TaoQuick/src文件夹下的"TaoQuick子文件夹"及"taoQuick.cmake"文件拷贝过来，放在HelloTaoQuick2 工程目录下

 ![](doc/cmake2.png)

-如图所示，HelloTaoQuick2 项目文件夹下，多了一个TaoQuick文件夹，内含 TaoQuick.pri文件和imports文件夹。
+如图所示，HelloTaoQuick2 项目文件夹下，多了一个TaoQuick文件夹，及"taoQuick.cmake"文件。

-## 3. 导入核心库
+## 3.3 导入核心库

-将TaoQuick项目路径中cmake/taoQuick.cmake文件拷贝到HelloTaoQuick2项目路径下

-![](doc/cmake3.png)
-
-将taoQuick.cmake文件中第一行，路径修改为当前路径下的TaoQuick/imports文件夹
-
-![](doc/cmake4.png)
-
-在项目的CMakeLists.txt文件中，导入taoQuick.cmake文件
+在项目的CMakeLists.txt文件中，增加一句`include(taoQuick.camke)`,导入taoQuick.cmake文件

 ![](doc/cmake5.png)

@ -362,19 +406,31 @@ target_link_libraries(HelloTaoQuick2
 ![](doc/cmake6.png)


-说明一下吧，taoQuick.cmake文件提供了两个宏定义:
+taoQuick.cmake文件提供了一个宏定义: TaoQuickImportPath 。

-TaoQuickImportPath 指向TaoQuick核心库的qmldir文件所在路径，
+这个宏指向了TaoQuick核心库的导入路径，

-需要将此路径添加到Qml引擎导入路径中(添加方法在下一步)，Qml才能识别TaoQuick库；
+需要将此路径添加到QmlEngine中，Qml才能识别TaoQuick库。(见下一节)

-TaoQuickImagePath 指向TaoQuick核心库的图片资源路径。
+(2023/5/11更新到1.2版本：1.2版本之前是两个宏，1.2版本开始只需要一个宏即可)

-TaoQuickRes 只在Release模式时，指向TaoQuick的资源文件所在路径。
+Debug模式TaoQuick使用本地文件，方便快速调试。

-## 4. 增加导入路径
+Release模式则使用qrc资源，方便发布。

-### 4.1 两种不同Qml工程的说明
+因此taoQuick.cmake还提供了一个宏：TaoQuickRes，需要将其加入到cmake的依赖项中，例如：
+
+```cmake
+if (CMAKE_BUILD_TYPE MATCHES "Release")
+    add_executable(MyApp ${someSource} ${TaoQuickRes})
+else()
+    add_executable(MyApp ${someSource})
+endif()
+```
+
+## 3.4 增加导入路径
+
+### 3.4.1 两种不同Qml工程的说明
 对于一般的Qml工程，最简单的main.cpp内容，可以有两种使用方式，

 使用QQuickView：
@ -420,9 +476,13 @@ int main(int argc, char *argv[])
 }

 ```
-两种用法本质是一样的，细微区别是：QQuickView本身就是一个主窗口，main.qml顶层元素不能再是Window或者Window的子类；QQmlEngine本身不包含主窗口，main.qml顶层元素必须是Window或者Window的子类。
+两种用法本质是一样的，细微区别是：

-### 4.2 设置路径
+QQuickView本身就是一个主窗口，main.qml顶层元素不能是Window或者Window的子类；
+
+QQmlEngine本身不包含主窗口，main.qml顶层元素必须是Window或者Window的子类。
+
+### 3.4.2 设置路径

 我们需要在QmlEngine加载source之前，增加importPath，并把imagePath设置为上下文。

@ -430,16 +490,18 @@ int main(int argc, char *argv[])
   
 ```C++
    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

 如果主窗口是由QQmlEngine加载的，则:

 ```C++
    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
 ```

+注意：上下文属性的首字母要小写。
+
 完整的代码如下:

 QQuickView版本
@ -456,7 +518,7 @@ int main(int argc, char **argv)
    QQuickView view;
    
    view.engine()->addImportPath(TaoQuickImportPath);
-    view.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    view.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);
    //setSource 之前，要设置好路径
    view.setSource(QUrl("qrc:/main.qml"));
    view.show();
@ -478,7 +540,7 @@ int main(int argc, char *argv[])

    QQmlApplicationEngine engine;
    engine.addImportPath(TaoQuickImportPath);
-    engine.rootContext()->setContextProperty("taoQuickImagePath", TaoQuickImagePath);
+    engine.rootContext()->setContextProperty("taoQuickImportPath", TaoQuickImportPath);

    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
@ -493,7 +555,7 @@ int main(int argc, char *argv[])
    return app.exec();
 }
 ```
-## 5. 使用TaoQuick组件
+## 3.5 使用TaoQuick组件

 一个简单的main.qml,内容如下：

@ -512,8 +574,8 @@ Rectangle {
 ```
 Engine版本
 ```qml
-import QtQuick 2.12
-import QtQuick.Window 2.12
+import QtQuick 2.9
+import QtQuick.Window 2.9

 Window {
    width: 640
@ -524,6 +586,8 @@ Window {

 ```

+### 3.5.1 import TaoQuick
+
 接下来增加一行import,导入TaoQuick

 ```qml
@ -538,7 +602,12 @@ Rectangle {
 }

 ```
-导入过后，就可以直接使用TaoQuick库中的组件。
+导入过后，按一下Ctrl + S，保存一下。
+
+只要路径正确，QtCreator就可以识别到TaoQuick库，可以直接使用TaoQuick库中的组件。
+
+### 1.5.2 使用蓝色按钮组件
+

 这里示例，使用蓝色按钮组件:
 ```qml
@ -555,8 +624,11 @@ Rectangle {
 ...
 ```

-## 6. 运行效果
+## 3.6 运行效果
 
 最后，运行起来看看效果吧

-![](doc/start5.png)
+![](doc/start5.png)
+
+
+# 4. Visual Studio 解决方案使用TaoQuick