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 } }2. 天生支持动画、特效、触控做滑动、渐变、转场、手势交互极其方便是Qt做触屏界面、嵌入式屏、APP的首选。3. 和C无缝互通QML负责前台界面颜值、交互C负责后台逻辑数据、网络、硬件、计算两边可以互相调用、传值这是Qt项目最主流的搭配。4. 两种开发模式手写代码纯编码配合Qt Creator实时预览可视化拖拽Qt Design Studio拖拽控件所见即所得三、和传统Qt Widget的区别QMLQt 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.qmlimport QtQuick Window { width: 740 height: 480 visible: true title: qsTr(Hello World) }CMakeLists.txtcmake_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模板只能先建一个普通QtWidget 或 Console项目再手动改成QML项目。CmakeLists.txtcmake_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.txtcmake_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.qmlimport QtQuick Window { width: 740 height: 480 visible: true title: qsTr(Hello World) }新增构建工具关键运行
QML通俗详解
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 } }2. 天生支持动画、特效、触控做滑动、渐变、转场、手势交互极其方便是Qt做触屏界面、嵌入式屏、APP的首选。3. 和C无缝互通QML负责前台界面颜值、交互C负责后台逻辑数据、网络、硬件、计算两边可以互相调用、传值这是Qt项目最主流的搭配。4. 两种开发模式手写代码纯编码配合Qt Creator实时预览可视化拖拽Qt Design Studio拖拽控件所见即所得三、和传统Qt Widget的区别QMLQt 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.qmlimport QtQuick Window { width: 740 height: 480 visible: true title: qsTr(Hello World) }CMakeLists.txtcmake_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模板只能先建一个普通QtWidget 或 Console项目再手动改成QML项目。CmakeLists.txtcmake_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.txtcmake_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.qmlimport QtQuick Window { width: 740 height: 480 visible: true title: qsTr(Hello World) }新增构建工具关键运行
