# Qml Advanced Control

**Repository Path**: dogjin/qml-advanced-control

## Basic Information

- **Project Name**: Qml Advanced Control
- **Description**: Qt Quick 高级UI组件
- **Primary Language**: Unknown
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 58
- **Created**: 2021-04-30
- **Last Updated**: 2021-04-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## Qml Advanced Control

### 1 介绍
本项目实现了一个基于前端风格的Qml控件模块，其具有以下特性：
* 完全响应式控件，自动根据数据模型属性model动态渲染。
* 控件样式采用前端扁平化风格，支持统一主题管理。
* 基于 QtQuick Canvas 以及 QtQuick Control2 参数化实现组件。
* 所有控件均使用单个.qml文件实现，既可以采用模块方式调用，也可以单独提取出来使用。


### 2 使用方法
（1）复制AdControl文件夹到项目目录下，并将整个文件夹添加到qrc资源文件中。  

（2）在.pro文件中将AdControl文件夹所在的路径添加到QML_IMPORT_PATH，以在使用AdControl模块时获得语法高亮，例如： 
```　　
    QML_IMPORT_PATH += ./  	
```
（3）在main.cpp中调用QQmlApplicationEngine::addImportPath()添加AdControl文件夹所在的qrc前缀路径，以使得系统能够加载AdControl模块的源文件，例如:  
```
    QQmlApplicationEngine engine;  
    engine.addImportPath(QStringLiteral("qrc:/"));   
```
（4）在qml文件中使用import导入AdControl模块，并声明所需的控件，例如：  
```
    import AdControl 1.0

    AdButton{
        text: "AdButton"
        height: 40
        anchors.centerIn: parent
    }
```

### 3 注意事项
初次引入模块时编译报错，可能是由于QtCreator未正确识别模块，此时可按以下步骤处理：
* 确保按照上述步骤在项目中引入了AdControl模块。
* 在QtCreator中对项目执行qmake，刷新文件依赖。
* 在QtCreator中执行 “工具——QML——重置代码模型”，重新导入QML模块。
* 在QtCreator中对项目执行重新构建，重新编译项目。