⚡

QtQML组件生成器Skill qt-qml-component-generator

Qt QML组件生成器是一个专门用于自动化生成Qt Quick应用程序中QML组件的工具。它能够根据用户需求快速创建具有完整属性绑定、信号槽机制和Qt Quick Controls集成的UI组件，支持C++后端集成、模块化管理和最佳实践代码结构。适用于Qt桌面应用、嵌入式界面和跨平台UI开发。关键词：Qt QML组件生成，Qt Quick开发，UI组件自动化，信号槽绑定，Qt跨平台界面，C++ QML集成，Qt模块化管理

前端开发 0 次安装 4 次浏览 更新于 2/25/2026

name: qt-qml-component-generator description: 生成具有正确属性绑定、信号/槽连接和Qt Quick Controls集成的QML组件 allowed-tools: Read, Write, Edit, Bash, Glob, Grep tags: [qt, qml, quick, ui, components]

Qt QML组件生成器

生成具有正确属性绑定、信号/槽连接和Qt Quick Controls集成的QML组件。此技能遵循Qt最佳实践创建结构良好的QML组件。

能力

  • 生成具有属性绑定的QML组件
  • 创建具有正确注册的自定义QML类型
  • 设置QML与C++之间的信号/槽连接
  • 配置Qt Quick Controls样式
  • 生成模型/视图组件（ListView、GridView）
  • 创建可复用的组件库
  • 设置QML模块结构
  • 生成类似TypeScript的类型注解

输入模式

{
  "type": "object",
  "properties": {
    "projectPath": {
      "type": "string",
      "description": "Qt项目路径"
    },
    "componentName": {
      "type": "string",
      "description": "QML组件名称"
    },
    "componentType": {
      "enum": ["item", "control", "popup", "view", "delegate", "singleton"],
      "default": "item"
    },
    "properties": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "type": { "type": "string" },
          "defaultValue": { "type": "string" },
          "readonly": { "type": "boolean" }
        }
      }
    },
    "signals": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "parameters": { "type": "array" }
        }
      }
    },
    "cppBackend": {
      "type": "boolean",
      "description": "生成C++后端类",
      "default": false
    },
    "useControls": {
      "enum": ["none", "basic", "material", "universal", "fusion"],
      "default": "basic"
    }
  },
  "required": ["projectPath", "componentName"]
}

输出模式

{
  "type": "object",
  "properties": {
    "success": { "type": "boolean" },
    "files": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "path": { "type": "string" },
          "type": { "enum": ["qml", "cpp", "cmake"] }
        }
      }
    },
    "registrationCode": {
      "type": "string",
      "description": "注册组件的C++代码"
    }
  },
  "required": ["success"]
}

生成的QML组件示例

// CustomButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Control {
    id: root

    // 属性
    property string text: ""
    property color backgroundColor: "#2196F3"
    property color textColor: "white"
    property bool loading: false
    readonly property bool pressed: mouseArea.pressed

    // 信号
    signal clicked()
    signal pressAndHold()

    // 尺寸提示
    implicitWidth: Math.max(implicitBackgroundWidth + leftPadding + rightPadding,
                            implicitContentWidth + leftPadding + rightPadding)
    implicitHeight: Math.max(implicitBackgroundHeight + topPadding + bottomPadding,
                             implicitContentHeight + topPadding + bottomPadding)

    padding: 12

    // 背景
    background: Rectangle {
        radius: 4
        color: root.pressed ? Qt.darker(root.backgroundColor, 1.2) : root.backgroundColor

        Behavior on color {
            ColorAnimation { duration: 100 }
        }
    }

    // 内容
    contentItem: RowLayout {
        spacing: 8

        BusyIndicator {
            visible: root.loading
            running: root.loading
            Layout.preferredWidth: 20
            Layout.preferredHeight: 20
        }

        Text {
            text: root.text
            color: root.textColor
            font.pixelSize: 14
            font.weight: Font.Medium
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            Layout.fillWidth: true
        }
    }

    // 交互
    MouseArea {
        id: mouseArea
        anchors.fill: parent
        enabled: !root.loading
        onClicked: root.clicked()
        onPressAndHold: root.pressAndHold()
    }
}

C++后端集成

// custombutton.h
#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H

#include <QObject>
#include <QQmlEngine>

class CustomButtonBackend : public QObject
{
    Q_OBJECT
    QML_ELEMENT

    Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
    Q_PROPERTY(bool loading READ loading WRITE setLoading NOTIFY loadingChanged)

public:
    explicit CustomButtonBackend(QObject *parent = nullptr);

    QString text() const;
    void setText(const QString &text);

    bool loading() const;
    void setLoading(bool loading);

signals:
    void textChanged();
    void loadingChanged();
    void clicked();

public slots:
    void handleClick();

private:
    QString m_text;
    bool m_loading = false;
};

#endif // CUSTOMBUTTON_H

QML模块结构

qml/
├── MyComponents/
│   ├── qmldir
│   ├── CustomButton.qml
│   ├── CustomTextField.qml
│   └── CustomDialog.qml
└── main.qml

# qmldir
module MyComponents
CustomButton 1.0 CustomButton.qml
CustomTextField 1.0 CustomTextField.qml
CustomDialog 1.0 CustomDialog.qml

CMake QML模块

qt_add_qml_module(myapp
    URI MyComponents
    VERSION 1.0
    QML_FILES
        qml/MyComponents/CustomButton.qml
        qml/MyComponents/CustomTextField.qml
    SOURCES
        src/custombutton.cpp
        src/custombutton.h
)

模型/视图组件

// UserListView.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

ListView {
    id: root

    property alias model: root.model
    signal itemSelected(int index, var data)

    clip: true
    spacing: 4

    delegate: ItemDelegate {
        width: ListView.view.width
        height: 60

        contentItem: Row {
            spacing: 12

            Image {
                source: model.avatar
                width: 48
                height: 48
                fillMode: Image.PreserveAspectCrop
            }

            Column {
                anchors.verticalCenter: parent.verticalCenter

                Text {
                    text: model.name
                    font.bold: true
                }

                Text {
                    text: model.email
                    color: "gray"
                    font.pixelSize: 12
                }
            }
        }

        onClicked: root.itemSelected(index, model)
    }

    ScrollBar.vertical: ScrollBar {}
}

最佳实践

  1. 使用属性绑定：避免命令式更新
  2. 定义清晰的接口：明确的属性和信号
  3. 使用隐式尺寸：让组件自行调整尺寸
  4. 分离逻辑与UI：复杂逻辑使用C++
  5. 遵循命名约定：组件使用PascalCase
  6. 使用Qt Quick Controls：保持平台一致性

相关技能

  • qt-cmake-project-generator - 项目设置
  • qt-translation-workflow - 国际化
  • qt-widget-accessibility-audit - 无障碍访问

相关代理

  • qt-cpp-specialist - Qt/C++专家
  • desktop-ux-analyst - UX审查