QML通俗详解

蓝悦无人机2026-07-01 17:41

QML全称Qt Meta Language/Qt Modeling Language，是Qt框架专门用来写界面的声明式脚本语言，主打快速开发移动端、桌面端、嵌入式的现代化UI。

一、核心定位

用途：专门做图形界面、动画、交互，搭配C++/Python等后端逻辑使用。

风格：声明式（像HTML），不用手动写布局、绘图代码，描述"界面长什么样" 即可。

运行：基于Qt引擎，跨平台（Windows/Linux/Android/iOS/嵌入式设备）。

二、核心特点

  1. 语法简单，类JSON/HTML

结构清晰，标签+属性写法，上手快。 极简示例（一个窗口+文字）：

复制代码 
import QtQuick.Window 2.15 

Window {

width: 400 

height: 300 

title: "Hello QML" 

Text {

text: "你好 QML" 

anchors.centerIn: parent // 居中

font.pixelSize: 24 

}

}
  1. 天生支持动画、特效、触控

做滑动、渐变、转场、手势交互极其方便，是Qt做触屏界面、嵌入式屏、APP的首选。

  1. 和C++无缝互通

QML负责前台界面（颜值、交互）

C++负责后台逻辑（数据、网络、硬件、计算）两边可以互相调用、传值，这是Qt项目最主流的搭配。

  1. 两种开发模式

手写代码：纯编码，配合Qt Creator实时预览

可视化拖拽：Qt Design Studio拖拽控件，所见即所得

三、和传统Qt Widget的区别

|--------------|-------------------|
| QML | Qt Widget |
| 声明式，UI 优先 | 命令式，传统桌面控件 |
| 适合触屏、动画、炫酷界面 | 适合传统桌面软件、工具类 |
| 性能依赖图形引擎 | 原生控件，轻量稳定 |

四、适用场景

嵌入式设备屏幕（工控、车载、面板）

移动端 APP、跨平台客户端

需要大量动画、动效、流畅交互的界面

快速迭代UI原型

五、知识点

QML文件后缀：.qml

依赖：必须安装Qt Quick模块才能运行

执行方式：由Qt的qmlscene工具或C++程序加载运行

简单总结：QML = Qt专属的界面描述语言，主打高颜值、跨平台、动效强，常和C++搭档开发项目。

六、Qt Creator创建QML项目

实际上就是创建Qt Quick Application项目。

|----------------------------------------------------------------------------|
| |
| |
| |
| |
| |
| |
| |

main.cpp

复制代码 
#include <QGuiApplication>

#include <QQmlApplicationEngine>



int main(int argc, char *argv[])

{

    QGuiApplication app(argc, argv);



    QQmlApplicationEngine engine;

    QObject::connect(

        &engine,

        &QQmlApplicationEngine::objectCreationFailed,

        &app,

        []() { QCoreApplication::exit(-1); },

        Qt::QueuedConnection);

    engine.loadFromModule("QMLTest02", "Main");



    return QGuiApplication::exec();

}

Main.qml

复制代码 
import QtQuick

Window {

    width: 740

    height: 480

    visible: true

    title: qsTr("Hello World")

}

CMakeLists.txt

复制代码 
cmake_minimum_required(VERSION 3.16)



project(QMLTest02 VERSION 0.1 LANGUAGES CXX)



set(CMAKE_CXX_STANDARD_REQUIRED ON)



find_package(Qt6 REQUIRED COMPONENTS Quick)



qt_standard_project_setup(REQUIRES 6.10)



qt_add_executable(appQMLTest02

    main.cpp

)



qt_add_qml_module(appQMLTest02

    URI QMLTest02

    QML_FILES

        Main.qml

)



# Qt for iOS sets MACOSX_BUNDLE_GUI_IDENTIFIER automatically since Qt 6.1.

# If you are developing for iOS or macOS you should consider setting an

# explicit, fixed bundle identifier manually though.

set_target_properties(appQMLTest02 PROPERTIES

#    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appQMLTest02

    MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}

    MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}

    MACOSX_BUNDLE TRUE

    WIN32_EXECUTABLE TRUE

)



target_link_libraries(appQMLTest02

    PRIVATE Qt6::Quick

)



install(TARGETS appQMLTest02

    BUNDLE DESTINATION .

    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}

    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}

)

七、CLion创建QML项目

CLion没有内置Qt Quick/QML模板，只能先建一个普通Qt（Widget 或 Console）项目，再手动改成QML项目。

|----------------------------------------------------------------------------|
| |
| |
| |

CmakeLists.txt

复制代码 
cmake_minimum_required(VERSION 4.2)

project(QMLTest03)



set(CMAKE_CXX_STANDARD 20)

set(CMAKE_AUTOMOC ON)

