# Qml Advanced Controls
**Repository Path**: xizhazha/qml-advanced-control
## Basic Information
- **Project Name**: Qml Advanced Controls
- **Description**: AdControl是一个基于Web前端风格设计的Qt Quick UI控件模块，其实现了包括图表、表单、视图、弹出层在内的30余个常用的控件。
- **Primary Language**: QML
- **License**: LGPL-3.0
- **Default Branch**: master
- **Homepage**: https://gitee.com/chen-jianli/qml-advanced-control
- **GVP Project**: No
## Statistics
- **Stars**: 135
- **Forks**: 58
- **Created**: 2021-02-07
- **Last Updated**: 2025-06-12
## Categories & Tags
**Categories**: desktop-ui
**Tags**: None
## README
## Qml Advanced Controls
### 1 介绍
本项目实现了一个基于前端风格的Qml控件模块，其具有以下特性：
* 完全响应式控件，自动根据model等属性动态渲染。
* 扁平化的外观样式，较为细粒的属性设置。
* 基于QtQuick Canvas 以及 QtQuick Control2 技术实现。
* 所有控件均使用单个.qml文件实现，既可以采用模块方式调用，也可以单独提取出来使用。
### 2 使用方法
可参照本项目下的Test测试用例使用，一般使用方法为：
（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中对项目执行重新构建，重新编译项目。
### 4 控件介绍
#### 4.1 表单控件（Forms）
- **AdButton**
- **AdCheckButton**
- **AdRadioButton**
- **AdIconButton**
- **AdSwitchButton**
- **AdComboBox**
- **AdNumberInput**
- **AdTextInput**
- **AdCalendar**
#### 4.2 弹出控件（Popups）
- **AdDialog**
- **AdMenu**
- **AdToast**
- **AdTooltip**
#### 4.3 图表控件（Charts）
- **AdMapChart**
- **AdBarChart**
- **AdLineChart**
- **AdPieChart**
- **AdWavyProgress**
- **AdCircularProgress**
- **AdLineProgress**
#### 4.4 工具控件（Utils）
- **AdSideNavigationBar**
- **AdBulletinBoard**
- **AdScrollText**
- **AdBusyIndicator**
- **AdFloatingItem**
#### 4.5 视图控件（Views）
- **AdTableView**
- **AdTabView**
