Qml define custom property group

Question

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"
    }    
}