Qml define custom property group [duplicate] - qml

Question

This question already has answers here:
How to create grouped/nested properties?
(3 answers)
Closed 7 years ago.
How can I define custom property groups in qml, equal to the anchors property?
Example usage:
Item {
anchors {
leftMargin: 5
rightMargin: 5
}
}

Answer 1

I'm afraid this is not as simple as you are thinking it might be.
As far as I know, you have two options:
1.- Follow the recommendation you will see in the link provided by #BaCaRoZzo and implement your own object type.
2.- Write a more complex QML type in C++ and use it in your QML file. More or less the idea pointed out by #folibis. Example:
main.cpp
#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QtQml>
#include "customitem.h"
int main(int argc, char *argv[])
{
QGuiApplication app(argc, argv);
qmlRegisterType<CustomItem>("CustomItem", 1,0, "CustomItem");
QQmlApplicationEngine engine;
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
return app.exec();
}
customitem.h
#ifndef CUSTOMITEM_H
#define CUSTOMITEM_H
#include <QObject>
class CustomItem: public QObject
{
Q_OBJECT
/*
* Any property that is writable should have an associated NOTIFY signal.
* Ref: http://doc.qt.io/qt-5/qtqml-cppintegration-exposecppattributes.html#exposing-properties
*/
Q_PROPERTY(int x READ x WRITE setX NOTIFY xChanged)
Q_PROPERTY(int y READ y WRITE setY NOTIFY yChanged)
public:
CustomItem(QObject *parent = 0);
int x() const;
void setX(int);
int y() const;
void setY(int);
private:
int m_x;
int m_y;
signals:
void xChanged();
void yChanged();
public slots:
};
#endif // CUSTOMITEM_H
customitem.cpp
#include "customitem.h"
CustomItem::CustomItem(QObject *parent)
: QObject(parent), m_x(0), m_y(0)
{
}
int CustomItem::x() const
{
return m_x;
}
void CustomItem::setX(int x)
{
m_x = x;
}
int CustomItem::y() const
{
return m_y;
}
void CustomItem::setY(int y)
{
m_y = y;
}
main.qml
import QtQuick 2.5
import QtQuick.Window 2.2
import CustomItem 1.0
Window {
visible: true
CustomItem {
id: customItem
x: 50
y: 50
}
Rectangle {
id: rect
x: customItem.x
y: customItem.y
width: 100; height: 100
color: "red"
}
}