qml使用基础

最新推荐文章于 2025-08-17 17:14:29 发布

原创最新推荐文章于 2025-08-17 17:14:29 发布 · 786 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#qt #开发语言

QML是一种解析型语言，利用JIT编译提升性能。它包括属性定义、组件、元素如Rectangle和Text，以及使用布局如RowColumnGridFlow进行元素摆放。QML引擎提供锚定机制进行灵活的界面布局。要使用QML项目，需要生成plugin.qmltypes文件，这涉及编译环境和qmlplugindump工具的使用。

1 `qml`基本概念

qml和js一样是解析型语言，无需编译，在执行引擎中执行

The QML engine uses just-in-time (JIT) compilation to improve performance. It also caches the intermediate output to avoid having to recompile.

qml引擎使用jit提高解释器性能，同时会缓存中间结果来减少重新编译

1.1 概念

qml中的语法
属性：
    key-value，
    使用propety type name : value 来定义
    或者使用propety alias 来定义别名引用
js脚本
qml中的组件：以文件为单位，一个文件代表一个组件，组件内部是 组件名{}
元素：文件名.qml，其中文件名就叫元素，以下是基本的qml元素
    - item元素 是所有可见元素的基本类
    - rectangle元素
    - text元素
    - image元素
    - mousearea元素

变换

摆放元素

qml使用 QtQuick module 如 Row Column Grid Flow 来摆放元素一组元素

布局Items

需要从水平和垂直两个方向来设置element位置，才能确保唯一

使用锚定的办法来灵活布局
锚定的概念是Item基本属性的一部分，可用于所有可视化 QML 元素
An element has 6 major anchor lines (top, bottom, left, right, horizontalCenter, verticalCenter)
top, bottom, left, right线有mergin 【边距】， 而 horizontalCenter, verticalCenter和baseline 有offset 【偏移量】
其中x y也可视作mergin
文本元素有文本锚点

2 qml使用

// 网上下载qml项目，打开.pro文件，我本机使用qt5.15.0及vs2019编译环境，需要在release模式下才能生成plugin.qmltypes文件

文件说明：
%build_kit_dir = E:\Qt\Qt\5.15.0\msvc2019_64 编译器目录
%build_kit_dir\bin\qmlplugindump.exe qml插件install后生成plugin.qmltypes文件
如：qmlplugindump -nonrelocatable My.Module 1.0 /import/path > /import/path/my/module/plugins.qmltypes
    可以在项目配置里新增加自定义命令步骤
    
%build_kit_dir\qml\XXX 插件目录

plugins.qmltypes文件：qt通过import导入库必须，里面有包含的库版本名称及其中的子控件
qmldir文件：插件的信息