QML简介

最新推荐文章于 2025-11-25 09:29:31 发布

原创

最新推荐文章于 2025-11-25 09:29:31 发布 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍了QML与Qt程序的结合使用，包括QML的运行环境、与Qt的交互方式，以及如何将C++类注册为QML类型。重点讨论了QDeclarativeView、QDeclarativeEngine和QML组件的加载与使用，同时提到了QML与Qt整合的策略，如在基于QWidget和QGraphicsView的UI中的应用。此外，还涵盖了QML的性能优化选项和插件开发。

QML与Qt程序

Qt Declarative UI运行环境

QML文档通过QML运行环境载入并运行. 包含Declarative UI引擎和内置的QML元素, 插件模块, 还提供了访问第三方的QML元素与模块.

QML与Qt

单纯使用QML可以不了解Qt, 但是如果想设计一个数据逻辑和UI分开的结构, 则需要用到Qt;

QML可直接访问的Qt类:

QAction, signal and slot(can be used as function in JavaScript),

QWidget--QDeclarativeView(Qt5使用QQuickView代替, 属于QWindow, 不用QWidget),

Qt Model--QAbstractItemModel

QML Tools

查看和调试QML的工具: qmlviewer

command: qmlviewer.exe filename.qml

将C++类注册成为QML类型

1 2	`#include <QtQml>` `qmlRegisterType<MySliderItem>(` `"com.mycompany.qmlcomponents"` `, 1, 0,` `"Slider"` `);`

使用:

1

2

3

4

 
      import com.mycompany.qmlcomponents 1.0       
     
      Slider {       
     
      // ...       
     
      }

以C++类创建QML属性

1)inherited from QObject

2)declarate the Marco: Q_OBJECT(meta system), Q_PROPERTY(QML property)

Declarative UI

QDeclarativeView加载QML文件

QDeclarativeView是一个QWidget(QAbstractScrollArea), 可以加载QML文件;

1

2

3

 
      QDeclarativeView view;       
     
      view.setSource(QUrl::fromLocalFile( 
      "app.qml" 
      ));       
     
      view.show();

PRO工程文件

1	`QT += gui declarative`

QDeclarativeEngine

可以直接加载QML, 创建QObject来进行操作;
每个程序至少需要一个Engine, 可以配置全局设置应用到所有的QML组件中;

QDeclarativeEngine: 提供了一个实例化QML Component的环境;
QDeclarativeComponent: 封装QML Component的一个类;
QDeclarativeContext: 定义了一个通过QML engine工作的context, 可以将数据暴露给QML component;

1

2

3

4

 
      QDeclarativeEngine engine; 
     
      QDeclarativeContext *windowContext =  
      new  
      QDeclarativeContext(engine.rootContext()); 
     
      QDeclarativeComponent component(&engine,  
      "application.qml" 
      ); 
     
      QObject *window = component.create(windowContext);

Note 对于shadow build, qml文件需要放到build路径中;

加上数据

>背景颜色

1

2

3

 
      QDeclarativeContext *context = view.rootContext(); 
     
      context->setContextProperty( 
      "backgroundColor" 
      ,QColor(Qt::yellow)); 
     
      view.setSource(QUrl::fromLocalFile( 
      "main.qml" 
      ));