Generate QML components with proper property bindings, signal/slot connections, and Qt Quick Controls integration
Generate QML components with proper property bindings, signal/slot connections, and Qt Quick Controls integration. This skill creates well-structured QML components following Qt best practices.
{
"type": "object",
"properties": {
"projectPath": {
"type": "string",
"description": "Path to the Qt project"
},
"componentName": {
"type": "string",
"description": "Name of the QML component"
},
"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": "Generate C++ backend class",
"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++ code to register the component"
}
},
"required": ["success"]
}
// CustomButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Control {
id: root
// Properties
property string text: ""
property color backgroundColor: "#2196F3"
property color textColor: "white"
property bool loading: false
readonly property bool pressed: mouseArea.pressed
// Signals
signal clicked()
signal pressAndHold()
// Size hints
implicitWidth: Math.max(implicitBackgroundWidth + leftPadding + rightPadding,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topPadding + bottomPadding,
implicitContentHeight + topPadding + bottomPadding)
padding: 12
// Background
background: Rectangle {
radius: 4
color: root.pressed ? Qt.darker(root.backgroundColor, 1.2) : root.backgroundColor
Behavior on color {
ColorAnimation { duration: 100 }
}
}
// Content
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
}
}
// Interaction
MouseArea {
id: mouseArea
anchors.fill: parent
enabled: !root.loading
onClicked: root.clicked()
onPressAndHold: root.pressAndHold()
}
}
// 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)