diff --git a/doc/vs1.png b/doc/vs1.png new file mode 100644 index 0000000..aadf3fb Binary files /dev/null and b/doc/vs1.png differ diff --git a/doc/vs2.png b/doc/vs2.png new file mode 100644 index 0000000..55ee939 Binary files /dev/null and b/doc/vs2.png differ diff --git a/doc/vs3.png b/doc/vs3.png new file mode 100644 index 0000000..818aee7 Binary files /dev/null and b/doc/vs3.png differ diff --git a/doc/vs4.png b/doc/vs4.png new file mode 100644 index 0000000..c73189e Binary files /dev/null and b/doc/vs4.png differ diff --git a/doc/vs5.png b/doc/vs5.png new file mode 100644 index 0000000..e63992d Binary files /dev/null and b/doc/vs5.png differ diff --git a/doc/vs6.png b/doc/vs6.png new file mode 100644 index 0000000..da70047 Binary files /dev/null and b/doc/vs6.png differ diff --git a/doc/vs7.png b/doc/vs7.png new file mode 100644 index 0000000..1852222 Binary files /dev/null and b/doc/vs7.png differ diff --git a/入门指南.md b/入门指南.md index 84cc893..4231f63 100644 --- a/入门指南.md +++ b/入门指南.md @@ -22,9 +22,21 @@ - [3.4.2 设置路径](#342-设置路径) - [3.5 使用TaoQuick组件](#35-使用taoquick组件) - [3.5.1 import TaoQuick](#351-import-taoquick) - - [1.5.2 使用蓝色按钮组件](#152-使用蓝色按钮组件-1) + - [3.5.2 使用蓝色按钮组件](#352-使用蓝色按钮组件) - [3.6 运行效果](#36-运行效果) - [4. Visual Studio 解决方案使用TaoQuick](#4-visual-studio-解决方案使用taoquick) + - [4.1 创建工程](#41-创建工程) + - [4.2 拷贝TaoQuick核心库](#42-拷贝taoquick核心库) + - [4.3 导入核心库](#43-导入核心库) + - [4.3.1 vs 切换到项目的 "属性管理器"页签](#431-vs-切换到项目的-属性管理器页签) + - [4.3.2 导入"taoQuick.props"](#432-导入taoquickprops) + - [4.4 增加导入路径](#44-增加导入路径) + - [4.4.1 两种不同Qml工程的说明](#441-两种不同qml工程的说明) + - [4.4.2 设置路径](#442-设置路径) + - [4.5 使用TaoQuick组件](#45-使用taoquick组件) + - [4.5.1 import TaoQuick](#451-import-taoquick) + - [4.5.2 使用蓝色按钮组件](#452-使用蓝色按钮组件) + - [4.6 运行效果](#46-运行效果) # 1、qmake 使用TaoQuick示例 @@ -606,7 +618,7 @@ Rectangle { 只要路径正确，QtCreator就可以识别到TaoQuick库，可以直接使用TaoQuick库中的组件。 -### 1.5.2 使用蓝色按钮组件 +### 3.5.2 使用蓝色按钮组件 这里示例，使用蓝色按钮组件: @@ -631,4 +643,254 @@ Rectangle { ![](doc/start5.png) -# 4. Visual Studio 解决方案使用TaoQuick \ No newline at end of file +# 4. Visual Studio 解决方案使用TaoQuick + +## 4.1 创建工程 + +使用VisualStudio 创建一个简易的Qml工程，或者使用已有的工程。 + +这里示例创建一个HelloTaoQuick3 工程，内容如下： + +![](doc/vs1.png) + +## 4.2 拷贝TaoQuick核心库 + +将TaoQuick/src文件夹下的"TaoQuick子文件夹"及"taoQuick.props"文件拷贝过来，放在HelloTaoQuick3 工程目录下 + +![](doc/vs2.png) + +如图所示，HelloTaoQuick3项目文件夹下，多了一个TaoQuick文件夹，及"taoQuick.props"文件。 + +## 4.3 导入核心库 + +通过VS的属性管理器，将taoQuick.props文件导入到项目中即可。 + +### 4.3.1 vs 切换到项目的 "属性管理器"页签 + +![](doc/vs3.png) + +可以直接点击底部的"属性管理器"页签，也可以通过菜单栏->视图->属性管理器切换 + +### 4.3.2 导入"taoQuick.props" + +选中HelloTaoQuick3工程节点，然后点击 添加按钮，或者右键菜单添加 + +![](doc/vs4.png) + +添加成功后，列表中出现taoQuick即可 + +![](doc/vs5.png) + + +## 4.4 增加导入路径 + +### 4.4.1 两种不同Qml工程的说明 +对于一般的Qml工程，最简单的main.cpp内容，可以有两种使用方式， + +使用QQuickView： + +```C++ +#include +#include +int main(int argc, char **argv) +{ + QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); + + QGuiApplication app(argc, argv); + QQuickView view; + view.setSource(QUrl("qrc:/main.qml")); + view.show(); + + return app.exec(); +} +``` + +或者使用QQmlApplicationEngine: + +```C++ +#include +#include + +int main(int argc, char *argv[]) +{ + QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); + + QGuiApplication app(argc, argv); + + QQmlApplicationEngine engine; + const QUrl url(QStringLiteral("qrc:/main.qml")); + QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, + &app, [url](QObject *obj, const QUrl &objUrl) { + if (!obj && url == objUrl) + QCoreApplication::exit(-1); + }, Qt::QueuedConnection); + engine.load(url); + + return app.exec(); +} + +``` +两种用法本质是一样的，细微区别是： + +QQuickView本身就是一个主窗口，main.qml顶层元素不能是Window或者Window的子类； + +QQmlEngine本身不包含主窗口，main.qml顶层元素必须是Window或者Window的子类。 + +### 4.4.2 设置路径 + +我们需要在QmlEngine加载source之前，增加importPath，并把imagePath设置为上下文。 + +如果主窗口是由QQuickView加载的，则： + +```C++ + QString importPath = TaoQuickImportPath; + importPath = importPath.replace("\\", "/"); + view.engine()->addImportPath(importPath); + view.rootContext()->setContextProperty("taoQuickImportPath", importPath); +``` + +如果主窗口是由QQmlEngine加载的，则: + +```C++ + QString importPath = TaoQuickImportPath; + importPath = importPath.replace("\\", "/"); + engine.addImportPath(importPath); + engine.rootContext()->setContextProperty("taoQuickImportPath", importPath); +``` + +注意：上下文属性的首字母要小写。 + +完整的代码如下: + +QQuickView版本 +```C++ +#include +#include +#include +#include +int main(int argc, char **argv) +{ + QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); + + QGuiApplication app(argc, argv); + QQuickView view; + + QString importPath = TaoQuickImportPath; + importPath = importPath.replace("\\", "/"); + view.engine()->addImportPath(importPath); + view.rootContext()->setContextProperty("taoQuickImportPath", importPath); + + //setSource 之前，要设置好路径 + view.setSource(QUrl("qrc:/main.qml")); + view.show(); + + return app.exec(); +} +``` +QQmlApplicationEngine版本: + +```C++ +#include +#include +#include +int main(int argc, char *argv[]) +{ + QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); + + QGuiApplication app(argc, argv); + + QQmlApplicationEngine engine; + + QString importPath = TaoQuickImportPath; + importPath = importPath.replace("\\", "/"); + engine.addImportPath(importPath); + engine.rootContext()->setContextProperty("taoQuickImportPath", importPath); + + const QUrl url(QStringLiteral("qrc:/main.qml")); + QObject::connect(&engine, &QQmlApplicationEngine::objectCreated, + &app, [url](QObject *obj, const QUrl &objUrl) { + if (!obj && url == objUrl) + QCoreApplication::exit(-1); + }, Qt::QueuedConnection); + + //load 之前，设置好路径 + engine.load(url); + + return app.exec(); +} +``` +## 4.5 使用TaoQuick组件 + +一个简单的main.qml,内容如下： + +QQuickView版本 +```qml +import QtQml 2.0 +import QtQuick 2.9 + + +Rectangle { + color: "lightblue" + width: 640 + height: 480 +} + +``` +Engine版本 +```qml +import QtQuick 2.9 +import QtQuick.Window 2.9 + +Window { + width: 640 + height: 480 + visible: true + title: qsTr("Hello World") +} + +``` + +### 4.5.1 import TaoQuick + +接下来增加一行import,导入TaoQuick + +```qml +import TaoQuick 1.0 +import QtQml 2.0 +import QtQuick 2.9 + +Rectangle { + color: "lightblue" + width: 640 + height: 480 +} + +``` +导入过后，按一下Ctrl + S，保存一下。 + +只要路径正确，QtCreator就可以识别到TaoQuick库，可以直接使用TaoQuick库中的组件。 + +### 4.5.2 使用蓝色按钮组件 + + +这里示例，使用蓝色按钮组件: +```qml +... + CusButton_Blue { + width: 120 + height: 36 + anchors.centerIn: parent + text: "Hello" + onClicked: { + console.log("hello TaoQuick") + } + } +... +``` + +## 4.6 运行效果 + + 最后，运行起来看看效果吧 + +![](doc/start5.png) +