set(CMAKE_AUTORCC ON)

set(CMAKE_AUTOUIC ON)





find_package(Qt6 COMPONENTS

        Core

        Gui

        Widgets

        REQUIRED)



add_executable(QMLTest03 main.cpp)

target_link_libraries(QMLTest03

        Qt::Core

        Qt::Gui

        Qt::Widgets

)



if (WIN32 AND NOT DEFINED CMAKE_TOOLCHAIN_FILE)

    set(DEBUG_SUFFIX)

    if (MSVC AND CMAKE_BUILD_TYPE MATCHES "Debug")

        set(DEBUG_SUFFIX "d")

    endif ()

    set(QT_INSTALL_PATH "${CMAKE_PREFIX_PATH}")

    if (NOT EXISTS "${QT_INSTALL_PATH}/bin")

        set(QT_INSTALL_PATH "${QT_INSTALL_PATH}/..")

        if (NOT EXISTS "${QT_INSTALL_PATH}/bin")

            set(QT_INSTALL_PATH "${QT_INSTALL_PATH}/..")

        endif ()

    endif ()

    if (EXISTS "${QT_INSTALL_PATH}/plugins/platforms/qwindows${DEBUG_SUFFIX}.dll")

        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD

                COMMAND ${CMAKE_COMMAND} -E make_directory

                "$<TARGET_FILE_DIR:${PROJECT_NAME}>/plugins/platforms/")

        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD

                COMMAND ${CMAKE_COMMAND} -E copy

                "${QT_INSTALL_PATH}/plugins/platforms/qwindows${DEBUG_SUFFIX}.dll"

                "$<TARGET_FILE_DIR:${PROJECT_NAME}>/plugins/platforms/")

    endif ()

    foreach (QT_LIB Core Gui Widgets)

        add_custom_command(TARGET ${PROJECT_NAME} POST_BUILD

                COMMAND ${CMAKE_COMMAND} -E copy

                "${QT_INSTALL_PATH}/bin/Qt6${QT_LIB}${DEBUG_SUFFIX}.dll"

                "$<TARGET_FILE_DIR:${PROJECT_NAME}>")

    endforeach (QT_LIB)

endif ()

修改CMakeLists.txt

复制代码 
cmake_minimum_required(VERSION 3.16)

project(QMLTest04 VERSION 0.1 LANGUAGES CXX)

set(CMAKE_CXX_STANDARD 20)

set(CMAKE_AUTOMOC ON)

set(CMAKE_AUTORCC ON)

set(CMAKE_AUTOUIC ON)

set(CMAKE_PREFIX_PATH "D:/Qt/Qt6.11.1/6.11.1/mingw_64")

find_package(Qt6 REQUIRED COMPONENTS Qml Quick)

qt_policy(SET QTP0001 NEW)

add_executable(appQMLTest04 main.cpp)

qt_add_qml_module( appQMLTest04

        URI QMLTest04

        QML_FILES Main.qml

)

set_target_properties(appQMLTest04 PROPERTIES

        #    MACOSX_BUNDLE_GUI_IDENTIFIER com.example.appQMLTest02

        MACOSX_BUNDLE_BUNDLE_VERSION ${PROJECT_VERSION}

        MACOSX_BUNDLE_SHORT_VERSION_STRING ${PROJECT_VERSION_MAJOR}.${PROJECT_VERSION_MINOR}

        MACOSX_BUNDLE TRUE

        WIN32_EXECUTABLE TRUE

)

target_link_libraries(appQMLTest04

        PRIVATE Qt6::Qml Qt6::Quick

)

install(TARGETS appQMLTest04

        BUNDLE DESTINATION .

        LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}

        RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}

)

修改main.cpp

复制代码 
#include <QGuiApplication>

#include <QQmlApplicationEngine>



int main(int argc, char *argv[])

{

    QGuiApplication app(argc, argv);



    QQmlApplicationEngine engine;

    QObject::connect(

        &engine,

        &QQmlApplicationEngine::objectCreationFailed,

        &app,

        []() { QCoreApplication::exit(-1); },

        Qt::QueuedConnection);

    engine.loadFromModule("QMLTest04", "Main");



    return QGuiApplication::exec();

}

新增Main.qml

复制代码 
import QtQuick

Window {

    width: 740

    height: 480

    visible: true

    title: qsTr("Hello World")

}

新增构建工具（关键）

|----------------------------------------------------------------------------|
| |

运行

|----------------------------------------------------------------------------|
| |

热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04【AI】2026 年具身智能模型和世界模型总结05Trae国际版与国内版深度测评：AI原生IDE的双生花06GitHub 镜像站点07Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析08飞书长连接_事件订阅（接收消息，审批任务状态变更）092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）