About component/property composition

[antis81]

As a working hypothesis for this let's assume the padding problem (#8829, #6288). This can be worked around, but it is rather unintuitive doing it manually:

export component CenterLayout {
    verticalLayout {
         alignment: center;
         HorizontalLayout {
              alignment: center;
              @children
         }
    }
}

export component MyButton inherits Rectangle {
    in property text <=> text.text;

    layout := CenterLayout {
        padding: root.padding;

        text := Text {
            text: "Button";
        }
    }
}

If components could be combined then this becomes a technically solvable problem.

export component CenterLayout {
    verticalLayout {
         alignment: center;
         HorizontalLayout {
              alignment: center;
              @children
         }
    }
}

export component MyButton inherits Rectangle, CenterLayout {
    padding: 16px;  // NOTE: applies to layout
    // a bit of custom look
    border-color: black;
    border-radius-bottom-right:  8px;
    border-radius-top-left:  8px;

    Text {
        text: "Button";
    }
}

To make this more interesting we could also take #8831 into account and create a custom button like this without even thinking about a deep component hierarchy:

export component MyCoolButton inherits Rectangle, CenterLayout, Text, FocusScope, TouchArea {
    padding: 15px;
    text: "Button";
}

Technically this introduces a breaking change as the padding properties of the Rectangle and Layout components clash (same for Text and maybe other component with such non-functional property).

In general this raises the question how to deal with property/callback/function name clashes? Do you have plans to implement such feature?

[antis81]

Am going to close the discussion as it is rather not relevant for the API.