一个简单的Qt5的qml工程

工程包含4个文件，使用CMake管理，最基础的qml工程，包含一个标签和一个按钮。

工程代码如下,创建4个文件后，用Qt Creator打开CMakeLists.txt：

CMakeLists.txt

cmake_minimum_required(VERSION 3.16)

add_compile_options("$<$<CXX_COMPILER_ID:MSVC>:/source-charset:utf-8>")
add_compile_options("$<$<CXX_COMPILER_ID:MSVC>:/execution-charset:utf-8>")

project(demo1 VERSION 0.1 LANGUAGES CXX)

set(CMAKE_AUTOUIC ON)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)

set(CMAKE_CXX_STANDARD 17)
set(CMAKE_CXX_STANDARD_REQUIRED ON)

# Find Qt packages
find_package(Qt5 REQUIRED COMPONENTS Core Quick Qml)

set(PROJECT_SOURCES
        main.cpp
        qml.qrc
)

add_executable(demo1
    ${PROJECT_SOURCES}
)

target_link_libraries(demo1 
    PRIVATE 
    Qt5::Core
    Qt5::Quick 
    Qt5::Qml
)

set_target_properties(demo1 PROPERTIES
    WIN32_EXECUTABLE TRUE
)

install(TARGETS demo1
    BUNDLE DESTINATION .
    LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR}
    RUNTIME DESTINATION ${CMAKE_INSTALL_BINDIR}
)

main.cpp

main.qmlmain.qml
#include <QGuiApplication>
#include <QtQml/QQmlApplicationEngine>
#include <QtCore/QCoreApplication>

int main(int argc, char *argv[])
{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

main.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Demo1")

    Column {
        anchors.centerIn: parent
        spacing: 20

        Label {
            text: qsTr("Welcome to Demo1")
            font.pixelSize: 24
        }

        Button {
            text: qsTr("Click Me")
            onClicked: {
                console.log("Button clicked!")
            }
        }
    }
} 

qml.qrc

<RCC>
    <qresource prefix="/">
        <file>main.qml</file>
    </qresource>
</RCC> 

目前qml开发可以使用Qt Design Studio拖拽式开发，但只支持Qt6.2及以上的版本。

可以使用Qt Design Studio直接创建工程，编辑界面，然后使用Qt Creator打开工程，修改代码。

qt5版本开发推荐使用Qt Widgets Application模式，不推荐使用qml开发。

qt6版本开发自行选择Qt Widgets Application或Qt Quick Application模式。

不然修改太多，官方不支持，问题也多。

需要支持win7系统使用选择Qt5版本，传统模式开发。

只支持win10及以上系统使用选择Qt6版本。